small constellation + pds based little profile viewer
karitham.tngl.io/gpreview?user=karitham.dev
gleam
bsky-profile
1@import "tailwindcss";
2
3/* ─── Google Fonts ─── */
4@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Sora:wght@300;400;500;600;700&display=swap");
5
6/* ─── Catppuccin Macchiatto Palette ─── */
7:root {
8 /* Colors */
9 --rose: #f5c2e7;
10 --flamingo: #f2cdcd;
11 --pink: #f5c2e7;
12 --mauve: #cba6f7;
13 --red: #f38ba8;
14 --maroon: #eba0ac;
15 --peach: #fab387;
16 --yellow: #f9e2af;
17 --green: #a6e3a1;
18 --teal: #94e2d5;
19 --cyan: #89dceb;
20 --blue: #89b4fa;
21 --lavender: #b4befe;
22
23 /* Text */
24 --text: #cdd6f4;
25 --subtext1: #bac2de;
26 --subtext0: #a6adc8;
27 --overlay2: #9399b2;
28 --overlay1: #7f849c;
29 --overlay0: #6c7086;
30
31 /* Surface */
32 --surface2: #585b70;
33 --surface1: #45475a;
34 --surface0: #313244;
35
36 /* Base */
37 --crust: #11111b;
38 --mantle: #181825;
39 --base: #1e1e2e;
40
41 /* Application mapping */
42 --bg: var(--base);
43 --surface: var(--surface0);
44 --surface-hover: var(--surface1);
45 --surface-active: var(--surface2);
46 --surface-elevated: var(--surface0);
47
48 --text-primary: var(--text);
49 --text-secondary: var(--subtext1);
50 --text-muted: var(--subtext0);
51 --text-on-brand: var(--crust);
52
53 --border: var(--surface1);
54 --border-focus: var(--blue);
55
56 --brand: var(--blue);
57 --brand-hover: var(--lavender);
58 --brand-glow: var(--blue);
59
60 --accent-magenta: var(--mauve);
61 --accent-magenta-subtle: var(--surface1);
62
63 --accent-cyan: var(--cyan);
64 --accent-emerald: var(--green);
65
66 /* Shadows */
67 --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
68 --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.4);
69 --shadow-glow: 0 0 8px var(--brand-glow);
70
71 /* Spacing */
72 --space-1: 4px;
73 --space-2: 8px;
74 --space-3: 12px;
75 --space-4: 16px;
76 --space-5: 24px;
77 --space-6: 32px;
78 --space-7: 48px;
79 --space-8: 64px;
80
81 /* Border radii */
82 --radius-sm: 2px;
83 --radius-md: 4px;
84 --radius-lg: 6px;
85 --radius-xl: 8px;
86 --radius-full: 9999px;
87
88 /* Typography */
89 --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
90 --font-body: "Sora", ui-sans-serif, system-ui, sans-serif;
91
92 /* Typography Scale */
93 --text-xs: 0.75rem;
94 --text-sm: 0.875rem;
95 --text-base: 1rem;
96 --text-lg: 1.125rem;
97 --text-xl: 1.5rem;
98 --text-2xl: 2rem;
99
100 /* Semantic aliases */
101 --text-body: var(--text-base);
102 --text-caption: var(--text-xs);
103 --text-heading: var(--text-xl);
104
105 /* Animation */
106 --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
107 --ease-spring: cubic-bezier(0.15, 0.9, 0.35, 1);
108 --duration-fast: 120ms;
109 --duration-normal: 200ms;
110 --duration-slow: 350ms;
111}
112
113/* ─── Base ─── */
114body {
115 background-color: var(--base);
116 font-family: var(--font-body);
117 color: var(--text);
118 -webkit-font-smoothing: antialiased;
119 -moz-osx-font-smoothing: grayscale;
120 font-size: 16px;
121 line-height: 1.6;
122}
123
124/* ─── App Shell ─── */
125.app-shell {
126 max-width: 840px;
127 margin: 0 auto;
128 padding: var(--space-5) var(--space-4);
129}
130
131@media (min-width: 640px) {
132 .app-shell {
133 padding: var(--space-7) var(--space-6);
134 }
135}
136
137/* ─── Input Zone ─── */
138.input-zone {
139 display: flex;
140 flex-direction: column;
141 gap: var(--space-4);
142 margin-bottom: var(--space-7);
143}
144
145.input-zone__row {
146 display: flex;
147 gap: var(--space-3);
148 align-items: stretch;
149}
150
151/* ─── Input Field ─── */
152.input-field {
153 flex-grow: 1;
154 min-width: 0;
155 padding: var(--space-4) var(--space-5);
156 font-family: var(--font-body);
157 font-size: 1rem;
158 color: var(--text);
159 background: var(--surface0);
160 border: 1px solid var(--border);
161 border-radius: var(--radius-md);
162 transition: border-color var(--duration-normal) var(--ease-out),
163 box-shadow var(--duration-normal) var(--ease-out),
164 background-color var(--duration-fast) var(--ease-out);
165}
166
167.input-field::placeholder {
168 color: var(--subtext0);
169}
170
171.input-field:focus {
172 outline: none;
173 border-color: var(--blue);
174 box-shadow: var(--shadow-glow);
175 background-color: var(--surface1);
176}
177
178/* ─── Button ─── */
179.btn-show {
180 flex-shrink: 0;
181 padding: var(--space-4) var(--space-6);
182 font-family: var(--font-display);
183 font-size: 1rem;
184 font-weight: 700;
185 color: var(--crust);
186 background: var(--blue);
187 border: none;
188 border-radius: var(--radius-md);
189 white-space: nowrap;
190 cursor: pointer;
191 transition: transform var(--duration-fast) var(--ease-spring),
192 box-shadow var(--duration-normal) var(--ease-out),
193 filter var(--duration-fast) var(--ease-out);
194 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
195}
196
197.btn-show:hover {
198 filter: brightness(1.1);
199 box-shadow: 0 4px 16px rgba(137, 180, 250, 0.4);
200}
201
202.btn-show:active {
203 transform: scale(0.97);
204}
205
206.btn-show:focus-visible {
207 outline: 2px solid var(--lavender);
208 outline-offset: 2px;
209}
210
211/* ─── Post Card ─── */
212.post-card {
213 background: var(--surface0);
214 border-radius: var(--radius-xl);
215 box-shadow: var(--shadow-card);
216 overflow: hidden;
217 transition: transform var(--duration-normal) var(--ease-spring),
218 box-shadow var(--duration-normal) var(--ease-out);
219 border: 1px solid var(--border);
220}
221
222.post-card:hover {
223 transform: translateY(-2px);
224 box-shadow: var(--shadow-card-hover);
225}
226
227/* ─── Post Header ─── */
228.post-header {
229 display: flex;
230 align-items: center;
231 gap: var(--space-3);
232 padding: var(--space-4) var(--space-5) var(--space-3);
233 border-bottom: 1px solid var(--surface1);
234}
235
236.post-header__info {
237 display: flex;
238 flex-direction: column;
239 min-width: 0;
240}
241
242.post-header__name {
243 font-family: var(--font-display);
244 font-weight: 700;
245 font-size: 1.05rem;
246 line-height: 1.3;
247 color: var(--text);
248}
249
250.post-header__handle {
251 font-size: var(--text-sm);
252 line-height: 1.3;
253 color: var(--subtext0);
254 margin-top: 2px;
255}
256
257.post-header__bio {
258 font-size: 0.75rem;
259 line-height: 1.3;
260 color: var(--subtext1);
261 margin-top: var(--space-1);
262 overflow: hidden;
263 text-overflow: ellipsis;
264 white-space: nowrap;
265}
266
267/* ─── Avatar Ring ─── */
268.avatar-ring {
269 width: 3.5rem;
270 height: 3.5rem;
271 border-radius: 50%;
272 object-fit: cover;
273 flex-shrink: 0;
274 background: var(--mauve);
275 padding: 2px;
276}
277
278/* ─── Avatar Fallbacks ─── */
279.avatar-fallback {
280 width: 3.5rem;
281 height: 3.5rem;
282 border-radius: 50%;
283 background: var(--mauve);
284 display: flex;
285 align-items: center;
286 justify-content: center;
287 color: var(--crust);
288 font-family: var(--font-display);
289 font-size: 1.25rem;
290 font-weight: 800;
291 flex-shrink: 0;
292}
293
294/* ─── Post Body ─── */
295.post-body {
296 padding: var(--space-4) var(--space-5);
297 color: var(--text);
298 font-size: 1.05rem;
299 line-height: 1.7;
300 white-space: pre-wrap;
301 word-break: break-word;
302 text-wrap: pretty;
303}
304
305/* ─── Post Embed ─── */
306.post-embed {
307 padding: 0 var(--space-5) var(--space-4);
308}
309
310/* ─── Image Grid ─── */
311.image-grid {
312 display: grid;
313 gap: var(--space-2);
314 border-radius: var(--radius-md);
315 overflow: hidden;
316 margin-top: var(--space-3);
317}
318.image-grid--1 { grid-template-columns: 1fr; }
319.image-grid--2 { grid-template-columns: 1fr 1fr; }
320.image-grid--3 {
321 grid-template-columns: 1fr 1fr;
322 grid-template-rows: 1fr 1fr;
323}
324.image-grid--3 img:first-child {
325 grid-row: 1 / 3;
326}
327.image-grid--4 { grid-template-columns: 1fr 1fr; }
328.image-grid img {
329 width: 100%;
330 height: 100%;
331 object-fit: cover;
332 outline: 1px solid var(--surface1);
333 transition: transform var(--duration-normal) var(--ease-out),
334 filter var(--duration-normal) var(--ease-out);
335}
336.image-grid img:hover {
337 transform: scale(1.02);
338 filter: brightness(1.1);
339}
340
341/* ─── External Link Card ─── */
342.external-link-card {
343 display: flex;
344 flex-direction: column;
345 border: 1px solid var(--border);
346 border-radius: var(--radius-lg);
347 overflow: hidden;
348 text-decoration: none;
349 color: inherit;
350 transition: background-color var(--duration-normal) var(--ease-out);
351 margin-top: var(--space-3);
352}
353.external-link-card:hover {
354 background-color: var(--surface1);
355}
356.external-link-card__thumb {
357 width: 100%;
358 height: 200px;
359 object-fit: cover;
360}
361.external-link-card__content {
362 padding: var(--space-3);
363}
364.external-link-card__title {
365 font-family: var(--font-display);
366 font-weight: 600;
367 font-size: 0.95rem;
368 line-height: 1.4;
369 margin-bottom: var(--space-1);
370 overflow: hidden;
371 text-overflow: ellipsis;
372 white-space: nowrap;
373}
374.external-link-card__desc {
375 font-size: var(--text-sm);
376 color: var(--text-muted);
377 line-height: 1.5;
378 margin-bottom: var(--space-2);
379 display: -webkit-box;
380 -webkit-line-clamp: 2;
381 -webkit-box-orient: vertical;
382 overflow: hidden;
383}
384.external-link-card__domain {
385 font-size: 0.75rem;
386 color: var(--text-muted);
387}
388
389/* ─── Quote Post ─── */
390.quote-post {
391 border: none;
392 border-left: 3px solid var(--mauve);
393 border-radius: 0;
394 padding: var(--space-3) var(--space-4);
395 margin-top: var(--space-3);
396 background: var(--surface1);
397 box-shadow: none;
398}
399.quote-post::before {
400 content: "Quoted post";
401 display: block;
402 font-size: var(--text-xs);
403 color: var(--text-muted);
404 text-transform: uppercase;
405 letter-spacing: 0.05em;
406 margin-bottom: var(--space-2);
407}
408.quote-post--stub {
409 opacity: 0.8;
410 font-style: italic;
411}
412.quote-post__header {
413 display: flex;
414 gap: var(--space-2);
415 margin-bottom: var(--space-2);
416 align-items: baseline;
417 flex-wrap: wrap;
418}
419.quote-post__author {
420 font-family: var(--font-display);
421 font-weight: 600;
422 font-size: 0.9rem;
423}
424.quote-post__handle {
425 font-size: 0.8rem;
426 color: var(--text-muted);
427 word-break: break-all;
428}
429.quote-post__text {
430 font-size: 0.9rem;
431 line-height: 1.5;
432 color: var(--text);
433 margin: 0;
434}
435
436/* ─── Record with Media ─── */
437.record-with-media {
438 display: flex;
439 flex-direction: column;
440 gap: var(--space-3);
441 margin-top: var(--space-3);
442}
443
444/* ─── Post Footer ─── */
445.post-footer {
446 display: flex;
447 align-items: center;
448 justify-content: space-between;
449 margin-top: var(--space-4);
450 padding: var(--space-3) var(--space-5);
451 border-top: 1px solid var(--border);
452}
453
454/* ─── Footer Badges & Timestamp ─── */
455.post-footer__badges {
456 display: flex;
457 align-items: center;
458 gap: var(--space-3);
459}
460
461.post-footer__timestamp {
462 font-size: var(--text-xs);
463 color: var(--subtext0);
464 white-space: nowrap;
465}
466
467/* ─── Badge ─── */
468.badge {
469 display: inline-flex;
470 align-items: center;
471 padding: 3px 10px;
472 border-radius: var(--radius-sm);
473 font-size: 0.75rem;
474 font-weight: 600;
475 background: var(--surface1);
476 color: var(--peach);
477 border: 1px solid var(--surface2);
478}
479
480/* ─── Tag Badge ─── */
481.tag-badge {
482 display: inline-flex;
483 align-items: center;
484 padding: 3px 10px;
485 border-radius: var(--radius-sm);
486 font-size: 0.75rem;
487 font-weight: 600;
488 font-family: var(--font-display);
489 background: var(--surface1);
490 color: var(--mauve);
491 border: 1px solid var(--mauve);
492 text-decoration: none;
493 transition: background-color var(--duration-fast) var(--ease-out),
494 transform var(--duration-fast) var(--ease-spring);
495}
496
497.tag-badge:hover {
498 background: var(--mauve);
499 color: var(--crust);
500 transform: scale(1.03);
501}
502
503/* ─── Facet Links ─── */
504.mention-link {
505 color: var(--blue);
506 font-weight: 600;
507 text-decoration: none;
508 text-decoration-line: underline;
509 text-decoration-color: var(--surface2);
510 text-underline-offset: 2px;
511 transition: color var(--duration-fast) var(--ease-out);
512}
513
514.mention-link:hover {
515 color: var(--lavender);
516 text-decoration-color: var(--lavender);
517}
518
519.link-facet {
520 color: var(--green);
521 font-weight: 500;
522 text-decoration: none;
523 text-decoration-line: underline;
524 text-decoration-color: var(--surface2);
525 text-underline-offset: 2px;
526 transition: color var(--duration-fast) var(--ease-out);
527}
528
529.link-facet:hover {
530 color: var(--teal);
531 text-decoration-color: var(--teal);
532}
533
534.tag-link {
535 color: var(--mauve);
536 font-weight: 600;
537}
538
539.tag-link a {
540 color: inherit;
541 text-decoration: none;
542 transition: color var(--duration-fast) var(--ease-out);
543}
544
545.tag-link a:hover {
546 color: var(--pink);
547}
548
549/* ─── Reply Context ─── */
550.reply-context {
551 padding: var(--space-2) var(--space-4);
552 font-size: var(--text-xs);
553 color: var(--text-muted);
554 background: var(--surface1);
555 border-left: 3px solid var(--mauve);
556}
557
558.reply-context__label {
559 color: var(--subtext0);
560 opacity: 0.7;
561}
562
563/* ─── Loading Skeleton ─── */
564.loading-skeleton {
565 background: var(--surface1);
566 position: relative;
567 overflow: hidden;
568 border-radius: var(--radius-md);
569 border: 1px solid var(--border);
570}
571
572.loading-skeleton::after {
573 content: "";
574 position: absolute;
575 top: 0;
576 left: -150%;
577 width: 50%;
578 height: 100%;
579 background: var(--surface2);
580 animation: shimmer 1.5s ease-in-out infinite;
581}
582
583@keyframes shimmer {
584 0% { transform: translateX(0); }
585 100% { transform: translateX(300%); }
586}
587
588/* ─── Error State ─── */
589.error-state {
590 padding: var(--space-5);
591 color: var(--red);
592 font-weight: 500;
593 text-align: center;
594 background: var(--surface1);
595 border-radius: var(--radius-lg);
596 border: 1px solid var(--red);
597}
598
599/* ─── Empty State ─── */
600.empty-state {
601 padding: var(--space-8) var(--space-5);
602 text-align: center;
603 color: var(--subtext0);
604}
605
606.empty-state__title {
607 font-family: var(--font-display);
608 font-size: 1.25rem;
609 font-weight: 700;
610 color: var(--subtext1);
611 text-wrap: balance;
612 margin-bottom: var(--space-2);
613}
614
615.empty-state__desc {
616 font-size: 0.95rem;
617 line-height: 1.6;
618 text-wrap: pretty;
619}
620
621/* ─── Animations ─── */
622@keyframes fadeSlideIn {
623 from {
624 opacity: 0;
625 transform: translateY(12px);
626 filter: blur(4px);
627 }
628 to {
629 opacity: 1;
630 transform: translateY(0);
631 filter: blur(0);
632 }
633}
634
635.stagger-1 {
636 animation: fadeSlideIn var(--duration-slow) var(--ease-out) both;
637 animation-delay: 0ms;
638}
639
640.stagger-2 {
641 animation: fadeSlideIn var(--duration-slow) var(--ease-out) both;
642 animation-delay: 60ms;
643}
644
645.stagger-3 {
646 animation: fadeSlideIn var(--duration-slow) var(--ease-out) both;
647 animation-delay: 120ms;
648}
649
650/* ─── Reduced Motion ─── */
651@media (prefers-reduced-motion: reduce) {
652 *,
653 *::before,
654 *::after {
655 animation-duration: 0.01ms !important;
656 animation-iteration-count: 1 !important;
657 transition-duration: 0.01ms !important;
658 }
659}
660
661
662
663/* ─── Error Badge ─── */
664.error-badge {
665 margin-top: var(--space-3);
666 font-size: 0.8rem;
667 color: var(--red);
668 background: var(--surface0);
669 padding: var(--space-2) var(--space-3);
670 border-radius: var(--radius-lg);
671}
672
673/* ─── Image Cover ─── */
674.image-cover {
675 width: 100%;
676 height: auto;
677 object-fit: cover;
678}
679
680/* ─── Badge Group ─── */
681.badge-group {
682 display: flex;
683 gap: var(--space-1);
684 flex-wrap: wrap;
685}
686
687/* ─── Profile Card ─── */
688.profile-card {
689 background: var(--surface0);
690 border-radius: var(--radius-xl);
691 box-shadow: var(--shadow-card);
692 overflow: hidden;
693 transition: transform var(--duration-normal) var(--ease-spring),
694 box-shadow var(--duration-normal) var(--ease-out);
695 border: 1px solid var(--border);
696 animation: fadeInUp var(--duration-slow) var(--ease-out) both;
697 margin-bottom: var(--space-7);
698}
699
700.profile-card--loading {
701 background: var(--surface1);
702}
703
704.profile-card--error {
705 background-color: rgba(243, 139, 168, 0.1);
706 border-left: 4px solid var(--red);
707 padding: var(--space-4);
708}
709
710.profile-card__content {
711 padding: var(--space-5);
712 display: flex;
713 gap: var(--space-4);
714 align-items: flex-start;
715}
716
717.profile-card__info {
718 display: flex;
719 flex-direction: column;
720 gap: var(--space-2);
721 min-width: 0;
722}
723
724/* ─── Profile Banner ─── */
725.profile-banner {
726 height: 120px;
727 background: var(--surface1);
728 position: relative;
729 overflow: hidden;
730}
731
732.profile-banner--skeleton {
733 background: linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);
734 background-size: 200px 100%;
735 animation: shimmer 1.5s ease-in-out infinite;
736}
737
738.profile-banner--empty {
739 background: var(--surface1);
740}
741
742.profile-banner__image {
743 width: 100%;
744 height: 100%;
745 object-fit: cover;
746}
747
748/* ─── Profile Avatar ─── */
749.profile-avatar {
750 width: 5rem;
751 height: 5rem;
752 border-radius: 50%;
753 object-fit: cover;
754 flex-shrink: 0;
755 border: 3px solid var(--surface0);
756 background: var(--mauve);
757}
758
759.profile-avatar--skeleton {
760 width: 5rem;
761 height: 5rem;
762 border-radius: 50%;
763 background: linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);
764 background-size: 200px 100%;
765 animation: shimmer 1.5s ease-in-out infinite;
766}
767
768.profile-avatar--fallback {
769 width: 5rem;
770 height: 5rem;
771 border-radius: 50%;
772 background: var(--mauve);
773 display: flex;
774 align-items: center;
775 justify-content: center;
776 color: var(--crust);
777 font-family: var(--font-display);
778 font-size: 1.5rem;
779 font-weight: 800;
780}
781
782/* ─── Profile Name ─── */
783.profile-name {
784 font-family: var(--font-display);
785 font-weight: 700;
786 font-size: var(--text-xl);
787 line-height: 1.3;
788 color: var(--text);
789 margin: 0;
790}
791
792.profile-name--empty {
793 color: var(--subtext0);
794}
795
796/* ─── Profile Bio ─── */
797.profile-bio {
798 font-size: 0.95rem;
799 line-height: 1.6;
800 color: var(--subtext1);
801 margin: 0;
802 text-wrap: pretty;
803}
804
805/* ─── Profile Joined ─── */
806.profile-joined {
807 font-size: 0.85rem;
808 color: var(--subtext0);
809 margin: 0;
810}
811
812/* ─── Loading Text ─── */
813.loading-text {
814 font-size: 0.9rem;
815 color: var(--subtext0);
816 text-align: center;
817 margin-top: var(--space-3);
818}
819
820/* ─── Skeleton Lines ─── */
821.skeleton-line {
822 background: linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);
823 background-size: 200px 100%;
824 animation: shimmer 1.5s ease-in-out infinite;
825 border-radius: var(--radius-sm);
826 height: 1rem;
827}
828
829.skeleton-line-md {
830 width: 70%;
831 height: 1.25rem;
832}
833
834.skeleton-line-sm {
835 width: 50%;
836 height: 0.875rem;
837}
838
839.skeleton-circle {
840 width: 2.5rem;
841 height: 2.5rem;
842 border-radius: 50%;
843 background: linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);
844 background-size: 200px 100%;
845 animation: shimmer 1.5s ease-in-out infinite;
846 flex-shrink: 0;
847}
848
849/* ─── Feed Container ─── */
850.feed-container {
851 display: flex;
852 flex-direction: column;
853 gap: var(--space-3);
854}
855
856.feed-loading-header {
857 text-align: center;
858 padding: var(--space-4);
859}
860
861/* ─── Feed Item ─── */
862.feed-item {
863 background: var(--surface0);
864 border-radius: var(--radius-xl);
865 box-shadow: var(--shadow-card);
866 padding: var(--space-4) var(--space-5);
867 border: 1px solid var(--border);
868 transition: transform var(--duration-normal) var(--ease-spring),
869 box-shadow var(--duration-normal) var(--ease-out);
870 animation: fadeInUp var(--duration-slow) var(--ease-out) both;
871}
872
873.feed-item:hover {
874 transform: translateY(-2px);
875 box-shadow: var(--shadow-card-hover);
876}
877
878.feed-item--loading {
879 background: var(--surface1);
880 pointer-events: none;
881}
882
883.feed-item--error {
884 background-color: rgba(243, 139, 168, 0.1);
885 border-left: 4px solid var(--red);
886 padding: var(--space-4);
887}
888
889.feed-item__content {
890 display: flex;
891 flex-direction: column;
892 gap: var(--space-3);
893}
894
895.feed-item__header {
896 display: flex;
897 align-items: center;
898 gap: var(--space-3);
899 margin-bottom: var(--space-3);
900}
901
902.feed-item__header-info {
903 display: flex;
904 flex-direction: column;
905 gap: var(--space-1);
906 min-width: 0;
907}
908
909.feed-item__body {
910 display: flex;
911 flex-direction: column;
912 gap: var(--space-2);
913 margin-bottom: var(--space-3);
914}
915
916.feed-item__text {
917 font-size: 1rem;
918 line-height: 1.6;
919 color: var(--text);
920 text-wrap: pretty;
921 word-break: break-word;
922}
923
924.feed-item__footer {
925 display: flex;
926 flex-direction: column;
927 gap: var(--space-2);
928 padding-top: var(--space-3);
929 border-top: 1px solid var(--surface1);
930}
931
932.feed-item__timestamp {
933 font-size: 0.8rem;
934 color: var(--subtext0);
935}
936
937/* ─── Error Message ─── */
938.error-message {
939 color: var(--red);
940 font-weight: 500;
941 margin-bottom: var(--space-3);
942}
943
944/* ─── Retry Button ─── */
945.btn-retry {
946 padding: var(--space-3) var(--space-5);
947 font-family: var(--font-display);
948 font-size: 0.9rem;
949 font-weight: 600;
950 color: var(--crust);
951 background: var(--red);
952 border: none;
953 border-radius: var(--radius-md);
954 cursor: pointer;
955 transition: background-color var(--duration-fast) var(--ease-out),
956 transform var(--duration-fast) var(--ease-spring);
957}
958
959.btn-retry:hover {
960 background: var(--maroon);
961 transform: translateY(-1px);
962}
963
964.btn-retry:active {
965 transform: translateY(0);
966}
967
968/* ─── Fade In Up Animation ─── */
969@keyframes fadeInUp {
970 from {
971 opacity: 0;
972 transform: translateY(10px);
973 }
974 to {
975 opacity: 1;
976 transform: translateY(0);
977 }
978}
979
980/* ─── Stagger Animation Delays ─── */
981.stagger-1 {
982 animation-delay: 0ms;
983}
984
985.stagger-2 {
986 animation-delay: 60ms;
987}
988
989.stagger-3 {
990 animation-delay: 120ms;
991}
992
993.stagger-4 {
994 animation-delay: 180ms;
995}
996
997.stagger-5 {
998 animation-delay: 240ms;
999}
1000
1001/* ─── Responsive Design ─── */
1002@media (max-width: 640px) {
1003 .app-shell {
1004 padding: var(--space-4) var(--space-3);
1005 }
1006
1007 .profile-card__content {
1008 padding: var(--space-4);
1009 flex-direction: column;
1010 align-items: center;
1011 text-align: center;
1012 }
1013
1014 .profile-card__info {
1015 align-items: center;
1016 }
1017
1018 .profile-name {
1019 font-size: 1.25rem;
1020 }
1021
1022 .profile-avatar,
1023 .profile-avatar--skeleton,
1024 .profile-avatar--fallback {
1025 width: 4rem;
1026 height: 4rem;
1027 }
1028
1029 .input-zone__row {
1030 flex-direction: column;
1031 gap: var(--space-3);
1032 }
1033
1034 .input-field {
1035 width: 100%;
1036 }
1037
1038 .btn-show,
1039 .btn-retry {
1040 width: 100%;
1041 justify-content: center;
1042 }
1043
1044 .feed-item {
1045 padding: var(--space-3) var(--space-4);
1046 }
1047
1048 .feed-item__text {
1049 font-size: 0.95rem;
1050 }
1051}
1052
1053/* ─── Accessibility ─── */
1054@media (prefers-reduced-motion: reduce) {
1055 *,
1056 *::before,
1057 *::after {
1058 animation-duration: 0.01ms !important;
1059 animation-iteration-count: 1 !important;
1060 transition-duration: 0.01ms !important;
1061 scroll-behavior: auto !important;
1062 }
1063}