(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.landing-page {
2 min-height: 100vh;
3 background: var(--bg-primary);
4}
5
6.landing-nav {
7 display: flex;
8 justify-content: space-between;
9 align-items: center;
10 padding: 16px 32px;
11 max-width: 1200px;
12 margin: 0 auto;
13}
14
15.landing-logo {
16 display: flex;
17 align-items: center;
18 gap: 10px;
19 text-decoration: none;
20 color: var(--text-primary);
21 font-weight: 600;
22 font-size: 1.1rem;
23}
24
25.landing-logo img {
26 width: 28px;
27 height: 28px;
28}
29
30.landing-nav-links {
31 display: flex;
32 align-items: center;
33 gap: 24px;
34}
35
36.landing-nav-links a:not(.btn) {
37 color: var(--text-secondary);
38 text-decoration: none;
39 font-size: 0.9rem;
40 transition: color 0.15s;
41}
42
43.landing-nav-links a:not(.btn):hover {
44 color: var(--text-primary);
45}
46
47.landing-hero {
48 padding: 80px 32px 40px;
49 max-width: 800px;
50 margin: 0 auto;
51 text-align: center;
52}
53
54.landing-hero-content {
55 display: flex;
56 flex-direction: column;
57 align-items: center;
58 gap: 24px;
59}
60
61.landing-badge {
62 display: inline-flex;
63 align-items: center;
64 gap: 8px;
65 font-size: 0.8rem;
66 font-weight: 500;
67 color: var(--accent);
68 background: var(--accent-subtle);
69 padding: 6px 14px;
70 border-radius: var(--radius-full);
71}
72
73.landing-title {
74 font-size: 3.5rem;
75 font-weight: 700;
76 line-height: 1.1;
77 letter-spacing: -0.03em;
78 color: var(--text-primary);
79 margin: 0;
80}
81
82.landing-title-accent {
83 color: var(--accent);
84}
85
86.landing-subtitle {
87 font-size: 1.2rem;
88 line-height: 1.7;
89 color: var(--text-secondary);
90 max-width: 580px;
91 margin: 0;
92}
93
94.landing-cta {
95 display: flex;
96 gap: 12px;
97 flex-wrap: wrap;
98 justify-content: center;
99 margin-top: 8px;
100}
101
102.btn-lg {
103 padding: 10px 20px;
104 font-size: 0.95rem;
105}
106
107.landing-browsers {
108 font-size: 0.85rem;
109 color: var(--text-tertiary);
110 margin: 0;
111}
112
113.landing-browsers a {
114 color: var(--text-secondary);
115 text-decoration: underline;
116 text-underline-offset: 2px;
117}
118
119.landing-browsers a:hover {
120 color: var(--text-primary);
121}
122
123.landing-demo {
124 padding: 40px 32px 80px;
125 max-width: 1100px;
126 margin: 0 auto;
127}
128
129.demo-window {
130 background: var(--bg-secondary);
131 border: 1px solid var(--border);
132 border-radius: var(--radius-xl);
133 overflow: hidden;
134 box-shadow: var(--shadow-lg);
135}
136
137.demo-browser-bar {
138 display: flex;
139 align-items: center;
140 gap: 16px;
141 padding: 12px 16px;
142 background: var(--bg-tertiary);
143 border-bottom: 1px solid var(--border);
144}
145
146.demo-browser-dots {
147 display: flex;
148 gap: 6px;
149}
150
151.demo-browser-dots span {
152 width: 12px;
153 height: 12px;
154 border-radius: 50%;
155 background: var(--border);
156}
157
158.demo-browser-url {
159 flex: 1;
160 background: var(--bg-primary);
161 border-radius: var(--radius-md);
162 padding: 8px 14px;
163 font-size: 0.8rem;
164 color: var(--text-tertiary);
165}
166
167.demo-content {
168 display: grid;
169 grid-template-columns: 1fr 340px;
170 min-height: 380px;
171}
172
173.demo-article {
174 padding: 32px;
175 border-right: 1px solid var(--border);
176}
177
178.demo-text {
179 font-size: 1.05rem;
180 line-height: 1.9;
181 color: var(--text-primary);
182 margin: 0 0 20px 0;
183}
184
185.demo-text:last-child {
186 margin-bottom: 0;
187}
188
189.demo-highlight {
190 background-color: transparent;
191 color: inherit;
192 border-bottom: 2px solid var(--accent);
193}
194
195.demo-sidebar {
196 padding: 0;
197 background: var(--bg-primary);
198 display: flex;
199 flex-direction: column;
200 gap: 0;
201 overflow-y: auto;
202 font-family:
203 "IBM Plex Sans",
204 -apple-system,
205 BlinkMacSystemFont,
206 sans-serif;
207}
208
209.demo-sidebar-header {
210 display: flex;
211 align-items: center;
212 justify-content: space-between;
213 padding: 14px 16px;
214 border-bottom: 1px solid var(--border);
215 background: var(--bg-primary);
216}
217
218.demo-logo-section {
219 display: flex;
220 align-items: center;
221 gap: 10px;
222}
223
224.demo-logo-icon {
225 color: var(--accent);
226 display: flex;
227 align-items: center;
228}
229
230.demo-logo-text {
231 font-weight: 600;
232 font-size: 15px;
233 color: var(--text-primary);
234 letter-spacing: -0.02em;
235}
236
237.demo-user-section {
238 display: flex;
239 align-items: center;
240 gap: 8px;
241}
242
243.demo-user-handle {
244 font-size: 12px;
245 color: var(--text-secondary);
246 background: var(--bg-tertiary);
247 padding: 4px 10px;
248 border-radius: 9999px;
249}
250
251.demo-user-avatar {
252 width: 24px;
253 height: 24px;
254 border-radius: 50%;
255 background: var(--bg-hover);
256 color: var(--text-secondary);
257 display: flex;
258 align-items: center;
259 justify-content: center;
260 font-size: 12px;
261 font-weight: 600;
262}
263
264.demo-page-info {
265 display: flex;
266 align-items: center;
267 gap: 8px;
268 padding: 10px 16px;
269 background: var(--bg-primary);
270 border-bottom: 1px solid var(--border);
271 font-size: 12px;
272 color: var(--text-tertiary);
273}
274
275.demo-annotations-list {
276 display: flex;
277 flex-direction: column;
278 gap: 1px;
279 background: var(--border);
280}
281
282.demo-annotation {
283 background: var(--bg-primary);
284 border: none;
285 border-radius: 0;
286 padding: 14px 16px;
287}
288
289.demo-annotation-secondary {
290 opacity: 1;
291}
292
293.demo-annotation-header {
294 display: flex;
295 align-items: center;
296 gap: 10px;
297 margin-bottom: 8px;
298}
299
300.demo-avatar {
301 width: 26px;
302 height: 26px;
303 border-radius: 50%;
304 background: var(--accent);
305 color: var(--bg-primary);
306 display: flex;
307 align-items: center;
308 justify-content: center;
309 font-size: 10px;
310 font-weight: 600;
311}
312
313.demo-meta {
314 display: flex;
315 flex-direction: column;
316 gap: 0;
317}
318
319.demo-author {
320 font-size: 12px;
321 font-weight: 600;
322 color: var(--text-primary);
323}
324
325.demo-time {
326 font-size: 11px;
327 color: var(--text-tertiary);
328}
329
330.demo-quote {
331 font-size: 12px;
332 font-style: italic;
333 color: var(--text-secondary);
334 padding: 8px 12px;
335 border-left: 2px solid var(--accent);
336 margin: 0 0 8px 0;
337 background: var(--accent-subtle);
338 border-radius: 0 6px 6px 0;
339 line-height: 1.5;
340}
341
342.demo-comment {
343 font-size: 13px;
344 line-height: 1.5;
345 color: var(--text-primary);
346 margin: 0 0 12px 0;
347}
348
349.demo-jump-btn {
350 background: transparent;
351 border: none;
352 padding: 0;
353 color: var(--accent);
354 font-size: 11px;
355 font-weight: 500;
356 cursor: pointer;
357 display: inline-flex;
358 align-items: center;
359 margin-top: 4px;
360}
361
362.demo-jump-btn:hover {
363 text-decoration: underline;
364 text-underline-offset: 2px;
365}
366
367.landing-section {
368 padding: 80px 32px;
369 max-width: 1000px;
370 margin: 0 auto;
371}
372
373.landing-section-alt {
374 background: var(--bg-secondary);
375 max-width: none;
376}
377
378.landing-section-alt > * {
379 max-width: 1000px;
380 margin-left: auto;
381 margin-right: auto;
382}
383
384.landing-section-title {
385 font-size: 2rem;
386 font-weight: 700;
387 text-align: center;
388 margin: 0 0 48px 0;
389 color: var(--text-primary);
390}
391
392.landing-steps {
393 display: flex;
394 flex-direction: column;
395 gap: 32px;
396}
397
398.landing-step {
399 display: flex;
400 gap: 24px;
401 align-items: flex-start;
402}
403
404.landing-step-num {
405 width: 40px;
406 height: 40px;
407 border-radius: 50%;
408 background: var(--accent);
409 color: white;
410 display: flex;
411 align-items: center;
412 justify-content: center;
413 font-weight: 700;
414 font-size: 1.1rem;
415 flex-shrink: 0;
416}
417
418.landing-step-content h3 {
419 font-size: 1.15rem;
420 font-weight: 600;
421 margin: 0 0 8px 0;
422 color: var(--text-primary);
423}
424
425.landing-step-content p {
426 font-size: 1rem;
427 color: var(--text-secondary);
428 margin: 0;
429 line-height: 1.6;
430}
431
432.landing-features-grid {
433 display: grid;
434 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
435 gap: 32px;
436}
437
438.landing-feature {
439 text-align: center;
440 padding: 24px 16px;
441}
442
443.landing-feature-icon {
444 width: 52px;
445 height: 52px;
446 border-radius: var(--radius-lg);
447 background: var(--accent-subtle);
448 color: var(--accent);
449 display: flex;
450 align-items: center;
451 justify-content: center;
452 margin: 0 auto 16px;
453}
454
455.landing-feature h3 {
456 font-size: 1.05rem;
457 font-weight: 600;
458 margin: 0 0 8px 0;
459 color: var(--text-primary);
460}
461
462.landing-feature p {
463 font-size: 0.9rem;
464 color: var(--text-secondary);
465 margin: 0;
466 line-height: 1.6;
467}
468
469.landing-protocol {
470 background: var(--bg-secondary);
471 max-width: none;
472 border-top: 1px solid var(--border);
473 border-bottom: 1px solid var(--border);
474}
475
476.landing-protocol-grid {
477 display: grid;
478 grid-template-columns: 1fr 1fr;
479 gap: 64px;
480 align-items: center;
481 max-width: 1000px;
482 margin: 0 auto;
483}
484
485.landing-protocol-main h2 {
486 font-size: 1.75rem;
487 font-weight: 700;
488 margin: 0 0 16px 0;
489 color: var(--text-primary);
490}
491
492.landing-protocol-main p {
493 font-size: 1rem;
494 color: var(--text-secondary);
495 margin: 0 0 16px 0;
496 line-height: 1.7;
497}
498
499.landing-protocol-main a {
500 color: var(--accent);
501 text-decoration: underline;
502 text-underline-offset: 2px;
503}
504
505.landing-protocol-features {
506 display: flex;
507 flex-direction: column;
508 gap: 20px;
509}
510
511.landing-protocol-item {
512 display: flex;
513 gap: 16px;
514 align-items: flex-start;
515 color: var(--accent);
516}
517
518.landing-protocol-item div {
519 display: flex;
520 flex-direction: column;
521}
522
523.landing-protocol-item strong {
524 font-size: 0.95rem;
525 font-weight: 600;
526 color: var(--text-primary);
527}
528
529.landing-protocol-item span {
530 font-size: 0.85rem;
531 color: var(--text-tertiary);
532}
533
534.landing-final-cta {
535 text-align: center;
536}
537
538.landing-final-cta h2 {
539 font-size: 2rem;
540 font-weight: 700;
541 margin: 0 0 12px 0;
542 color: var(--text-primary);
543}
544
545.landing-final-cta p {
546 font-size: 1.1rem;
547 color: var(--text-secondary);
548 margin: 0 0 28px 0;
549}
550
551.landing-footer {
552 border-top: 1px solid var(--border);
553 padding: 48px 32px 32px;
554}
555
556.landing-footer-grid {
557 display: flex;
558 justify-content: space-between;
559 max-width: 1000px;
560 margin: 0 auto 40px;
561}
562
563.landing-footer-brand {
564 max-width: 280px;
565}
566
567.landing-footer-brand p {
568 font-size: 0.9rem;
569 color: var(--text-tertiary);
570 margin: 12px 0 0 0;
571}
572
573.landing-footer-links {
574 display: flex;
575 gap: 64px;
576}
577
578.landing-footer-col {
579 display: flex;
580 flex-direction: column;
581 gap: 10px;
582}
583
584.landing-footer-col h4 {
585 font-size: 0.75rem;
586 font-weight: 600;
587 text-transform: uppercase;
588 letter-spacing: 0.08em;
589 color: var(--text-tertiary);
590 margin: 0 0 4px 0;
591}
592
593.landing-footer-col a {
594 font-size: 0.9rem;
595 color: var(--text-secondary);
596 text-decoration: none;
597}
598
599.landing-footer-col a:hover {
600 color: var(--text-primary);
601}
602
603.landing-footer-bottom {
604 text-align: center;
605 padding-top: 24px;
606 border-top: 1px solid var(--border);
607 max-width: 1000px;
608 margin: 0 auto;
609}
610
611.landing-footer-bottom p {
612 font-size: 0.85rem;
613 color: var(--text-tertiary);
614 margin: 0;
615}
616
617@media (max-width: 900px) {
618 .demo-content {
619 grid-template-columns: 1fr;
620 }
621
622 .demo-article {
623 border-right: none;
624 border-bottom: 1px solid var(--border);
625 }
626
627 .demo-sidebar {
628 max-height: 340px;
629 }
630
631 .landing-protocol-grid {
632 grid-template-columns: 1fr;
633 gap: 40px;
634 }
635}
636
637@media (max-width: 768px) {
638 .landing-nav {
639 padding: 16px 20px;
640 }
641
642 .landing-nav-links a:not(.btn) {
643 display: none;
644 }
645
646 .landing-hero {
647 padding: 60px 20px 30px;
648 }
649
650 .landing-title {
651 font-size: 2.5rem;
652 }
653
654 .landing-subtitle {
655 font-size: 1.1rem;
656 }
657
658 .landing-cta {
659 flex-direction: column;
660 width: 100%;
661 }
662
663 .landing-cta .btn {
664 width: 100%;
665 justify-content: center;
666 }
667
668 .landing-demo {
669 padding: 30px 16px 60px;
670 }
671
672 .demo-browser-bar {
673 padding: 10px 12px;
674 }
675
676 .demo-browser-dots {
677 display: none;
678 }
679
680 .demo-article {
681 padding: 20px;
682 }
683
684 .demo-text {
685 font-size: 0.95rem;
686 }
687
688 .demo-sidebar {
689 padding: 16px;
690 }
691
692 .landing-section {
693 padding: 60px 20px;
694 }
695
696 .landing-section-title {
697 font-size: 1.5rem;
698 margin-bottom: 32px;
699 }
700
701 .landing-step {
702 gap: 16px;
703 }
704
705 .landing-step-num {
706 width: 32px;
707 height: 32px;
708 font-size: 0.95rem;
709 }
710
711 .landing-features-grid {
712 grid-template-columns: 1fr;
713 gap: 24px;
714 }
715
716 .landing-feature {
717 text-align: left;
718 display: flex;
719 gap: 16px;
720 padding: 16px 0;
721 }
722
723 .landing-feature-icon {
724 margin: 0;
725 width: 44px;
726 height: 44px;
727 flex-shrink: 0;
728 }
729
730 .landing-protocol-main h2 {
731 font-size: 1.5rem;
732 }
733
734 .landing-footer {
735 padding: 40px 20px 24px;
736 }
737
738 .landing-footer-grid {
739 flex-direction: column;
740 gap: 40px;
741 }
742
743 .landing-footer-links {
744 flex-wrap: wrap;
745 gap: 32px;
746 }
747}
748
749.demo-hover-indicator {
750 position: absolute;
751 display: flex;
752 align-items: center;
753 z-index: 100;
754 pointer-events: none;
755 background: transparent;
756 opacity: 0;
757 transform: scale(0.8);
758 transition:
759 opacity 0.15s ease-out,
760 transform 0.15s ease-out;
761}
762
763.demo-hover-indicator.visible {
764 opacity: 1;
765 transform: scale(1);
766}
767
768.demo-hover-avatar {
769 width: 28px;
770 height: 28px;
771 border-radius: 50%;
772 object-fit: cover;
773 border: 2px solid var(--bg-primary);
774 margin-left: -10px;
775 background: var(--bg-elevated);
776}
777
778.demo-hover-avatar:first-child {
779 margin-left: 0;
780}
781
782.demo-hover-avatar-fallback {
783 width: 28px;
784 height: 28px;
785 border-radius: 50%;
786 background: #6366f1;
787 color: white;
788 display: flex;
789 align-items: center;
790 justify-content: center;
791 font-size: 12px;
792 font-weight: 600;
793 font-family: -apple-system, sans-serif;
794 border: 2px solid var(--bg-primary);
795 margin-left: -10px;
796}
797
798.demo-hover-avatar-fallback:first-child {
799 margin-left: 0;
800}
801
802@keyframes demo-popover-in {
803 from {
804 opacity: 0;
805 transform: translateY(-4px);
806 }
807
808 to {
809 opacity: 1;
810 transform: translateY(0);
811 }
812}
813
814.demo-popover {
815 position: absolute;
816 width: 300px;
817 background: var(--bg-card);
818 border: 1px solid var(--border);
819 border-radius: 12px;
820 padding: 0;
821 box-shadow: var(--shadow-lg);
822 display: flex;
823 flex-direction: column;
824 z-index: 200;
825 font-family: inherit;
826 color: var(--text-primary);
827 opacity: 0;
828 animation: demo-popover-in 0.15s forwards;
829 max-height: 400px;
830 overflow: hidden;
831}
832
833.demo-popover-header {
834 padding: 10px 14px;
835 border-bottom: 1px solid var(--border);
836 display: flex;
837 justify-content: space-between;
838 align-items: center;
839 background: var(--bg-primary);
840 border-radius: 12px 12px 0 0;
841 font-weight: 500;
842 font-size: 11px;
843 color: var(--text-tertiary);
844 text-transform: uppercase;
845 letter-spacing: 0.5px;
846}
847
848.demo-popover-close {
849 background: none;
850 border: none;
851 color: var(--text-tertiary);
852 cursor: pointer;
853 padding: 2px;
854 font-size: 16px;
855 line-height: 1;
856 opacity: 0.6;
857 transition: opacity 0.15s;
858}
859
860.demo-popover-close:hover {
861 opacity: 1;
862}
863
864.demo-popover-scroll-area {
865 overflow-y: auto;
866 max-height: 340px;
867}
868
869.demo-comment-item {
870 padding: 12px 14px;
871 border-bottom: 1px solid var(--border);
872}
873
874.demo-comment-item:last-child {
875 border-bottom: none;
876}
877
878.demo-comment-header {
879 display: flex;
880 align-items: center;
881 gap: 8px;
882 margin-bottom: 6px;
883}
884
885.demo-comment-avatar {
886 width: 22px;
887 height: 22px;
888 border-radius: 50%;
889 object-fit: cover;
890 background: var(--accent);
891}
892
893.demo-comment-handle {
894 font-size: 12px;
895 font-weight: 600;
896 color: var(--text-primary);
897}
898
899.demo-comment-text {
900 font-size: 13px;
901 line-height: 1.5;
902 color: var(--text-primary);
903 margin-bottom: 8px;
904}
905
906.demo-comment-actions {
907 display: flex;
908 gap: 8px;
909}
910
911.demo-comment-action-btn {
912 background: none;
913 border: none;
914 padding: 4px 8px;
915 color: var(--text-tertiary);
916 font-size: 11px;
917 cursor: pointer;
918 border-radius: 4px;
919 transition: all 0.15s;
920}
921
922.demo-comment-action-btn:hover {
923 background: var(--bg-hover);
924 color: var(--text-secondary);
925}