this repo has no description
1@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");
2
3*,
4*::before,
5*::after {
6 box-sizing: border-box;
7}
8
9* {
10 margin: 0;
11}
12
13html {
14 scroll-padding-top: 5rem;
15 -webkit-text-size-adjust: 100%;
16}
17
18html.sky-effects {
19 scroll-behavior: smooth;
20}
21
22body {
23 line-height: 1.6;
24 -webkit-font-smoothing: antialiased;
25 font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
26 color: #0e1428;
27 overflow-x: hidden;
28 position: relative;
29}
30
31img, svg {
32 display: block;
33 max-width: 100%;
34}
35
36button, [role="button"] {
37 cursor: pointer;
38}
39
40a {
41 color: #254a9e;
42 text-decoration: none;
43 transition: color 0.2s;
44}
45
46a:hover {
47 color: #0f2d52;
48}
49
50/* ================================
51 Sky Gradient Background
52 Soft pastel blue/lavender/peach
53 ================================ */
54
55.sky-bg {
56 background:
57 radial-gradient(
58 ellipse 120% 80% at 20% 10%,
59 rgba(180, 210, 255, 0.6) 0%,
60 transparent 50%
61 ),
62 radial-gradient(
63 ellipse 100% 60% at 80% 20%,
64 rgba(200, 180, 255, 0.4) 0%,
65 transparent 50%
66 ),
67 radial-gradient(
68 ellipse 80% 50% at 60% 80%,
69 rgba(180, 220, 255, 0.3) 0%,
70 transparent 50%
71 ),
72 linear-gradient(
73 180deg,
74 #e8f0fe 0%,
75 #dce6f8 8%,
76 #c9d8f5 18%,
77 #b8cff5 30%,
78 #a8c4f0 42%,
79 #c0d4f5 55%,
80 #d4e0f8 68%,
81 #e0e8fa 78%,
82 #ebe4f5 88%,
83 #f0e8f0 100%
84 );
85 min-height: 100vh;
86 position: relative;
87}
88
89/* ================================
90 Glass Cloud Shapes (decorative)
91 ================================ */
92
93/* Inset + overflow visible so clouds positioned past the viewport edge (e.g. left: -4%)
94 and their blur/stroke are not clipped; body overflow-x: hidden prevents horizontal scroll */
95.cloud-layer {
96 position: fixed;
97 top: -8vh;
98 left: -5vw;
99 width: calc(100% + 10vw);
100 height: calc(100vh + 16vh);
101 pointer-events: none;
102 z-index: 0;
103 overflow: visible;
104 isolation: isolate;
105}
106
107/* Mobile: fewer clouds + smaller layer (zoom avoids fighting per-SVG parallax transforms) */
108@media (max-width: 768px) {
109 .cloud-layer {
110 zoom: 0.52;
111 }
112
113 .cloud-layer svg.cloud-svg--hide-sm {
114 display: none !important;
115 }
116
117 .cloud-layer svg.cloud-svg {
118 filter: drop-shadow(0 0 0.5px rgba(120, 200, 255, 0.35));
119 }
120}
121
122@media (max-width: 480px) {
123 .cloud-layer {
124 zoom: 0.42;
125 }
126}
127
128.cloud-layer svg.cloud-svg {
129 position: absolute;
130 display: block;
131 overflow: visible;
132 /* Avoid will-change: transform — it worsens backdrop/compositing seams when transforms update every frame */
133 backface-visibility: hidden;
134 transition: filter 0.8s ease;
135 /* Smoother curves when scaled (max-width: 100% on svg) + softer silhouette */
136 shape-rendering: geometricPrecision;
137 filter: drop-shadow(0 0 0.65px rgba(120, 200, 255, 0.45));
138}
139
140/* ================================
141 Sun Glow / Rays (behind clouds)
142 ================================ */
143
144#sun-glow,
145#sun-rays {
146 position: fixed;
147 top: 0;
148 left: 0;
149 width: 100%;
150 height: 100%;
151 pointer-events: none;
152 z-index: 0;
153}
154
155/* Sky “static” mode is handled in JS (p=0, no cloud parallax) — clouds stay visible */
156
157.nav-sky-switch-label {
158 display: flex;
159 align-items: center;
160 gap: 0.4rem;
161 cursor: pointer;
162 user-select: none;
163 margin: 0;
164 padding: 0;
165 font-family: "IBM Plex Mono", ui-monospace, monospace;
166 font-size: 0.65rem;
167 font-weight: 500;
168 letter-spacing: 0.04em;
169 text-transform: uppercase;
170 color: rgba(18, 26, 47, 0.55);
171}
172
173.nav-sky-switch-text {
174 line-height: 1;
175}
176
177.nav-sky-switch {
178 position: relative;
179 display: inline-block;
180 width: 34px;
181 height: 18px;
182 flex-shrink: 0;
183}
184
185.nav-sky-switch-input {
186 position: absolute;
187 opacity: 0;
188 width: 0;
189 height: 0;
190 margin: 0;
191}
192
193.nav-sky-switch-track {
194 position: absolute;
195 inset: 0;
196 border-radius: 100px;
197 background: rgba(18, 26, 47, 0.14);
198 transition: background 0.2s ease;
199 cursor: pointer;
200 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
201}
202
203.nav-sky-switch-input:focus-visible + .nav-sky-switch-track {
204 outline: 2px solid rgba(42, 90, 168, 0.45);
205 outline-offset: 2px;
206}
207
208.nav-sky-switch-input:checked + .nav-sky-switch-track {
209 background: rgba(42, 90, 168, 0.42);
210}
211
212.nav-sky-switch-track::after {
213 content: "";
214 position: absolute;
215 width: 14px;
216 height: 14px;
217 left: 2px;
218 top: 2px;
219 border-radius: 50%;
220 background: #fff;
221 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
222 transition: transform 0.2s ease;
223}
224
225.nav-sky-switch-input:checked + .nav-sky-switch-track::after {
226 transform: translateX(16px);
227}
228
229@media (max-width: 480px) {
230 .nav-sky-switch-label {
231 font-size: 0.6rem;
232 gap: 0.3rem;
233 }
234}
235
236/* ================================
237 Typography
238 ================================ */
239
240.font-mono {
241 font-family: "IBM Plex Mono", ui-monospace, monospace;
242}
243
244h1, h2, h3, h4 {
245 font-family: "IBM Plex Mono", ui-monospace, monospace;
246 font-weight: 600;
247 line-height: 1.2;
248 color: #0e1428;
249}
250
251.text-hero {
252 font-size: clamp(2.5rem, 5.5vw, 4.5rem);
253 letter-spacing: -0.03em;
254 line-height: 1.1;
255}
256
257.text-section {
258 font-size: clamp(1.6rem, 3.5vw, 2.5rem);
259 letter-spacing: -0.02em;
260}
261
262.text-subsection {
263 font-size: clamp(1.2rem, 2.5vw, 1.5rem);
264}
265
266.text-body {
267 font-size: clamp(1rem, 1.8vw, 1.15rem);
268 color: rgba(18, 26, 47, 0.93);
269 line-height: 1.75;
270}
271
272.text-body-sm {
273 font-size: clamp(0.875rem, 1.5vw, 1rem);
274 color: rgba(18, 26, 47, 0.78);
275 line-height: 1.65;
276}
277
278.text-accent {
279 color: #254a9e;
280}
281
282.text-center {
283 text-align: center;
284}
285
286/* ================================
287 Navigation
288 ================================ */
289
290:root {
291 /* Height of fixed .nav row — keeps .nav-effects-bar aligned below it */
292 --nav-bar-height: 4.5rem;
293 --nav-effects-strip: 2rem;
294}
295
296.nav {
297 position: fixed;
298 top: 0;
299 left: 0;
300 right: 0;
301 z-index: 101;
302 padding: 1rem 1.5rem;
303 display: flex;
304 align-items: center;
305 justify-content: space-between;
306 gap: 0.75rem;
307 min-width: 0;
308 /* Reserve border so .scrolled doesn’t flash a dark seam during backdrop compositing */
309 border-bottom: 1px solid transparent;
310 transition:
311 background 0.3s ease,
312 border-color 0.3s ease,
313 box-shadow 0.3s ease;
314 backface-visibility: hidden;
315}
316
317.nav.scrolled {
318 background: rgba(255, 255, 255, 0.55);
319 backdrop-filter: blur(20px);
320 -webkit-backdrop-filter: blur(20px);
321 border-bottom-color: rgba(255, 255, 255, 0.65);
322 /* Avoid dark drop shadow — it reads as a black hairline while the bar eases in */
323 box-shadow: 0 12px 40px rgba(14, 20, 40, 0.05);
324}
325
326/* Effects toggle: own fixed strip under the nav (not inside nav glass) */
327.nav-effects-bar {
328 position: fixed;
329 top: var(--nav-bar-height);
330 left: 0;
331 right: 0;
332 z-index: 100;
333 padding: 0.35rem 1.5rem 0.55rem;
334 display: flex;
335 justify-content: flex-end;
336 align-items: center;
337 min-height: 1.75rem;
338 background: transparent;
339 pointer-events: none;
340}
341
342.nav-effects-bar .nav-sky-switch-label {
343 pointer-events: auto;
344}
345
346/* Mobile: no sky effects toggle — JS keeps static sky; strip height removed for hero padding */
347@media (max-width: 768px) {
348 .nav-effects-bar {
349 display: none;
350 }
351
352 :root {
353 --nav-effects-strip: 0;
354 }
355}
356
357@media (max-width: 480px) {
358 :root {
359 --nav-bar-height: 4.35rem;
360 }
361}
362
363.nav-logo {
364 display: flex;
365 align-items: center;
366 gap: 0.5rem;
367 text-decoration: none;
368 color: #0e1428;
369}
370
371.nav-logo img {
372 width: 26px;
373 height: 26px;
374 filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(1500%)
375 hue-rotate(195deg) brightness(95%);
376}
377
378.nav-logo-text {
379 font-family: "IBM Plex Mono", monospace;
380 font-weight: 600;
381 font-size: 0.9rem;
382 letter-spacing: -0.02em;
383}
384
385.nav-links {
386 display: flex;
387 align-items: center;
388 gap: 0.75rem;
389 flex-shrink: 0;
390}
391
392.nav-btn {
393 padding: 0.5rem 1.25rem;
394 border-radius: 100px;
395 font-family: "IBM Plex Mono", monospace;
396 font-size: 0.85rem;
397 font-weight: 500;
398 text-decoration: none;
399 transition: all 0.25s;
400 border: none;
401}
402
403.nav-btn-ghost {
404 color: rgba(18, 26, 47, 0.88);
405 background: transparent;
406}
407
408.nav-btn-ghost:hover {
409 color: #0e1428;
410 background: rgba(255, 255, 255, 0.45);
411}
412
413.nav-btn-glass {
414 color: #0e1428;
415 background: rgba(255, 255, 255, 0.58);
416 backdrop-filter: blur(12px);
417 -webkit-backdrop-filter: blur(12px);
418 border: 1px solid rgba(255, 255, 255, 0.72);
419 backface-visibility: hidden;
420}
421
422.nav-btn-glass:hover {
423 background: rgba(255, 255, 255, 0.78);
424 color: #0e1428;
425}
426
427.nav-coming-soon {
428 cursor: default;
429 opacity: 0.55;
430 position: relative;
431}
432
433.nav-coming-soon:hover::after {
434 content: "Coming soon";
435 position: absolute;
436 top: calc(100% + 6px);
437 left: 50%;
438 transform: translateX(-50%);
439 padding: 0.3rem 0.7rem;
440 font-size: 0.7rem;
441 font-weight: 500;
442 white-space: nowrap;
443 color: #fff;
444 background: #0e1428;
445 border-radius: 6px;
446 pointer-events: none;
447}
448
449.footer-coming-soon {
450 cursor: default;
451 opacity: 0.45;
452 position: relative;
453}
454
455.footer-coming-soon:hover::after {
456 content: "Coming soon";
457 position: absolute;
458 bottom: calc(100% + 6px);
459 left: 50%;
460 transform: translateX(-50%);
461 padding: 0.3rem 0.7rem;
462 font-size: 0.7rem;
463 font-weight: 500;
464 white-space: nowrap;
465 color: #fff;
466 background: #0e1428;
467 border-radius: 6px;
468 pointer-events: none;
469}
470
471/* ================================
472 Glass Card
473 ================================ */
474
475.glass {
476 background: rgba(255, 255, 255, 0.44);
477 backdrop-filter: blur(24px);
478 -webkit-backdrop-filter: blur(24px);
479 border: 1px solid rgba(255, 255, 255, 0.68);
480 border-radius: 24px;
481 box-shadow:
482 0 8px 32px rgba(0, 0, 0, 0.06),
483 inset 0 1px 0 rgba(255, 255, 255, 0.72);
484 backface-visibility: hidden;
485}
486
487.glass-strong {
488 background: rgba(255, 255, 255, 0.56);
489 backdrop-filter: blur(32px);
490 -webkit-backdrop-filter: blur(32px);
491 border: 1px solid rgba(255, 255, 255, 0.76);
492 border-radius: 24px;
493 box-shadow:
494 0 8px 32px rgba(0, 0, 0, 0.07),
495 inset 0 1px 0 rgba(255, 255, 255, 0.78);
496 backface-visibility: hidden;
497}
498
499.glass-subtle {
500 background: rgba(255, 255, 255, 0.34);
501 backdrop-filter: blur(16px);
502 -webkit-backdrop-filter: blur(16px);
503 border: 1px solid rgba(255, 255, 255, 0.52);
504 border-radius: 20px;
505 box-shadow:
506 0 4px 16px rgba(0, 0, 0, 0.045),
507 inset 0 1px 0 rgba(255, 255, 255, 0.58);
508 backface-visibility: hidden;
509}
510
511/* ================================
512 Content Layer (above clouds)
513 ================================ */
514
515.content-layer {
516 position: relative;
517 z-index: 1;
518}
519
520/* ================================
521 Layout
522 ================================ */
523
524.container {
525 max-width: 1200px;
526 margin: 0 auto;
527 padding: 0 1.5rem;
528}
529
530.container-narrow {
531 max-width: 800px;
532 margin: 0 auto;
533 padding: 0 1.5rem;
534}
535
536/* ================================
537 Page Loading Skeleton
538 ================================ */
539
540.page-skeleton {
541 position: fixed;
542 inset: 0;
543 z-index: 1000;
544 display: none;
545 pointer-events: none;
546 background:
547 radial-gradient(
548 ellipse 120% 80% at 20% 10%,
549 rgba(180, 210, 255, 0.48) 0%,
550 transparent 50%
551 ),
552 radial-gradient(
553 ellipse 100% 60% at 80% 20%,
554 rgba(200, 180, 255, 0.32) 0%,
555 transparent 50%
556 ),
557 linear-gradient(180deg, #e8f0fe 0%, #dce6f8 48%, #ebe4f5 100%);
558}
559
560.page-skeleton--visible {
561 display: block;
562}
563
564.page-skeleton-nav {
565 position: fixed;
566 top: 0;
567 left: 0;
568 right: 0;
569 z-index: 1;
570 min-height: var(--nav-bar-height);
571 padding: 1rem 1.5rem;
572 display: flex;
573 justify-content: space-between;
574 align-items: center;
575 background: rgba(255, 255, 255, 0.48);
576 border-bottom: 1px solid rgba(255, 255, 255, 0.55);
577 backdrop-filter: blur(20px);
578 -webkit-backdrop-filter: blur(20px);
579}
580
581.page-skeleton-main {
582 width: min(100%, 960px);
583 margin: 0 auto;
584 padding: calc(var(--nav-bar-height) + 3rem) 1.5rem 3rem;
585}
586
587.page-skeleton-logo,
588.page-skeleton-pill,
589.page-skeleton-avatar,
590.page-skeleton-card,
591.page-skeleton-block {
592 display: block;
593 border-radius: 999px;
594 background: linear-gradient(
595 110deg,
596 rgba(255, 255, 255, 0.42) 8%,
597 rgba(255, 255, 255, 0.78) 18%,
598 rgba(255, 255, 255, 0.42) 33%
599 );
600 background-size: 220% 100%;
601 animation: page-skeleton-shimmer 1.15s linear infinite;
602 border: 1px solid rgba(255, 255, 255, 0.46);
603}
604
605.page-skeleton-logo {
606 width: 180px;
607 height: 2.2rem;
608}
609
610.page-skeleton-pill {
611 width: 110px;
612 height: 2.35rem;
613}
614
615.page-skeleton-card {
616 border-radius: 24px;
617 min-height: 160px;
618 box-shadow: 0 18px 50px rgba(20, 34, 70, 0.08);
619}
620
621.page-skeleton-card--hero {
622 min-height: 280px;
623 padding: 2rem;
624 margin-bottom: 1rem;
625}
626
627.page-skeleton-hero-split {
628 min-height: 460px;
629 display: grid;
630 grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
631 align-items: center;
632 gap: 2rem;
633 padding: 2rem 0;
634}
635
636.page-skeleton-main--home {
637 width: min(100%, 1120px);
638 padding-top: calc(var(--nav-bar-height) + 2rem);
639}
640
641.page-skeleton-main--profile,
642.page-skeleton-main--developer {
643 width: min(100%, 880px);
644}
645
646.page-skeleton-row {
647 display: flex;
648 flex-wrap: wrap;
649 gap: 0.75rem;
650 margin-top: 1.2rem;
651}
652
653.page-skeleton-grid {
654 display: grid;
655 grid-template-columns: repeat(3, minmax(0, 1fr));
656 gap: 1rem;
657}
658
659.page-skeleton-grid--feature {
660 grid-template-columns: repeat(3, minmax(0, 1fr));
661}
662
663.page-skeleton-grid--profiles {
664 grid-template-columns: repeat(3, minmax(0, 1fr));
665}
666
667.page-skeleton-grid--screenshots {
668 grid-template-columns: repeat(2, minmax(0, 1fr));
669 margin: 1rem 0;
670}
671
672.page-skeleton-grid--resources {
673 grid-template-columns: 1fr;
674 margin-top: 1rem;
675}
676
677.page-skeleton-block {
678 height: 1rem;
679 margin-bottom: 0.9rem;
680}
681
682.page-skeleton-block--eyebrow {
683 width: 9rem;
684 height: 0.85rem;
685}
686
687.page-skeleton-block--title {
688 width: min(60%, 360px);
689 height: 2.4rem;
690}
691
692.page-skeleton-block--wide {
693 width: min(86%, 620px);
694 height: 4.2rem;
695}
696
697.page-skeleton-block--body {
698 width: min(86%, 620px);
699}
700
701.page-skeleton-block--short {
702 width: min(48%, 340px);
703}
704
705.page-skeleton-block--button {
706 width: 9.5rem;
707 height: 2.6rem;
708 margin-bottom: 0;
709}
710
711.page-skeleton-block--button-secondary {
712 width: 8rem;
713}
714
715.page-skeleton-block--tab {
716 width: 8rem;
717 height: 2.1rem;
718 margin-bottom: 0;
719}
720
721.page-skeleton-block--badge {
722 width: min(70%, 360px);
723 height: 7rem;
724 margin: 1.5rem auto 1rem;
725 border-radius: 18px;
726}
727
728.page-skeleton-tabs {
729 display: flex;
730 flex-wrap: wrap;
731 gap: 0.6rem;
732 margin: 0 0 1rem;
733}
734
735.page-skeleton-card--cloud {
736 min-height: 300px;
737 border-radius: 48% 52% 46% 54%;
738}
739
740.page-skeleton-card--profile {
741 min-height: 210px;
742 position: relative;
743}
744
745.page-skeleton-card--profile::before {
746 content: "";
747 position: absolute;
748 top: 1.2rem;
749 left: 1.2rem;
750 width: 3.25rem;
751 height: 3.25rem;
752 border-radius: 18px;
753 background: rgba(255, 255, 255, 0.5);
754}
755
756.page-skeleton-card--screenshot {
757 min-height: 180px;
758}
759
760.page-skeleton-card--reviews {
761 min-height: 220px;
762}
763
764.page-skeleton-profile-card {
765 display: flex;
766 gap: 1.25rem;
767 align-items: center;
768 min-height: 220px;
769 padding: 1.5rem;
770}
771
772.page-skeleton-avatar {
773 width: 6rem;
774 height: 6rem;
775 border-radius: 28px;
776 flex: 0 0 auto;
777}
778
779.page-skeleton-profile-lines {
780 flex: 1;
781}
782
783.page-skeleton-card--resource {
784 min-height: 340px;
785 padding: 1.75rem;
786 text-align: center;
787}
788
789.page-skeleton-card--resource-small {
790 min-height: 140px;
791}
792
793@keyframes page-skeleton-shimmer {
794 to {
795 background-position-x: -220%;
796 }
797}
798
799@media (max-width: 720px) {
800 .page-skeleton-main {
801 padding-left: 1rem;
802 padding-right: 1rem;
803 }
804
805 .page-skeleton-hero-split {
806 min-height: 420px;
807 grid-template-columns: 1fr;
808 }
809
810 .page-skeleton-grid {
811 grid-template-columns: 1fr;
812 }
813
814 .page-skeleton-profile-card {
815 align-items: flex-start;
816 }
817
818 .page-skeleton-avatar {
819 width: 4.5rem;
820 height: 4.5rem;
821 }
822
823 .page-skeleton-card:nth-child(n+2) {
824 display: none;
825 }
826}
827
828.section {
829 padding: 3.5rem 0;
830}
831
832.section-sm {
833 padding: 2.5rem 0;
834}
835
836/* ================================
837 Hero
838 ================================ */
839
840.hero {
841 min-height: 100vh;
842 display: flex;
843 flex-direction: column;
844 align-items: center;
845 justify-content: center;
846 text-align: center;
847 position: relative;
848 /* Clear fixed nav + separate effects strip */
849 padding: calc(var(--nav-bar-height) + var(--nav-effects-strip) + 1rem) 1.5rem
850 4rem;
851}
852
853.hero-eyebrow {
854 font-size: clamp(0.75rem, 1.2vw, 0.875rem);
855 font-weight: 600;
856 letter-spacing: 0.12em;
857 text-transform: uppercase;
858 color: rgba(18, 26, 47, 0.68);
859 margin-bottom: 1rem;
860}
861
862.hero-subhead {
863 max-width: 580px;
864 margin: 1.5rem auto 0;
865}
866
867.scroll-indicator {
868 position: absolute;
869 bottom: 2rem;
870 left: 50%;
871 transform: translateX(-50%);
872 animation: bounce 2s infinite;
873 opacity: 0.62;
874 color: #0e1428;
875}
876
877/* Sit above mobile browser bottom chrome (e.g. Safari address bar tools) */
878@media (max-width: 768px) {
879 .scroll-indicator {
880 bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
881 }
882}
883
884@keyframes bounce {
885 0%, 20%, 50%, 80%, 100% {
886 transform: translateX(-50%) translateY(0);
887 }
888 40% {
889 transform: translateX(-50%) translateY(-10px);
890 }
891 60% {
892 transform: translateX(-50%) translateY(-5px);
893 }
894}
895
896/* ================================
897 Lottie Section
898 ================================ */
899
900.lottie-section {
901 display: flex;
902 justify-content: center;
903 padding: 0 0 0.5rem;
904}
905
906.lottie-wrapper {
907 position: relative;
908 width: min(600px, 85vw);
909 aspect-ratio: 16 / 9;
910}
911
912.lottie-logo-overlay {
913 position: absolute;
914 top: 50%;
915 left: 50%;
916 transform: translate(-50%, -50%);
917 width: 72px;
918 height: 72px;
919 z-index: 2;
920 filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(1500%)
921 hue-rotate(195deg) brightness(95%);
922}
923
924/* ================================
925 Feature Grid
926 ================================ */
927
928.feature-grid {
929 display: grid;
930 grid-template-columns: repeat(2, 1fr);
931 gap: 1.25rem;
932 margin-top: 2rem;
933}
934
935@media (max-width: 640px) {
936 .feature-grid {
937 grid-template-columns: 1fr;
938 }
939}
940
941/* Your account, your choice — three tiles in one row */
942.your-choice-grid {
943 display: grid;
944 grid-template-columns: repeat(3, minmax(0, 1fr));
945 gap: 1.25rem;
946 margin-top: 2rem;
947 align-items: stretch;
948}
949
950@media (max-width: 900px) {
951 .your-choice-grid {
952 grid-template-columns: 1fr;
953 }
954}
955
956.feature-card {
957 padding: 2rem;
958 transition: transform 0.3s ease, box-shadow 0.3s ease;
959}
960
961.feature-card:hover {
962 transform: translateY(-4px);
963 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
964}
965
966/* Icon + title on one row — vertically center title with icon */
967.feature-card-title-row {
968 display: flex;
969 flex-direction: row;
970 align-items: center;
971 gap: 0.65rem;
972 margin-bottom: 0.75rem;
973}
974
975.feature-card-title-row .text-subsection {
976 margin: 0;
977 flex: 1;
978 min-width: 0;
979}
980
981.feature-icon {
982 width: 2.25rem;
983 height: 2.25rem;
984 min-width: 2.25rem;
985 border-radius: 10px;
986 background: rgba(42, 90, 168, 0.1);
987 display: flex;
988 align-items: center;
989 justify-content: center;
990 color: #254a9e;
991 flex-shrink: 0;
992}
993
994/* ================================
995 One Place / Hub Visual
996 ================================ */
997
998.hub-visual {
999 display: flex;
1000 flex-wrap: wrap;
1001 justify-content: center;
1002 gap: 0.75rem;
1003 margin-top: 0.75rem;
1004}
1005
1006.hub-examples-label {
1007 max-width: 34rem;
1008 margin-left: auto;
1009 margin-right: auto;
1010 font-style: italic;
1011 color: rgba(18, 26, 47, 0.74);
1012}
1013
1014.hub-tag {
1015 padding: 0.5rem 1.25rem;
1016 border-radius: 100px;
1017 font-size: 0.9rem;
1018 font-family: "IBM Plex Mono", monospace;
1019 font-weight: 500;
1020 background: rgba(42, 90, 168, 0.1);
1021 border: 1px solid rgba(42, 90, 168, 0.22);
1022 color: #1f4f96;
1023 transition: background 0.3s;
1024}
1025
1026.hub-tag:hover {
1027 background: rgba(42, 90, 168, 0.18);
1028}
1029
1030.hub-tag-more {
1031 font-style: italic;
1032 font-weight: 400;
1033 background: transparent;
1034 border-style: dashed;
1035 color: rgba(18, 26, 47, 0.68);
1036}
1037
1038.hub-tag-more:hover {
1039 background: rgba(59, 111, 194, 0.06);
1040}
1041
1042/* ================================
1043 Pillars
1044 ================================ */
1045
1046.pillars-grid {
1047 display: grid;
1048 grid-template-columns: repeat(3, 1fr);
1049 gap: 1.25rem;
1050 margin-top: 2rem;
1051}
1052
1053@media (max-width: 768px) {
1054 .pillars-grid {
1055 grid-template-columns: 1fr;
1056 }
1057}
1058
1059.pillar-card {
1060 padding: 2.5rem 2rem;
1061 text-align: center;
1062 transition: transform 0.3s ease;
1063}
1064
1065.pillar-card:hover {
1066 transform: translateY(-4px);
1067}
1068
1069.pillar-number {
1070 display: inline-flex;
1071 align-items: center;
1072 justify-content: center;
1073 width: 48px;
1074 height: 48px;
1075 border-radius: 50%;
1076 background: rgba(42, 90, 168, 0.12);
1077 color: #254a9e;
1078 font-family: "IBM Plex Mono", monospace;
1079 font-weight: 700;
1080 font-size: 1.25rem;
1081 margin-bottom: 1.25rem;
1082}
1083
1084/* ================================
1085 Cross-Pollination / Flow Diagram
1086 ================================ */
1087
1088.flow-diagram {
1089 display: grid;
1090 grid-template-columns: 1fr auto 1fr;
1091 gap: 0;
1092 align-items: start;
1093 margin-top: 2.5rem;
1094 position: relative;
1095}
1096
1097.flow-column {
1098 display: flex;
1099 flex-direction: column;
1100 gap: 0.6rem;
1101}
1102
1103.flow-column-label {
1104 font-size: 0.75rem;
1105 font-weight: 600;
1106 text-transform: uppercase;
1107 letter-spacing: 0.08em;
1108 color: rgba(18, 26, 47, 0.68);
1109 margin-bottom: 0.25rem;
1110 padding: 0 1rem;
1111}
1112
1113.flow-column-left {
1114 align-items: flex-end;
1115}
1116.flow-column-left .flow-column-label {
1117 text-align: right;
1118}
1119.flow-column-right {
1120 align-items: flex-start;
1121}
1122
1123.flow-node {
1124 padding: 0.6rem 1.25rem;
1125 border-radius: 100px;
1126 font-family: "IBM Plex Mono", monospace;
1127 font-size: 0.85rem;
1128 font-weight: 500;
1129 white-space: nowrap;
1130 animation: flowFadeIn 0.5s ease both;
1131}
1132
1133.flow-node-open {
1134 border-style: dashed;
1135 font-style: italic;
1136 color: rgba(18, 26, 47, 0.66);
1137}
1138
1139@keyframes flowFadeIn {
1140 from {
1141 opacity: 0;
1142 transform: translateX(0);
1143 }
1144 to {
1145 opacity: 1;
1146 transform: translateX(0);
1147 }
1148}
1149
1150.flow-node-left {
1151 animation-name: flowSlideLeft;
1152}
1153
1154.flow-node-right {
1155 animation-name: flowSlideRight;
1156}
1157
1158@keyframes flowSlideLeft {
1159 from {
1160 opacity: 0;
1161 transform: translateX(20px);
1162 }
1163 to {
1164 opacity: 1;
1165 transform: translateX(0);
1166 }
1167}
1168
1169@keyframes flowSlideRight {
1170 from {
1171 opacity: 0;
1172 transform: translateX(-20px);
1173 }
1174 to {
1175 opacity: 1;
1176 transform: translateX(0);
1177 }
1178}
1179
1180/* Center hub */
1181
1182.flow-center {
1183 display: flex;
1184 flex-direction: column;
1185 align-items: center;
1186 justify-content: center;
1187 position: relative;
1188 padding: 0 2rem;
1189 min-height: 100%;
1190}
1191
1192.flow-hub {
1193 display: flex;
1194 flex-direction: column;
1195 align-items: center;
1196 justify-content: center;
1197 gap: 0.5rem;
1198 padding: 1.5rem 1.25rem;
1199 border-radius: 20px;
1200 position: relative;
1201 z-index: 2;
1202 color: #254a9e;
1203 text-align: center;
1204}
1205
1206.flow-hub-logo {
1207 filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(1500%)
1208 hue-rotate(195deg) brightness(95%);
1209}
1210
1211.flow-hub-label {
1212 font-size: 0.7rem;
1213 font-weight: 600;
1214 letter-spacing: 0.03em;
1215 max-width: 7rem;
1216 line-height: 1.3;
1217}
1218
1219/* Animated connection lines */
1220
1221.flow-lines {
1222 position: absolute;
1223 top: 0;
1224 bottom: 0;
1225 width: 2rem;
1226 display: flex;
1227 flex-direction: column;
1228 justify-content: space-around;
1229 z-index: 1;
1230}
1231
1232.flow-lines-left {
1233 right: 100%;
1234 margin-right: -0.5rem;
1235}
1236.flow-lines-right {
1237 left: 100%;
1238 margin-left: -0.5rem;
1239}
1240
1241.flow-line {
1242 height: 2px;
1243 width: 100%;
1244 background: linear-gradient(
1245 90deg,
1246 rgba(42, 90, 168, 0.14),
1247 rgba(42, 90, 168, 0.45),
1248 rgba(42, 90, 168, 0.14)
1249 );
1250 border-radius: 1px;
1251 animation: flowPulse 2.4s ease-in-out infinite;
1252}
1253
1254.flow-lines-right .flow-line {
1255 animation-direction: reverse;
1256}
1257
1258@keyframes flowPulse {
1259 0%, 100% {
1260 opacity: 0.42;
1261 transform: scaleX(0.6);
1262 }
1263 50% {
1264 opacity: 1;
1265 transform: scaleX(1);
1266 }
1267}
1268
1269/* Mobile: hub on top, two columns of pills (shorter than a single tall stack) */
1270
1271@media (max-width: 640px) {
1272 .flow-diagram {
1273 grid-template-columns: 1fr 1fr;
1274 grid-template-rows: auto auto;
1275 gap: 0.65rem 0.5rem;
1276 align-items: start;
1277 margin-top: 1.75rem;
1278 }
1279
1280 /* Hub spans full width, first row */
1281 .flow-center {
1282 grid-column: 1 / -1;
1283 grid-row: 1;
1284 padding: 0.35rem 0 0.25rem;
1285 min-height: 0;
1286 }
1287
1288 .flow-column-left {
1289 grid-column: 1;
1290 grid-row: 2;
1291 align-items: center;
1292 }
1293
1294 .flow-column-right {
1295 grid-column: 2;
1296 grid-row: 2;
1297 align-items: center;
1298 }
1299
1300 .flow-column-left .flow-column-label,
1301 .flow-column-right .flow-column-label {
1302 text-align: center;
1303 padding: 0 0.35rem;
1304 font-size: 0.68rem;
1305 margin-bottom: 0.15rem;
1306 }
1307
1308 .flow-column {
1309 gap: 0.35rem;
1310 }
1311
1312 /* Drop last two examples per side — keeps the diagram short */
1313 .flow-column-left .flow-node:nth-last-child(-n+2),
1314 .flow-column-right .flow-node:nth-last-child(-n+2) {
1315 display: none !important;
1316 }
1317
1318 .flow-node {
1319 padding: 0.42rem 0.65rem;
1320 font-size: 0.72rem;
1321 white-space: normal;
1322 text-align: center;
1323 max-width: 100%;
1324 line-height: 1.25;
1325 }
1326
1327 .flow-hub {
1328 padding: 1rem 0.85rem;
1329 gap: 0.35rem;
1330 border-radius: 16px;
1331 }
1332
1333 .flow-hub-logo {
1334 width: 30px;
1335 height: 30px;
1336 }
1337
1338 .flow-hub-label {
1339 font-size: 0.62rem;
1340 max-width: 9rem;
1341 }
1342
1343 .flow-lines {
1344 display: none;
1345 }
1346}
1347
1348/* ================================
1349 App Showcase (Explore page)
1350 ================================ */
1351
1352.app-grid {
1353 display: grid;
1354 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
1355 gap: 1rem;
1356 margin-top: 2.5rem;
1357}
1358
1359.app-card {
1360 padding: 1.5rem 1.25rem;
1361 text-align: center;
1362 transition: transform 0.3s ease, box-shadow 0.3s ease;
1363 border-radius: 20px;
1364}
1365
1366.app-card:hover {
1367 transform: translateY(-3px);
1368 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
1369}
1370
1371.app-card-name {
1372 font-family: "IBM Plex Mono", monospace;
1373 font-weight: 600;
1374 font-size: 0.95rem;
1375 margin-bottom: 0.25rem;
1376 color: #0e1428;
1377}
1378
1379.app-card-category {
1380 font-size: 0.8rem;
1381 color: rgba(18, 26, 47, 0.68);
1382 text-transform: uppercase;
1383 letter-spacing: 0.05em;
1384}
1385
1386/* ================================
1387 Sign-In Badge Section
1388 ================================ */
1389
1390.badge-display {
1391 display: flex;
1392 justify-content: center;
1393 margin: 2rem 0;
1394}
1395
1396.badge-display img, .badge-display svg {
1397 max-width: 360px;
1398 width: 100%;
1399 height: auto;
1400 filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(1500%)
1401 hue-rotate(195deg) brightness(95%);
1402}
1403
1404.badge-downloads {
1405 display: flex;
1406 flex-wrap: wrap;
1407 justify-content: center;
1408 gap: 0.75rem;
1409 margin-top: 0.5rem;
1410}
1411
1412.badge-download-btn {
1413 display: inline-flex;
1414 align-items: center;
1415 justify-content: center;
1416 padding: 0.5rem 1.1rem;
1417 font-size: 0.8rem;
1418 font-weight: 500;
1419 color: #1f4f96;
1420 text-decoration: none;
1421 border-radius: 100px;
1422 border: 1px solid rgba(42, 90, 168, 0.28);
1423 background: rgba(42, 90, 168, 0.08);
1424 transition: background 0.2s, color 0.2s;
1425}
1426
1427.badge-download-btn:hover {
1428 background: rgba(42, 90, 168, 0.16);
1429 color: #153d78;
1430}
1431
1432/* ================================
1433 Provider Section
1434 ================================ */
1435
1436.provider-grid {
1437 display: grid;
1438 grid-template-columns: repeat(3, 1fr);
1439 gap: 1.25rem;
1440 margin-top: 2rem;
1441}
1442
1443@media (max-width: 768px) {
1444 .provider-grid {
1445 grid-template-columns: 1fr;
1446 }
1447}
1448
1449.provider-card {
1450 padding: 2rem;
1451 display: flex;
1452 flex-direction: column;
1453 gap: 0.75rem;
1454 position: relative;
1455 transition: transform 0.3s ease;
1456}
1457
1458.provider-card:hover {
1459 transform: translateY(-4px);
1460}
1461
1462.provider-card-badge {
1463 position: absolute;
1464 top: -0.65rem;
1465 left: 50%;
1466 transform: translateX(-50%);
1467 padding: 0.25rem 0.85rem;
1468 border-radius: 100px;
1469 font-size: 0.65rem;
1470 font-weight: 600;
1471 letter-spacing: 0.06em;
1472 text-transform: uppercase;
1473 background: #174a8c;
1474 border: 1px solid rgba(10, 35, 72, 0.45);
1475 color: #f4f8ff;
1476 white-space: nowrap;
1477 box-shadow: 0 1px 2px rgba(10, 24, 48, 0.12);
1478}
1479
1480.provider-logo-row {
1481 display: flex;
1482 align-items: center;
1483 gap: 0.6rem;
1484 color: #0e1428;
1485}
1486
1487.provider-name {
1488 font-size: 1rem;
1489 font-weight: 600;
1490}
1491
1492.provider-cta {
1493 display: inline-block;
1494 margin-top: auto;
1495 font-size: 0.8rem;
1496 font-weight: 500;
1497 color: #1f4f96;
1498 text-decoration: none;
1499 padding: 0.4rem 1rem;
1500 border-radius: 100px;
1501 border: 1px solid rgba(42, 90, 168, 0.28);
1502 background: rgba(42, 90, 168, 0.08);
1503 align-self: flex-start;
1504 transition: background 0.2s;
1505}
1506
1507.provider-cta:hover {
1508 background: rgba(42, 90, 168, 0.16);
1509 color: #153d78;
1510}
1511
1512.provider-bluesky-icon-link {
1513 display: inline-flex;
1514 align-items: center;
1515 justify-content: center;
1516 margin-left: 0.1rem;
1517 padding: 0.1rem;
1518 line-height: 1;
1519 vertical-align: middle;
1520 color: #1185fe;
1521 text-decoration: none;
1522 border-radius: 4px;
1523 transition: color 0.15s ease, opacity 0.15s ease;
1524}
1525
1526.provider-bluesky-icon-link:hover {
1527 color: #0c6fd4;
1528}
1529
1530.provider-bluesky-icon-link:focus-visible {
1531 outline: 2px solid rgba(17, 133, 254, 0.45);
1532 outline-offset: 2px;
1533}
1534
1535.provider-bluesky-icon {
1536 display: block;
1537 flex-shrink: 0;
1538 position: relative;
1539 top: 0.12em;
1540}
1541
1542/* ================================
1543 Moderation & Algorithms
1544 ================================ */
1545
1546.mod-algo-grid {
1547 display: grid;
1548 grid-template-columns: 1fr 1fr;
1549 gap: 1.5rem;
1550 margin-top: 2rem;
1551}
1552
1553@media (max-width: 700px) {
1554 .mod-algo-grid {
1555 grid-template-columns: 1fr;
1556 }
1557}
1558
1559.mod-algo-card {
1560 padding: 2rem;
1561 display: flex;
1562 flex-direction: column;
1563 gap: 0.5rem;
1564}
1565
1566.mod-algo-icon--inline {
1567 display: inline-flex;
1568 align-items: center;
1569 justify-content: center;
1570 flex-shrink: 0;
1571 margin: 0;
1572 margin-top: 0.1em;
1573 color: #1f4f96;
1574}
1575
1576.mod-algo-icon--inline svg {
1577 width: 22px;
1578 height: 22px;
1579 display: block;
1580}
1581
1582/* ================================
1583 Footer
1584 ================================ */
1585
1586.footer {
1587 padding: 3rem 0 1.5rem;
1588 border-top: 1px solid rgba(18, 26, 47, 0.12);
1589}
1590
1591.footer-links {
1592 display: flex;
1593 flex-wrap: wrap;
1594 justify-content: center;
1595 align-items: center;
1596 text-align: center;
1597 gap: 2rem;
1598 margin: 0 auto 2rem;
1599 /* Constrain so wrapping behaves predictably and the links visually
1600 * cluster directly beneath the centered logo on every viewport. */
1601 max-width: 36rem;
1602}
1603
1604.footer-quote {
1605 font-style: italic;
1606 color: rgba(18, 26, 47, 0.58);
1607 max-width: 600px;
1608 margin: 2rem auto 0;
1609 font-size: 0.9rem;
1610}
1611
1612a.back-to-top {
1613 display: inline-flex;
1614 align-items: center;
1615 gap: 0.4rem;
1616 margin-top: 2rem;
1617 padding: 0.5rem 1.1rem;
1618 font-family: inherit;
1619 font-size: 0.8rem;
1620 font-weight: 500;
1621 color: rgba(18, 26, 47, 0.46);
1622 text-decoration: none;
1623 background: none;
1624 border: 1px solid rgba(18, 26, 47, 0.12);
1625 border-radius: 100px;
1626 cursor: pointer;
1627 transition: color 0.2s, border-color 0.2s;
1628}
1629
1630a.back-to-top:hover {
1631 color: rgba(18, 26, 47, 0.76);
1632 border-color: rgba(18, 26, 47, 0.28);
1633}
1634
1635/* ================================
1636 Scroll Reveal
1637 ================================ */
1638
1639.reveal {
1640 opacity: 1;
1641 transform: none;
1642}
1643
1644.sky-effects .reveal {
1645 opacity: 0;
1646 transform: translateY(30px);
1647 transition: opacity 0.8s ease, transform 0.8s ease;
1648}
1649
1650.sky-effects .reveal.visible {
1651 opacity: 1;
1652 transform: translateY(0);
1653}
1654
1655/* ================================
1656 Divider
1657 ================================ */
1658
1659.divider {
1660 width: 60px;
1661 height: 3px;
1662 background: linear-gradient(90deg, #4a8ad4, #8a6fc4);
1663 border-radius: 2px;
1664 margin: 0.75rem auto;
1665}
1666
1667/* ================================
1668 Utility
1669 ================================ */
1670
1671.mb-1 {
1672 margin-bottom: 0.5rem;
1673}
1674.mb-2 {
1675 margin-bottom: 1rem;
1676}
1677.mb-3 {
1678 margin-bottom: 1.5rem;
1679}
1680.mb-4 {
1681 margin-bottom: 2rem;
1682}
1683.mt-2 {
1684 margin-top: 1rem;
1685}
1686.mt-3 {
1687 margin-top: 1.5rem;
1688}
1689.mt-4 {
1690 margin-top: 2rem;
1691}
1692.mx-auto {
1693 margin-left: auto;
1694 margin-right: auto;
1695}
1696.inline-block {
1697 display: inline-block;
1698}
1699.block {
1700 display: block;
1701}
1702.flex {
1703 display: flex;
1704}
1705.flex-col {
1706 flex-direction: column;
1707}
1708.items-center {
1709 align-items: center;
1710}
1711.justify-center {
1712 justify-content: center;
1713}
1714.gap-1 {
1715 gap: 0.5rem;
1716}
1717.gap-2 {
1718 gap: 1rem;
1719}
1720.gap-3 {
1721 gap: 1.5rem;
1722}
1723.w-full {
1724 width: 100%;
1725}
1726
1727/* ================================
1728 Dark Phase (sunset / night)
1729 ================================ */
1730
1731body {
1732 transition: color 0.6s ease;
1733}
1734
1735.dark-phase {
1736 color: rgba(255, 255, 255, 0.97);
1737}
1738
1739.dark-phase h1,
1740.dark-phase h2,
1741.dark-phase h3,
1742.dark-phase h4 {
1743 color: #fff;
1744}
1745
1746.dark-phase .text-body {
1747 color: rgba(255, 255, 255, 0.88);
1748}
1749
1750.dark-phase .text-body-sm {
1751 color: rgba(255, 255, 255, 0.76);
1752}
1753
1754.dark-phase a {
1755 color: #a8d4f8;
1756}
1757
1758.dark-phase a:hover {
1759 color: #d4ecfc;
1760}
1761
1762.dark-phase .glass {
1763 background: rgba(255, 255, 255, 0.09);
1764 border-color: rgba(255, 255, 255, 0.18);
1765}
1766
1767.dark-phase .glass-strong {
1768 background: rgba(255, 255, 255, 0.11);
1769 border-color: rgba(255, 255, 255, 0.2);
1770}
1771
1772.dark-phase .glass-subtle {
1773 background: rgba(255, 255, 255, 0.08);
1774 border-color: rgba(255, 255, 255, 0.15);
1775}
1776
1777.dark-phase .nav-logo {
1778 color: rgba(255, 255, 255, 0.94);
1779}
1780
1781.dark-phase .nav-logo img {
1782 filter: brightness(0) invert(1);
1783}
1784
1785.dark-phase .nav-btn-ghost {
1786 color: rgba(255, 255, 255, 0.88);
1787}
1788
1789.dark-phase .nav-btn-ghost:hover {
1790 color: #fff;
1791 background: rgba(255, 255, 255, 0.14);
1792}
1793
1794.dark-phase .nav-sky-switch-label {
1795 color: rgba(255, 255, 255, 0.55);
1796}
1797
1798.dark-phase .nav-sky-switch-track {
1799 background: rgba(255, 255, 255, 0.18);
1800 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
1801}
1802
1803.dark-phase .nav-sky-switch-input:checked + .nav-sky-switch-track {
1804 background: rgba(158, 200, 240, 0.35);
1805}
1806
1807.dark-phase .nav-sky-switch-track::after {
1808 background: rgba(255, 255, 255, 0.95);
1809}
1810
1811.dark-phase .nav-coming-soon:hover::after,
1812.dark-phase .footer-coming-soon:hover::after {
1813 background: rgba(255, 255, 255, 0.9);
1814 color: #0e1428;
1815}
1816
1817.dark-phase .nav-btn-glass {
1818 color: rgba(255, 255, 255, 0.98);
1819 background: rgba(255, 255, 255, 0.12);
1820 border-color: rgba(255, 255, 255, 0.22);
1821}
1822
1823.dark-phase .nav-btn-glass:hover {
1824 background: rgba(255, 255, 255, 0.2);
1825 color: #fff;
1826}
1827
1828.dark-phase .nav.scrolled {
1829 background: rgba(0, 0, 0, 0.32);
1830 border-bottom-color: rgba(255, 255, 255, 0.12);
1831}
1832
1833.dark-phase .scroll-indicator {
1834 color: rgba(255, 255, 255, 0.62);
1835}
1836
1837.dark-phase .hero-eyebrow {
1838 color: rgba(255, 255, 255, 0.68);
1839}
1840
1841.dark-phase .hub-tag {
1842 background: rgba(255, 255, 255, 0.1);
1843 border-color: rgba(255, 255, 255, 0.22);
1844 color: #a8d4f8;
1845}
1846
1847.dark-phase .hub-tag:hover {
1848 background: rgba(255, 255, 255, 0.18);
1849}
1850
1851.dark-phase .hub-examples-label {
1852 color: rgba(255, 255, 255, 0.74);
1853}
1854
1855.dark-phase .hub-tag-more {
1856 color: rgba(255, 255, 255, 0.64);
1857 border-color: rgba(255, 255, 255, 0.28);
1858}
1859
1860.dark-phase .hub-tag-more:hover {
1861 background: rgba(255, 255, 255, 0.06);
1862}
1863
1864.dark-phase .feature-icon {
1865 background: rgba(255, 255, 255, 0.1);
1866 color: #9ec8f0;
1867}
1868
1869.dark-phase .flow-column-label {
1870 color: rgba(255, 255, 255, 0.62);
1871}
1872
1873.dark-phase .flow-node-open {
1874 color: rgba(255, 255, 255, 0.62);
1875 border-color: rgba(255, 255, 255, 0.28);
1876}
1877
1878.dark-phase .flow-hub {
1879 color: #9ec8f0;
1880}
1881
1882.dark-phase .flow-hub-logo {
1883 filter: brightness(0) invert(1);
1884}
1885
1886.dark-phase .flow-line {
1887 background: linear-gradient(
1888 90deg,
1889 rgba(158, 200, 240, 0.1),
1890 rgba(158, 200, 240, 0.42),
1891 rgba(158, 200, 240, 0.1)
1892 );
1893}
1894
1895.dark-phase .pillar-number {
1896 background: rgba(255, 255, 255, 0.12);
1897 color: #9ec8f0;
1898}
1899
1900.dark-phase .provider-card-badge {
1901 background: #2a6ec4;
1902 border-color: rgba(180, 215, 255, 0.35);
1903 color: #f4f8ff;
1904 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
1905}
1906
1907.dark-phase .provider-logo-row {
1908 color: rgba(255, 255, 255, 0.98);
1909}
1910
1911.dark-phase .provider-cta {
1912 color: #9ec8f0;
1913 border-color: rgba(158, 200, 240, 0.32);
1914 background: rgba(158, 200, 240, 0.1);
1915}
1916
1917.dark-phase .provider-cta:hover {
1918 background: rgba(158, 200, 240, 0.22);
1919 color: #d0e8fa;
1920}
1921
1922.dark-phase .provider-bluesky-icon-link {
1923 color: #5eb0ff;
1924}
1925
1926.dark-phase .provider-bluesky-icon-link:hover {
1927 color: #8cc8ff;
1928}
1929
1930.dark-phase .provider-bluesky-icon-link:focus-visible {
1931 outline-color: rgba(142, 200, 255, 0.55);
1932}
1933
1934.dark-phase .mod-algo-icon--inline {
1935 color: #9ec8f0;
1936}
1937
1938.dark-phase .badge-display img,
1939.dark-phase .badge-display svg {
1940 filter: brightness(0) invert(1);
1941}
1942
1943.dark-phase .badge-download-btn {
1944 color: #9ec8f0;
1945 border-color: rgba(158, 200, 240, 0.32);
1946 background: rgba(158, 200, 240, 0.1);
1947}
1948
1949.dark-phase .badge-download-btn:hover {
1950 background: rgba(158, 200, 240, 0.2);
1951 color: #d0e8fa;
1952}
1953
1954.dark-phase .footer {
1955 border-top-color: rgba(255, 255, 255, 0.14);
1956}
1957
1958.dark-phase .footer-quote {
1959 color: rgba(255, 255, 255, 0.55);
1960}
1961
1962.dark-phase a.back-to-top {
1963 color: rgba(255, 255, 255, 0.42);
1964 border-color: rgba(255, 255, 255, 0.18);
1965}
1966
1967.dark-phase a.back-to-top:hover {
1968 color: rgba(255, 255, 255, 0.72);
1969 border-color: rgba(255, 255, 255, 0.34);
1970}
1971
1972.dark-phase .divider {
1973 background: linear-gradient(90deg, #6a9ec8, #9880c0);
1974}
1975
1976.dark-phase .footer-logo {
1977 filter: brightness(0) invert(1) !important;
1978}
1979
1980.dark-phase .lottie-logo-overlay {
1981 filter: brightness(0) invert(1) !important;
1982}
1983
1984/* ====================================================================
1985 Explore (registry) — pages, lists, profile cards, forms
1986 ==================================================================== */
1987
1988.text-eyebrow {
1989 font-family: "IBM Plex Mono", monospace;
1990 font-size: 0.85rem;
1991 letter-spacing: 0.06em;
1992 text-transform: uppercase;
1993 color: rgba(18, 26, 47, 0.62);
1994 margin: 0;
1995}
1996.dark-phase .text-eyebrow {
1997 color: rgba(255, 255, 255, 0.62);
1998}
1999
2000.visually-hidden {
2001 position: absolute;
2002 width: 1px;
2003 height: 1px;
2004 padding: 0;
2005 margin: -1px;
2006 overflow: hidden;
2007 clip: rect(0, 0, 0, 0);
2008 white-space: nowrap;
2009 border: 0;
2010}
2011
2012.inline-form {
2013 display: inline;
2014}
2015.text-link-button {
2016 background: none;
2017 border: 0;
2018 padding: 0;
2019 color: inherit;
2020 text-decoration: underline;
2021 cursor: pointer;
2022 font: inherit;
2023}
2024
2025.explore-hero {
2026 padding: 9rem 0 2.5rem;
2027 text-align: center;
2028}
2029.explore-hero-subhead {
2030 max-width: 640px;
2031 margin-left: auto;
2032 margin-right: auto;
2033}
2034.explore-hero-actions {
2035 display: flex;
2036 flex-wrap: wrap;
2037 justify-content: center;
2038 align-items: center;
2039 gap: 0.75rem;
2040 margin-top: 2rem;
2041}
2042.explore-search-form {
2043 display: flex;
2044 flex: 1 1 360px;
2045 max-width: 520px;
2046 background: rgba(255, 255, 255, 0.62);
2047 border: 1px solid rgba(255, 255, 255, 0.7);
2048 border-radius: 999px;
2049 padding: 0.35rem 0.35rem 0.35rem 1.25rem;
2050 align-items: center;
2051 box-shadow: 0 6px 24px rgba(48, 70, 128, 0.06);
2052}
2053.explore-search-input {
2054 flex: 1;
2055 border: 0;
2056 background: transparent;
2057 font: inherit;
2058 font-size: 1rem;
2059 outline: none;
2060 color: #0e1428;
2061}
2062.explore-search-submit {
2063 border: 0;
2064 border-radius: 999px;
2065 padding: 0.55rem 1.1rem;
2066 background: rgba(42, 90, 168, 0.92);
2067 color: #fff;
2068 font: inherit;
2069 font-weight: 500;
2070 cursor: pointer;
2071 transition: background 0.15s ease;
2072}
2073.explore-search-submit:hover {
2074 background: rgba(42, 90, 168, 1);
2075}
2076.dark-phase .explore-search-form {
2077 background: rgba(255, 255, 255, 0.12);
2078 border-color: rgba(255, 255, 255, 0.18);
2079}
2080.dark-phase .explore-search-input {
2081 color: #f0f4ff;
2082}
2083
2084.explore-cta-primary {
2085 display: inline-flex;
2086 align-items: center;
2087 padding: 0.7rem 1.4rem;
2088 border-radius: 999px;
2089 background: rgba(255, 255, 255, 0.78);
2090 border: 1px solid rgba(255, 255, 255, 0.7);
2091 color: #0e1428;
2092 text-decoration: none;
2093 font-weight: 500;
2094 transition: transform 0.15s ease, background 0.15s ease;
2095}
2096.explore-cta-primary:hover {
2097 background: rgba(255, 255, 255, 0.95);
2098 transform: translateY(-1px);
2099}
2100.dark-phase .explore-cta-primary {
2101 background: rgba(255, 255, 255, 0.14);
2102 border-color: rgba(255, 255, 255, 0.22);
2103 color: #f0f4ff;
2104}
2105.dark-phase .explore-cta-primary:hover {
2106 background: rgba(255, 255, 255, 0.22);
2107}
2108
2109.explore-controls {
2110 padding: 0.5rem 0 1.5rem;
2111}
2112.explore-category-tabs {
2113 display: flex;
2114 gap: 0.4rem;
2115 flex-wrap: wrap;
2116 justify-content: center;
2117}
2118.explore-category-tab {
2119 padding: 0.5rem 1.1rem;
2120 border-radius: 999px;
2121 background: rgba(255, 255, 255, 0.4);
2122 border: 1px solid rgba(255, 255, 255, 0.5);
2123 color: rgba(18, 26, 47, 0.78);
2124 text-decoration: none;
2125 font-size: 0.95rem;
2126 transition: background 0.15s ease, color 0.15s ease;
2127}
2128.explore-category-tab:hover {
2129 background: rgba(255, 255, 255, 0.65);
2130 color: #0e1428;
2131}
2132.explore-category-tab.is-active {
2133 background: #0e1428;
2134 color: #fff;
2135 border-color: #0e1428;
2136}
2137.dark-phase .explore-category-tab {
2138 background: rgba(255, 255, 255, 0.1);
2139 border-color: rgba(255, 255, 255, 0.16);
2140 color: rgba(255, 255, 255, 0.8);
2141}
2142.dark-phase .explore-category-tab.is-active {
2143 background: #f0f4ff;
2144 color: #0e1428;
2145 border-color: #f0f4ff;
2146}
2147
2148.explore-subchips {
2149 display: flex;
2150 gap: 0.4rem;
2151 flex-wrap: wrap;
2152 justify-content: center;
2153 margin-top: 1rem;
2154}
2155.explore-subchip {
2156 padding: 0.35rem 0.85rem;
2157 border-radius: 999px;
2158 background: rgba(255, 255, 255, 0.32);
2159 border: 1px solid rgba(255, 255, 255, 0.4);
2160 color: rgba(18, 26, 47, 0.7);
2161 text-decoration: none;
2162 font-size: 0.85rem;
2163}
2164.explore-subchip.is-active {
2165 background: rgba(42, 90, 168, 0.85);
2166 color: #fff;
2167 border-color: rgba(42, 90, 168, 0.85);
2168}
2169.dark-phase .explore-subchip {
2170 background: rgba(255, 255, 255, 0.08);
2171 color: rgba(255, 255, 255, 0.78);
2172 border-color: rgba(255, 255, 255, 0.14);
2173}
2174
2175.featured-rail {
2176 padding: 1.5rem 0 2rem;
2177}
2178.featured-rail-heading {
2179 margin-bottom: 1rem;
2180}
2181.featured-rail-track {
2182 display: grid;
2183 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
2184 gap: 1rem;
2185}
2186.featured-rail-item .profile-card {
2187 height: 100%;
2188}
2189
2190.profile-grid {
2191 display: grid;
2192 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
2193 gap: 1rem;
2194}
2195
2196.profile-card {
2197 display: flex;
2198 gap: 1rem;
2199 padding: 1.1rem;
2200 align-items: flex-start;
2201 text-decoration: none;
2202 color: inherit;
2203 transition: transform 0.15s ease, box-shadow 0.15s ease;
2204}
2205.profile-card:hover {
2206 transform: translateY(-2px);
2207 box-shadow: 0 12px 32px rgba(48, 70, 128, 0.12);
2208}
2209.profile-card-avatar {
2210 flex: 0 0 56px;
2211 width: 56px;
2212 height: 56px;
2213 border-radius: 14px;
2214 overflow: hidden;
2215 background: rgba(255, 255, 255, 0.6);
2216 display: flex;
2217 align-items: center;
2218 justify-content: center;
2219}
2220.profile-card-avatar img {
2221 width: 100%;
2222 height: 100%;
2223 object-fit: cover;
2224}
2225.profile-card-avatar-fallback {
2226 font-family: "IBM Plex Mono", monospace;
2227 font-size: 1.4rem;
2228 color: rgba(18, 26, 47, 0.7);
2229}
2230.profile-card-body {
2231 min-width: 0;
2232 flex: 1;
2233}
2234.profile-card-title-row {
2235 display: flex;
2236 align-items: center;
2237 gap: 0.5rem;
2238 flex-wrap: wrap;
2239}
2240.profile-card-name {
2241 font-size: 1.05rem;
2242 margin: 0;
2243 font-weight: 600;
2244 color: #0e1428;
2245}
2246.dark-phase .profile-card-name {
2247 color: #f0f4ff;
2248}
2249.profile-card-handle {
2250 margin: 0.05rem 0 0.4rem;
2251 font-family: "IBM Plex Mono", monospace;
2252 font-size: 0.8rem;
2253 color: rgba(18, 26, 47, 0.55);
2254}
2255.dark-phase .profile-card-handle {
2256 color: rgba(255, 255, 255, 0.55);
2257}
2258.profile-card-description {
2259 margin: 0;
2260 font-size: 0.92rem;
2261 line-height: 1.4;
2262 color: rgba(18, 26, 47, 0.78);
2263 display: -webkit-box;
2264 -webkit-line-clamp: 3;
2265 -webkit-box-orient: vertical;
2266 overflow: hidden;
2267}
2268.dark-phase .profile-card-description {
2269 color: rgba(255, 255, 255, 0.78);
2270}
2271.profile-card-meta {
2272 display: flex;
2273 flex-direction: column;
2274 align-items: flex-start;
2275 flex-wrap: wrap;
2276 gap: 0.4rem;
2277 margin: 0.6rem 0 0;
2278 font-size: 0.78rem;
2279}
2280.profile-card-category, .profile-card-sub {
2281 display: inline-flex;
2282 align-items: center;
2283 padding: 0.15rem 0.55rem;
2284 border-radius: 999px;
2285 background: rgba(255, 255, 255, 0.5);
2286 color: rgba(18, 26, 47, 0.78);
2287 border: 1px solid rgba(255, 255, 255, 0.5);
2288}
2289.profile-card-category {
2290 background: rgba(42, 90, 168, 0.12);
2291 border-color: rgba(42, 90, 168, 0.26);
2292 color: #254a9e;
2293 font-size: 0.76rem;
2294 font-weight: 700;
2295 letter-spacing: 0.04em;
2296 text-transform: uppercase;
2297}
2298.profile-card-categories {
2299 display: flex;
2300 flex-wrap: wrap;
2301 gap: 0.35rem;
2302}
2303.profile-card-subcategories {
2304 display: flex;
2305 flex-wrap: wrap;
2306 gap: 0.35rem;
2307}
2308.profile-card-sub {
2309 font-size: 0.76rem;
2310}
2311.dark-phase .profile-card-category, .dark-phase .profile-card-sub {
2312 background: rgba(255, 255, 255, 0.1);
2313 color: rgba(255, 255, 255, 0.85);
2314 border-color: rgba(255, 255, 255, 0.15);
2315}
2316.dark-phase .profile-card-category {
2317 background: rgba(106, 149, 255, 0.18);
2318 border-color: rgba(166, 191, 255, 0.24);
2319 color: #d8e4ff;
2320}
2321.profile-badge {
2322 display: inline-flex;
2323 align-items: center;
2324 font-size: 0.7rem;
2325 padding: 0.1rem 0.55rem;
2326 border-radius: 999px;
2327 font-weight: 600;
2328 letter-spacing: 0.02em;
2329}
2330.profile-badge--official {
2331 background: rgba(42, 90, 168, 0.92);
2332 color: #fff;
2333}
2334.profile-badge--verified {
2335 background: rgba(58, 158, 96, 0.85);
2336 color: #fff;
2337}
2338
2339/* Verified-project seal: shown next to the project name when an
2340 admin has cleared the project. Distinct from `.profile-badge--*`,
2341 which are curator-controlled featured rail labels. */
2342.profile-verified-badge {
2343 display: inline-flex;
2344 align-items: center;
2345 justify-content: center;
2346 color: #254a9e;
2347 flex-shrink: 0;
2348 line-height: 1;
2349}
2350.profile-verified-badge--inline {
2351 vertical-align: -0.15em;
2352}
2353.profile-verified-badge svg {
2354 display: block;
2355}
2356.profile-verified-badge:hover {
2357 color: #1f4f96;
2358}
2359
2360.explore-empty {
2361 text-align: center;
2362 padding: 3rem 1rem;
2363 border-radius: 18px;
2364}
2365
2366/* ---- Profile detail page ---- */
2367.explore-profile-detail {
2368 padding: 7rem 0 3rem;
2369}
2370.profile-hero {
2371 display: flex;
2372 gap: 1.5rem;
2373 align-items: flex-start;
2374 padding: 1.5rem;
2375 border-radius: 24px;
2376}
2377.profile-hero-media {
2378 flex: 0 0 120px;
2379 display: flex;
2380 flex-direction: column;
2381 align-items: center;
2382 gap: 0.75rem;
2383}
2384.profile-hero-avatar {
2385 width: 120px;
2386 height: 120px;
2387 border-radius: 22px;
2388 overflow: hidden;
2389 flex: 0 0 120px;
2390 background: rgba(255, 255, 255, 0.65);
2391 display: flex;
2392 align-items: center;
2393 justify-content: center;
2394}
2395.profile-hero-secondary-actions {
2396 display: flex;
2397 flex-wrap: wrap;
2398 justify-content: center;
2399 gap: 0.5rem;
2400 max-width: 120px;
2401}
2402.profile-hero-avatar img {
2403 width: 100%;
2404 height: 100%;
2405 object-fit: cover;
2406}
2407.profile-hero-avatar-fallback {
2408 font-family: "IBM Plex Mono", monospace;
2409 font-size: 2.5rem;
2410 color: rgba(18, 26, 47, 0.65);
2411}
2412.profile-hero-body {
2413 flex: 1;
2414 min-width: 240px;
2415}
2416.profile-hero-actions {
2417 align-self: stretch;
2418 border-left: 1px solid rgba(18, 26, 47, 0.12);
2419 padding-left: 1.25rem;
2420 min-width: 156px;
2421 display: flex;
2422 flex-direction: column;
2423 justify-content: center;
2424 gap: 0.65rem;
2425}
2426.profile-hero-action {
2427 display: flex;
2428 align-items: center;
2429 gap: 0.65rem;
2430 padding: 0.75rem 0.85rem;
2431 border-radius: 15px;
2432 background: rgba(255, 255, 255, 0.55);
2433 border: 1px solid rgba(255, 255, 255, 0.55);
2434 color: #0e1428;
2435 text-decoration: none;
2436 font-weight: 650;
2437 font-size: 0.92rem;
2438 transition:
2439 background 0.15s ease,
2440 border-color 0.15s ease,
2441 transform 0.15s ease;
2442}
2443.profile-hero-action:hover {
2444 background: rgba(255, 255, 255, 0.86);
2445 border-color: rgba(42, 90, 168, 0.2);
2446 transform: translateY(-1px);
2447}
2448.profile-hero-action-icon {
2449 width: 30px;
2450 height: 30px;
2451 border-radius: 9px;
2452 background: #ffffff;
2453 color: #254a9e;
2454 display: inline-flex;
2455 align-items: center;
2456 justify-content: center;
2457 flex-shrink: 0;
2458 padding: 5px;
2459 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
2460}
2461.profile-hero-action-icon-svg {
2462 width: 100%;
2463 height: 100%;
2464}
2465.profile-hero-action-arrow {
2466 margin-left: auto;
2467 color: rgba(42, 90, 168, 0.75);
2468 font-size: 0.92rem;
2469}
2470.dark-phase .profile-hero-actions {
2471 border-left-color: rgba(255, 255, 255, 0.14);
2472}
2473.dark-phase .profile-hero-action {
2474 background: rgba(255, 255, 255, 0.1);
2475 border-color: rgba(255, 255, 255, 0.16);
2476 color: #f0f4ff;
2477}
2478.dark-phase .profile-hero-action:hover {
2479 background: rgba(255, 255, 255, 0.16);
2480 border-color: rgba(255, 255, 255, 0.24);
2481}
2482.dark-phase .profile-hero-action-icon {
2483 background: rgba(255, 255, 255, 0.92);
2484}
2485.dark-phase .profile-hero-action-arrow {
2486 color: rgba(255, 255, 255, 0.72);
2487}
2488@media (max-width: 720px) {
2489 .profile-hero {
2490 flex-wrap: wrap;
2491 }
2492 .profile-hero-media {
2493 align-items: flex-start;
2494 }
2495 .profile-hero-secondary-actions {
2496 justify-content: flex-start;
2497 }
2498 .profile-hero-actions {
2499 width: 100%;
2500 border-left: 0;
2501 border-top: 1px solid rgba(18, 26, 47, 0.12);
2502 padding-left: 0;
2503 padding-top: 1rem;
2504 flex-direction: row;
2505 flex-wrap: wrap;
2506 }
2507 .profile-hero-action {
2508 flex: 1 1 150px;
2509 }
2510 .dark-phase .profile-hero-actions {
2511 border-top-color: rgba(255, 255, 255, 0.14);
2512 }
2513}
2514.profile-hero-name-row {
2515 display: flex;
2516 align-items: center;
2517 gap: 0.6rem;
2518 flex-wrap: wrap;
2519}
2520.profile-hero-name {
2521 margin: 0;
2522 font-size: 1.8rem;
2523 font-weight: 600;
2524 color: #0e1428;
2525}
2526.dark-phase .profile-hero-name {
2527 color: #f0f4ff;
2528}
2529.profile-hero-handle {
2530 margin: 0.2rem 0 0.4rem;
2531 font-family: "IBM Plex Mono", monospace;
2532 color: rgba(18, 26, 47, 0.55);
2533}
2534.dark-phase .profile-hero-handle {
2535 color: rgba(255, 255, 255, 0.55);
2536}
2537.profile-hero-meta {
2538 display: flex;
2539 flex-direction: column;
2540 align-items: flex-start;
2541 gap: 0.4rem;
2542 flex-wrap: wrap;
2543 margin-top: 0.5rem;
2544}
2545.profile-hero-description {
2546 margin-top: 0.85rem;
2547 color: rgba(18, 26, 47, 0.85);
2548}
2549.dark-phase .profile-hero-description {
2550 color: rgba(255, 255, 255, 0.85);
2551}
2552
2553/* ---- Profile detail secondary buttons (Atmosphere / custom) ---- */
2554.profile-actions {
2555 margin-top: 1.5rem;
2556 display: flex;
2557 gap: 0.7rem;
2558 flex-wrap: wrap;
2559}
2560.profile-action {
2561 display: flex;
2562 align-items: center;
2563 gap: 0.85rem;
2564 padding: 0.9rem 1.05rem;
2565 border-radius: 16px;
2566 background: rgba(255, 255, 255, 0.55);
2567 border: 1px solid rgba(255, 255, 255, 0.55);
2568 text-decoration: none;
2569 color: inherit;
2570 transition:
2571 background 0.15s ease,
2572 border-color 0.15s ease,
2573 transform 0.15s ease;
2574}
2575.profile-action--compact {
2576 width: 46px;
2577 height: 46px;
2578 padding: 0;
2579 justify-content: center;
2580 border-radius: 999px;
2581}
2582.profile-action:hover {
2583 background: rgba(255, 255, 255, 0.85);
2584 transform: translateY(-1px);
2585}
2586.profile-action-icon {
2587 width: 32px;
2588 height: 32px;
2589 border-radius: 9px;
2590 flex-shrink: 0;
2591 background: #ffffff;
2592 object-fit: contain;
2593 padding: 4px;
2594 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
2595}
2596.profile-action-icon--glyph {
2597 background: rgba(18, 26, 47, 0.08);
2598 color: rgba(18, 26, 47, 0.7);
2599 display: inline-flex;
2600 align-items: center;
2601 justify-content: center;
2602 font-size: 1rem;
2603 padding: 0;
2604}
2605/* Wrapper for inline-SVG branded icons (Bluesky / Tangled). Tints the SVG
2606 * to the site's primary blue via currentColor. */
2607.profile-action-icon--brand {
2608 display: inline-flex;
2609 align-items: center;
2610 justify-content: center;
2611 color: #254a9e;
2612 padding: 5px;
2613}
2614.profile-action-icon-svg {
2615 width: 100%;
2616 height: 100%;
2617}
2618.profile-action--compact .profile-action-icon {
2619 width: 28px;
2620 height: 28px;
2621 border-radius: 999px;
2622 padding: 5px;
2623 box-shadow: none;
2624}
2625.profile-action-label {
2626 display: flex;
2627 flex-direction: column;
2628 gap: 0.1rem;
2629 min-width: 0;
2630}
2631.profile-action-title {
2632 font-weight: 600;
2633 font-size: 0.95rem;
2634}
2635.dark-phase .profile-action {
2636 background: rgba(255, 255, 255, 0.1);
2637 border-color: rgba(255, 255, 255, 0.18);
2638}
2639.dark-phase .profile-action:hover {
2640 background: rgba(255, 255, 255, 0.16);
2641}
2642.dark-phase .profile-action-icon--glyph {
2643 background: rgba(255, 255, 255, 0.12);
2644 color: rgba(255, 255, 255, 0.85);
2645}
2646
2647.profile-screenshots {
2648 margin-top: 1.5rem;
2649}
2650.profile-screenshots-shell {
2651 position: relative;
2652 width: 100%;
2653 min-width: 0;
2654}
2655.profile-screenshots-carousel {
2656 display: flex;
2657 gap: 1rem;
2658 overflow-x: auto;
2659 overscroll-behavior-x: contain;
2660 scroll-snap-type: x proximity;
2661 scrollbar-gutter: stable;
2662 padding: 0.1rem 0 1rem;
2663 -webkit-overflow-scrolling: touch;
2664 width: 100%;
2665 min-width: 0;
2666}
2667.profile-screenshots-arrow {
2668 position: absolute;
2669 top: 50%;
2670 transform: translateY(-50%);
2671 z-index: 2;
2672 width: 42px;
2673 height: 42px;
2674 border-radius: 999px;
2675 border: 1px solid rgba(255, 255, 255, 0.55);
2676 background: rgba(255, 255, 255, 0.68);
2677 color: #254a9e;
2678 font: inherit;
2679 font-size: 1.2rem;
2680 cursor: pointer;
2681 display: inline-flex;
2682 align-items: center;
2683 justify-content: center;
2684 box-shadow: 0 10px 26px rgba(20, 34, 70, 0.1);
2685 transition: background 0.15s ease, transform 0.15s ease;
2686}
2687.profile-screenshots-arrow--prev {
2688 left: 0.65rem;
2689}
2690.profile-screenshots-arrow--next {
2691 right: 0.65rem;
2692}
2693.profile-screenshots-arrow:hover {
2694 background: rgba(255, 255, 255, 0.9);
2695 transform: translateY(-50%) translateY(-1px);
2696}
2697.profile-screenshots-arrow:disabled {
2698 opacity: 0.42;
2699 cursor: default;
2700 pointer-events: none;
2701}
2702.profile-screenshot-card {
2703 display: flex;
2704 align-items: center;
2705 justify-content: center;
2706 flex: 0 0 auto;
2707 scroll-snap-align: start;
2708 overflow: hidden;
2709 height: clamp(320px, 58vh, 620px);
2710 max-width: 100%;
2711 border-radius: 20px;
2712 background: rgba(255, 255, 255, 0.45);
2713 border: 1px solid rgba(255, 255, 255, 0.55);
2714 box-shadow: 0 16px 40px rgba(20, 34, 70, 0.12);
2715}
2716.profile-screenshot-img {
2717 height: 100%;
2718 width: auto;
2719 max-width: 100%;
2720 object-fit: contain;
2721 display: block;
2722 transition: transform 0.2s ease;
2723}
2724.profile-screenshot-card:hover .profile-screenshot-img {
2725 transform: scale(1.015);
2726}
2727.dark-phase .profile-screenshot-card {
2728 background: rgba(255, 255, 255, 0.08);
2729 border-color: rgba(255, 255, 255, 0.14);
2730}
2731.dark-phase .profile-screenshots-arrow {
2732 background: rgba(255, 255, 255, 0.1);
2733 border-color: rgba(255, 255, 255, 0.16);
2734 color: #f0f4ff;
2735}
2736.dark-phase .profile-screenshots-arrow:hover {
2737 background: rgba(255, 255, 255, 0.16);
2738}
2739@media (max-width: 720px) {
2740 .profile-screenshots-shell {
2741 grid-template-columns: 1fr;
2742 }
2743 .profile-screenshots-arrow {
2744 display: none;
2745 }
2746 .profile-screenshot-card {
2747 height: clamp(300px, 62vh, 560px);
2748 max-width: 82vw;
2749 }
2750 .profile-screenshot-img {
2751 max-width: 82vw;
2752 }
2753}
2754
2755.profile-footer {
2756 margin-top: 2rem;
2757 font-size: 0.85rem;
2758 color: rgba(18, 26, 47, 0.55);
2759 display: flex;
2760 flex-wrap: wrap;
2761 justify-content: space-between;
2762 gap: 1rem;
2763}
2764.dark-phase .profile-footer {
2765 color: rgba(255, 255, 255, 0.55);
2766}
2767
2768/* ---- Profile create / manage form ---- */
2769.manage-header {
2770 display: flex;
2771 flex-wrap: wrap;
2772 justify-content: space-between;
2773 align-items: flex-start;
2774 gap: 1rem;
2775}
2776.profile-form {
2777 padding: 1.75rem;
2778 border-radius: 24px;
2779}
2780
2781/* ---- Live / inactive status pill at the top of the form ---- */
2782.profile-status {
2783 display: flex;
2784 align-items: flex-start;
2785 gap: 0.7rem;
2786 padding: 0.75rem 1rem;
2787 border-radius: 14px;
2788 margin-bottom: 1.25rem;
2789 border: 1px solid transparent;
2790}
2791.profile-status--live {
2792 background: rgba(46, 160, 90, 0.1);
2793 border-color: rgba(46, 160, 90, 0.3);
2794 color: rgba(20, 90, 50, 1);
2795}
2796.profile-status--inactive {
2797 background: rgba(120, 120, 130, 0.08);
2798 border-color: rgba(18, 26, 47, 0.12);
2799 color: rgba(60, 70, 90, 1);
2800}
2801.profile-status-dot {
2802 width: 10px;
2803 height: 10px;
2804 border-radius: 50%;
2805 margin-top: 6px;
2806 flex-shrink: 0;
2807}
2808.profile-status--live .profile-status-dot {
2809 background: #2ea05a;
2810 box-shadow: 0 0 0 4px rgba(46, 160, 90, 0.18);
2811}
2812.profile-status--inactive .profile-status-dot {
2813 background: #9aa0ad;
2814 box-shadow: 0 0 0 4px rgba(154, 160, 173, 0.18);
2815}
2816.profile-status-text {
2817 display: flex;
2818 flex-direction: column;
2819 gap: 0.1rem;
2820 min-width: 0;
2821}
2822.profile-status-title {
2823 font-weight: 600;
2824 font-size: 0.95rem;
2825}
2826.profile-status-sub {
2827 font-size: 0.85rem;
2828 opacity: 0.85;
2829}
2830.dark-phase .profile-status--live {
2831 background: rgba(80, 200, 130, 0.12);
2832 border-color: rgba(80, 200, 130, 0.35);
2833 color: rgba(180, 240, 200, 1);
2834}
2835.dark-phase .profile-status--inactive {
2836 background: rgba(255, 255, 255, 0.06);
2837 border-color: rgba(255, 255, 255, 0.14);
2838 color: rgba(220, 225, 235, 1);
2839}
2840.dark-phase .profile-status--live .profile-status-dot {
2841 background: #4cd283;
2842 box-shadow: 0 0 0 4px rgba(76, 210, 131, 0.2);
2843}
2844.dark-phase .profile-status--inactive .profile-status-dot {
2845 background: #b1b6c1;
2846 box-shadow: 0 0 0 4px rgba(177, 182, 193, 0.18);
2847}
2848.profile-form-row {
2849 display: grid;
2850 grid-template-columns: 200px 1fr;
2851 gap: 1.5rem;
2852 align-items: flex-start;
2853}
2854@media (max-width: 720px) {
2855 .profile-form-row {
2856 grid-template-columns: 1fr;
2857 }
2858}
2859.profile-form-banner {
2860 margin-bottom: 1.25rem;
2861}
2862.profile-form-banner-empty {
2863 display: flex;
2864 flex-wrap: wrap;
2865 align-items: center;
2866 gap: 0.75rem;
2867}
2868.profile-form-banner-empty .profile-form-hint {
2869 margin: 0;
2870 flex: 1 1 220px;
2871}
2872/* Compact row when a banner exists */
2873.profile-form-banner-row {
2874 display: flex;
2875 align-items: center;
2876 gap: 1rem;
2877 flex-wrap: wrap;
2878}
2879/* Clickable thumbnail */
2880.profile-form-banner-thumb-label {
2881 position: relative;
2882 display: block;
2883 cursor: pointer;
2884 border-radius: 10px;
2885 overflow: hidden;
2886 flex: 0 0 auto;
2887 width: 160px;
2888 aspect-ratio: 1200 / 630;
2889 border: 1px solid rgba(255, 255, 255, 0.5);
2890 background: rgba(255, 255, 255, 0.3);
2891}
2892.profile-form-banner-thumb {
2893 width: 100%;
2894 height: 100%;
2895 object-fit: cover;
2896 display: block;
2897}
2898.profile-form-banner-thumb-overlay {
2899 position: absolute;
2900 inset: 0;
2901 display: flex;
2902 align-items: center;
2903 justify-content: center;
2904 background: rgba(0, 0, 0, 0.35);
2905 color: #fff;
2906 font-size: 0.8rem;
2907 font-weight: 500;
2908 opacity: 0;
2909 transition: opacity 0.15s ease;
2910}
2911.profile-form-banner-thumb-label:hover .profile-form-banner-thumb-overlay {
2912 opacity: 1;
2913}
2914.profile-form-banner-thumb-actions {
2915 display: flex;
2916 flex-direction: column;
2917 gap: 0.5rem;
2918 align-items: flex-start;
2919}
2920/* The visible "Replace banner" button next to thumbnail is redundant
2921 with the clickable thumbnail but improves discoverability */
2922.profile-form-banner-thumb-replace {
2923 font-size: 0.85rem;
2924 padding: 0.4rem 0.8rem;
2925}
2926.profile-form-avatar {
2927 display: flex;
2928 flex-direction: column;
2929 gap: 0.5rem;
2930 align-items: center;
2931 text-align: center;
2932}
2933.profile-form-avatar-img {
2934 width: 160px;
2935 height: 160px;
2936 border-radius: 24px;
2937 object-fit: cover;
2938 background: rgba(255, 255, 255, 0.4);
2939 border: 1px solid rgba(255, 255, 255, 0.5);
2940}
2941.profile-form-avatar-placeholder {
2942 width: 160px;
2943 height: 160px;
2944 border-radius: 24px;
2945 background: rgba(255, 255, 255, 0.4);
2946 border: 1px dashed rgba(18, 26, 47, 0.18);
2947 display: flex;
2948 align-items: center;
2949 justify-content: center;
2950 font-size: 3rem;
2951 color: rgba(18, 26, 47, 0.4);
2952}
2953.profile-form-fields {
2954 display: flex;
2955 flex-direction: column;
2956 gap: 1.1rem;
2957}
2958
2959/* Full-width column for everything below name/description (categories,
2960 links, icon, …). Sibling of `.profile-form-row`, so it spans the
2961 whole card on desktop instead of being constrained to the
2962 avatar+fields right-hand column. */
2963.profile-form-stack {
2964 display: flex;
2965 flex-direction: column;
2966 gap: 1.1rem;
2967 margin-top: 1.5rem;
2968}
2969.profile-form-mobile-links {
2970 display: grid;
2971 grid-template-columns: repeat(2, minmax(0, 1fr));
2972 gap: 1rem;
2973}
2974@media (max-width: 720px) {
2975 .profile-form-mobile-links {
2976 grid-template-columns: 1fr;
2977 }
2978}
2979.profile-form-section-heading {
2980 display: flex;
2981 align-items: center;
2982 justify-content: space-between;
2983 gap: 1rem;
2984}
2985.profile-form-count {
2986 font-family: "IBM Plex Mono", monospace;
2987 font-size: 0.8rem;
2988 color: rgba(18, 26, 47, 0.52);
2989}
2990.profile-screenshots-field {
2991 gap: 0.75rem;
2992}
2993.profile-screenshot-status {
2994 width: fit-content;
2995}
2996.profile-screenshot-grid {
2997 display: grid;
2998 grid-template-columns: repeat(4, minmax(0, 1fr));
2999 gap: 0.75rem;
3000}
3001.profile-screenshot-edit {
3002 position: relative;
3003 overflow: hidden;
3004 aspect-ratio: 16 / 10;
3005 border-radius: 16px;
3006 border: 1px solid rgba(18, 26, 47, 0.1);
3007 background: rgba(255, 255, 255, 0.42);
3008}
3009.profile-screenshot-edit-img {
3010 width: 100%;
3011 height: 100%;
3012 object-fit: cover;
3013 display: block;
3014}
3015.profile-screenshot-remove {
3016 position: absolute;
3017 top: 0.45rem;
3018 right: 0.45rem;
3019 width: 28px;
3020 height: 28px;
3021 border-radius: 999px;
3022 border: 1px solid rgba(255, 255, 255, 0.66);
3023 background: rgba(18, 26, 47, 0.78);
3024 color: #ffffff;
3025 cursor: pointer;
3026}
3027.profile-screenshot-native-picker {
3028 max-width: 520px;
3029}
3030.profile-screenshot-file-input {
3031 padding: 0.7rem;
3032 cursor: pointer;
3033}
3034.dark-phase .profile-form-count {
3035 color: rgba(255, 255, 255, 0.58);
3036}
3037.dark-phase .profile-screenshot-edit {
3038 border-color: rgba(255, 255, 255, 0.14);
3039 background: rgba(255, 255, 255, 0.08);
3040}
3041@media (max-width: 720px) {
3042 .profile-screenshot-grid {
3043 grid-template-columns: repeat(2, minmax(0, 1fr));
3044 }
3045}
3046
3047/* Read-only "Signed in as @handle" row, with the sign-out button
3048 anchored to the right. The button uses formAction="/oauth/logout"
3049 on submit so it doesn't break the parent profile form. */
3050.profile-form-handle-row {
3051 display: flex;
3052 align-items: center;
3053 justify-content: space-between;
3054 gap: 0.75rem;
3055 flex-wrap: wrap;
3056 padding: 0.6rem 0.85rem;
3057 border-radius: 12px;
3058 background: rgba(18, 26, 47, 0.04);
3059 border: 1px solid rgba(18, 26, 47, 0.06);
3060}
3061.profile-form-handle-info {
3062 display: flex;
3063 align-items: baseline;
3064 gap: 0.5rem;
3065 flex-wrap: wrap;
3066 min-width: 0;
3067}
3068.profile-form-handle-value {
3069 font-family: "IBM Plex Mono", monospace;
3070 font-size: 0.95rem;
3071 font-weight: 600;
3072 color: rgba(18, 26, 47, 0.9);
3073}
3074.profile-form-handle-signout {
3075 background: transparent;
3076 border: 1px solid rgba(18, 26, 47, 0.18);
3077 border-radius: 999px;
3078 padding: 0.3rem 0.85rem;
3079 font: inherit;
3080 font-size: 0.78rem;
3081 color: rgba(18, 26, 47, 0.75);
3082 cursor: pointer;
3083 transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
3084}
3085.profile-form-handle-signout:hover {
3086 background: rgba(18, 26, 47, 0.06);
3087 border-color: rgba(18, 26, 47, 0.28);
3088 color: rgba(18, 26, 47, 0.92);
3089}
3090.dark-phase .profile-form-handle-row {
3091 background: rgba(255, 255, 255, 0.06);
3092 border-color: rgba(255, 255, 255, 0.1);
3093}
3094.dark-phase .profile-form-handle-value {
3095 color: rgba(255, 255, 255, 0.95);
3096}
3097.dark-phase .profile-form-handle-signout {
3098 border-color: rgba(255, 255, 255, 0.18);
3099 color: rgba(255, 255, 255, 0.8);
3100}
3101.dark-phase .profile-form-handle-signout:hover {
3102 background: rgba(255, 255, 255, 0.08);
3103 border-color: rgba(255, 255, 255, 0.3);
3104 color: rgba(255, 255, 255, 0.98);
3105}
3106
3107/* ---- Bluesky client picker (used inside the modal for multi-select) ---- */
3108.bsky-client-list {
3109 display: flex;
3110 flex-direction: column;
3111 gap: 0.4rem;
3112 margin-top: 0.4rem;
3113 padding: 0.4rem;
3114 border-radius: 16px;
3115 background: rgba(18, 26, 47, 0.04);
3116 border: 1px solid rgba(18, 26, 47, 0.06);
3117 list-style: none;
3118}
3119.dark-phase .bsky-client-list {
3120 background: rgba(255, 255, 255, 0.04);
3121 border-color: rgba(255, 255, 255, 0.08);
3122}
3123.bsky-client-list li {
3124 list-style: none;
3125}
3126.bsky-client-row {
3127 display: flex;
3128 align-items: center;
3129 gap: 0.85rem;
3130 padding: 0.65rem 0.85rem;
3131 border-radius: 12px;
3132 background: transparent;
3133 border: 1px solid transparent;
3134 cursor: pointer;
3135 transition: background 0.12s ease, border-color 0.12s ease;
3136}
3137.bsky-client-row:hover {
3138 background: rgba(255, 255, 255, 0.5);
3139}
3140.bsky-client-row.is-selected {
3141 background: rgba(42, 90, 168, 0.08);
3142 border-color: rgba(42, 90, 168, 0.35);
3143}
3144.dark-phase .bsky-client-row:hover {
3145 background: rgba(255, 255, 255, 0.06);
3146}
3147.dark-phase .bsky-client-row.is-selected {
3148 background: rgba(120, 170, 255, 0.12);
3149 border-color: rgba(120, 170, 255, 0.5);
3150}
3151.bsky-client-row > input[type="radio"],
3152.bsky-client-row > input[type="checkbox"] {
3153 position: absolute;
3154 opacity: 0;
3155 pointer-events: none;
3156}
3157.bsky-client-icon {
3158 width: 36px;
3159 height: 36px;
3160 border-radius: 10px;
3161 flex-shrink: 0;
3162 background: #ffffff;
3163 object-fit: contain;
3164 padding: 4px;
3165 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
3166}
3167.bsky-client-meta {
3168 display: flex;
3169 flex-direction: column;
3170 flex: 1;
3171 min-width: 0;
3172}
3173.bsky-client-name {
3174 font-weight: 600;
3175 font-size: 0.95rem;
3176 color: rgba(18, 26, 47, 0.95);
3177}
3178.bsky-client-row.is-selected .bsky-client-name {
3179 color: rgba(42, 90, 168, 1);
3180}
3181.bsky-client-domain {
3182 font-family: "IBM Plex Mono", monospace;
3183 font-size: 0.78rem;
3184 color: rgba(18, 26, 47, 0.55);
3185}
3186.dark-phase .bsky-client-name {
3187 color: rgba(255, 255, 255, 0.95);
3188}
3189.dark-phase .bsky-client-row.is-selected .bsky-client-name {
3190 color: rgba(160, 200, 255, 1);
3191}
3192.dark-phase .bsky-client-domain {
3193 color: rgba(255, 255, 255, 0.55);
3194}
3195.bsky-client-radio,
3196.bsky-client-check {
3197 width: 18px;
3198 height: 18px;
3199 border-radius: 4px;
3200 border: 2px solid rgba(18, 26, 47, 0.25);
3201 background: transparent;
3202 flex-shrink: 0;
3203 position: relative;
3204 transition: border-color 0.12s ease, background 0.12s ease;
3205}
3206.bsky-client-radio {
3207 border-radius: 50%;
3208}
3209.bsky-client-row.is-selected .bsky-client-radio,
3210.bsky-client-row.is-selected .bsky-client-check {
3211 border-color: rgba(42, 90, 168, 1);
3212 background: rgba(42, 90, 168, 1);
3213}
3214.bsky-client-row.is-selected .bsky-client-radio {
3215 box-shadow: inset 0 0 0 3px #ffffff;
3216}
3217.bsky-client-row.is-selected .bsky-client-check::after {
3218 content: "";
3219 position: absolute;
3220 left: 4px;
3221 top: 0px;
3222 width: 5px;
3223 height: 10px;
3224 border-right: 2px solid #fff;
3225 border-bottom: 2px solid #fff;
3226 transform: rotate(45deg);
3227}
3228.dark-phase .bsky-client-radio,
3229.dark-phase .bsky-client-check {
3230 border-color: rgba(255, 255, 255, 0.35);
3231}
3232.dark-phase .bsky-client-row.is-selected .bsky-client-radio,
3233.dark-phase .bsky-client-row.is-selected .bsky-client-check {
3234 border-color: rgba(160, 200, 255, 1);
3235 background: rgba(160, 200, 255, 1);
3236}
3237.dark-phase .bsky-client-row.is-selected .bsky-client-radio {
3238 box-shadow: inset 0 0 0 3px rgba(20, 26, 50, 1);
3239}
3240.dark-phase .bsky-client-row.is-selected .bsky-client-check::after {
3241 border-color: rgba(20, 26, 50, 1);
3242}
3243.profile-form-field {
3244 display: flex;
3245 flex-direction: column;
3246 gap: 0.4rem;
3247 border: 0;
3248 padding: 0;
3249 margin: 0;
3250}
3251.profile-form-row-2 {
3252 display: grid;
3253 grid-template-columns: 1fr 1fr;
3254 gap: 1rem;
3255}
3256@media (max-width: 600px) {
3257 .profile-form-row-2 {
3258 grid-template-columns: 1fr;
3259 }
3260}
3261.profile-form-label {
3262 font-family: "IBM Plex Mono", monospace;
3263 font-size: 0.78rem;
3264 text-transform: uppercase;
3265 letter-spacing: 0.04em;
3266 color: rgba(18, 26, 47, 0.65);
3267}
3268.profile-form-required {
3269 color: #d96860;
3270 font-style: normal;
3271 margin-left: 0.2rem;
3272}
3273.profile-form-input {
3274 padding: 0.65rem 0.85rem;
3275 border-radius: 12px;
3276 border: 1px solid rgba(255, 255, 255, 0.55);
3277 background: rgba(255, 255, 255, 0.6);
3278 font: inherit;
3279 font-size: 0.95rem;
3280 color: #0e1428;
3281 outline: none;
3282 transition: border-color 0.15s ease, background 0.15s ease;
3283}
3284.profile-form-input:focus {
3285 border-color: rgba(42, 90, 168, 0.6);
3286 background: rgba(255, 255, 255, 0.85);
3287}
3288.profile-form-hint {
3289 font-size: 0.78rem;
3290 color: rgba(18, 26, 47, 0.55);
3291 margin: 0;
3292}
3293.dark-phase .profile-form-input {
3294 background: rgba(255, 255, 255, 0.1);
3295 border-color: rgba(255, 255, 255, 0.18);
3296 color: #f0f4ff;
3297}
3298.dark-phase .profile-form-label,
3299.dark-phase .profile-form-hint {
3300 color: rgba(255, 255, 255, 0.65);
3301}
3302
3303/**
3304 * Inline checkbox-style toggle row used for the "open source" flag. Lives
3305 * between regular labelled fields, so the spacing matches `.profile-form-field`
3306 * (gap inherited from the parent), but the row itself reads as a control
3307 * with its own affordance.
3308 */
3309.profile-form-toggle {
3310 display: flex;
3311 align-items: flex-start;
3312 gap: 0.7rem;
3313 padding: 0.75rem 0.85rem;
3314 border-radius: 0.7rem;
3315 border: 1px solid rgba(18, 26, 47, 0.12);
3316 background: rgba(255, 255, 255, 0.45);
3317 cursor: pointer;
3318}
3319.profile-form-toggle input[type="checkbox"] {
3320 margin-top: 0.15rem;
3321 width: 1rem;
3322 height: 1rem;
3323 accent-color: #2563eb;
3324 cursor: pointer;
3325}
3326.profile-form-toggle-body {
3327 display: flex;
3328 flex-direction: column;
3329 gap: 0.15rem;
3330 min-width: 0;
3331}
3332.profile-form-toggle-label {
3333 font-size: 0.92rem;
3334 font-weight: 600;
3335 color: rgba(18, 26, 47, 0.92);
3336}
3337.profile-form-toggle-hint {
3338 font-size: 0.78rem;
3339 color: rgba(18, 26, 47, 0.55);
3340}
3341.dark-phase .profile-form-toggle {
3342 background: rgba(255, 255, 255, 0.07);
3343 border-color: rgba(255, 255, 255, 0.18);
3344}
3345.dark-phase .profile-form-toggle-label {
3346 color: rgba(255, 255, 255, 0.92);
3347}
3348.dark-phase .profile-form-toggle-hint {
3349 color: rgba(255, 255, 255, 0.6);
3350}
3351
3352/**
3353 * Smaller variant of the field label used inside compound fieldsets
3354 * (links editor row, license sub-fields). Matches the hint typography
3355 * so nested fields don't compete with the parent legend.
3356 */
3357.profile-form-label--small {
3358 font-size: 0.78rem;
3359 font-weight: 600;
3360 text-transform: none;
3361 letter-spacing: 0;
3362 color: rgba(18, 26, 47, 0.7);
3363}
3364.dark-phase .profile-form-label--small {
3365 color: rgba(255, 255, 255, 0.75);
3366}
3367.profile-form-empty {
3368 font-size: 0.85rem;
3369 color: rgba(18, 26, 47, 0.55);
3370 font-style: italic;
3371 margin: 0.25rem 0 0.5rem;
3372}
3373.dark-phase .profile-form-empty {
3374 color: rgba(255, 255, 255, 0.55);
3375}
3376
3377/* ------------------------------------------------------------------ *
3378 * Atmosphere link toggles
3379 *
3380 * Each row is `[ toggle ] [ icon + label ] [ gear / url ]`. The
3381 * row gets `is-on` when active so we can colour the toggle track and
3382 * lift the icon. The Bluesky row optionally shows a stack of mini
3383 * favicons when more than one client is selected — see
3384 * `.atmosphere-icon-stack`.
3385 * ------------------------------------------------------------------ */
3386.atmosphere-toggles {
3387 display: flex;
3388 flex-direction: column;
3389 gap: 0.55rem;
3390 margin-top: 0.4rem;
3391}
3392.atmosphere-row {
3393 display: grid;
3394 grid-template-columns: auto 1fr auto;
3395 gap: 0.85rem;
3396 align-items: center;
3397 padding: 0.7rem 0.85rem;
3398 border-radius: 0.8rem;
3399 border: 1px solid rgba(18, 26, 47, 0.12);
3400 background: rgba(255, 255, 255, 0.45);
3401}
3402.atmosphere-row.is-on {
3403 background: rgba(255, 255, 255, 0.7);
3404 border-color: rgba(42, 90, 168, 0.35);
3405}
3406.dark-phase .atmosphere-row {
3407 background: rgba(255, 255, 255, 0.04);
3408 border-color: rgba(255, 255, 255, 0.12);
3409}
3410.dark-phase .atmosphere-row.is-on {
3411 background: rgba(255, 255, 255, 0.08);
3412 border-color: rgba(96, 165, 250, 0.45);
3413}
3414
3415.atmosphere-row-toggle {
3416 position: relative;
3417 display: inline-flex;
3418 cursor: pointer;
3419}
3420.atmosphere-row-toggle input {
3421 position: absolute;
3422 inset: 0;
3423 opacity: 0;
3424 cursor: pointer;
3425}
3426.atmosphere-toggle-track {
3427 display: inline-block;
3428 width: 2.4rem;
3429 height: 1.35rem;
3430 border-radius: 999px;
3431 background: rgba(18, 26, 47, 0.18);
3432 position: relative;
3433 transition: background 0.15s ease;
3434}
3435.atmosphere-toggle-thumb {
3436 position: absolute;
3437 top: 0.15rem;
3438 left: 0.15rem;
3439 width: 1.05rem;
3440 height: 1.05rem;
3441 border-radius: 50%;
3442 background: #fff;
3443 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
3444 transition: transform 0.15s ease;
3445}
3446.atmosphere-row.is-on .atmosphere-toggle-track {
3447 background: rgba(42, 90, 168, 0.92);
3448}
3449.atmosphere-row.is-on .atmosphere-toggle-thumb {
3450 transform: translateX(1.05rem);
3451}
3452
3453.atmosphere-row-body {
3454 display: flex;
3455 align-items: center;
3456 gap: 0.7rem;
3457 min-width: 0;
3458}
3459.atmosphere-row-icon {
3460 flex: 0 0 auto;
3461 display: inline-flex;
3462 align-items: center;
3463 justify-content: center;
3464}
3465.atmosphere-icon {
3466 width: 28px;
3467 height: 28px;
3468 border-radius: 6px;
3469 object-fit: contain;
3470 background: #fff;
3471 padding: 2px;
3472 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
3473}
3474.atmosphere-icon-glyph {
3475 width: 28px;
3476 height: 28px;
3477 border-radius: 6px;
3478 display: inline-flex;
3479 align-items: center;
3480 justify-content: center;
3481 background: rgba(18, 26, 47, 0.08);
3482 font-weight: 700;
3483 font-size: 0.85rem;
3484}
3485/**
3486 * Stacked mini-icons used when more than one Bluesky client is
3487 * selected. Each item overlaps the previous by negative margin and
3488 * uses descending z-index so the leftmost (primary client) sits on
3489 * top of the stack.
3490 */
3491.atmosphere-icon-stack {
3492 display: inline-flex;
3493 align-items: center;
3494}
3495.atmosphere-icon-stack-item {
3496 width: 26px;
3497 height: 26px;
3498 border-radius: 50%;
3499 object-fit: contain;
3500 background: #fff;
3501 padding: 2px;
3502 border: 2px solid #fff;
3503 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
3504}
3505.dark-phase .atmosphere-icon-stack-item {
3506 border-color: rgba(20, 28, 50, 0.95);
3507}
3508.atmosphere-row-meta {
3509 display: flex;
3510 flex-direction: column;
3511 min-width: 0;
3512}
3513.atmosphere-row-name {
3514 font-weight: 600;
3515 font-size: 0.95rem;
3516 color: rgba(18, 26, 47, 0.95);
3517}
3518.atmosphere-row-desc {
3519 font-size: 0.8rem;
3520 color: rgba(18, 26, 47, 0.6);
3521}
3522.dark-phase .atmosphere-row-name {
3523 color: rgba(255, 255, 255, 0.95);
3524}
3525.dark-phase .atmosphere-row-desc {
3526 color: rgba(255, 255, 255, 0.6);
3527}
3528
3529.atmosphere-row-gear {
3530 appearance: none;
3531 border: none;
3532 background: transparent;
3533 font-size: 1.1rem;
3534 cursor: pointer;
3535 padding: 0.3rem 0.4rem;
3536 border-radius: 0.5rem;
3537 color: rgba(18, 26, 47, 0.6);
3538}
3539.atmosphere-row-gear:hover {
3540 background: rgba(18, 26, 47, 0.08);
3541 color: rgba(18, 26, 47, 0.9);
3542}
3543.dark-phase .atmosphere-row-gear {
3544 color: rgba(255, 255, 255, 0.65);
3545}
3546.dark-phase .atmosphere-row-gear:hover {
3547 background: rgba(255, 255, 255, 0.08);
3548 color: #fff;
3549}
3550
3551.atmosphere-row-url {
3552 grid-column: 1 / -1;
3553 margin-top: 0.5rem;
3554}
3555
3556/* ------------------------------------------------------------------ *
3557 * Custom links editor
3558 *
3559 * Two columns (label | url) plus a small × delete button. Collapses
3560 * to a single column on narrow screens.
3561 * ------------------------------------------------------------------ */
3562.custom-link-list {
3563 display: flex;
3564 flex-direction: column;
3565 gap: 0.5rem;
3566}
3567.custom-link-row {
3568 display: grid;
3569 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
3570 gap: 0.45rem;
3571 align-items: center;
3572}
3573.custom-link-label,
3574.custom-link-url {
3575 min-width: 0;
3576}
3577.custom-link-remove {
3578 appearance: none;
3579 border: 1px solid rgba(18, 26, 47, 0.15);
3580 background: rgba(255, 255, 255, 0.4);
3581 border-radius: 0.5rem;
3582 width: 2rem;
3583 height: 2rem;
3584 font-size: 1.1rem;
3585 line-height: 1;
3586 cursor: pointer;
3587 color: rgba(18, 26, 47, 0.7);
3588}
3589.custom-link-remove:hover {
3590 background: rgba(220, 38, 38, 0.08);
3591 color: rgba(185, 28, 28, 0.95);
3592 border-color: rgba(220, 38, 38, 0.4);
3593}
3594.dark-phase .custom-link-remove {
3595 background: rgba(255, 255, 255, 0.04);
3596 border-color: rgba(255, 255, 255, 0.15);
3597 color: rgba(255, 255, 255, 0.75);
3598}
3599.dark-phase .custom-link-remove:hover {
3600 background: rgba(248, 113, 113, 0.15);
3601 color: rgba(254, 202, 202, 0.95);
3602}
3603.custom-link-add {
3604 align-self: flex-start;
3605}
3606@media (max-width: 640px) {
3607 .custom-link-row {
3608 grid-template-columns: 1fr auto;
3609 }
3610 .custom-link-url {
3611 grid-column: 1 / -1;
3612 }
3613}
3614
3615/* ---- Developer SVG icon slot (separate from main avatar) -------------- */
3616/* Smaller and squarer than the main avatar — this is a developer asset,
3617 not the public face of the project, so it shouldn't compete visually
3618 with the avatar block above. */
3619.profile-form-icon-row {
3620 display: flex;
3621 align-items: center;
3622 gap: 0.85rem;
3623 flex-wrap: wrap;
3624}
3625.profile-form-icon-preview {
3626 width: 64px;
3627 height: 64px;
3628 border-radius: 12px;
3629 background: rgba(255, 255, 255, 0.5);
3630 border: 1px solid rgba(18, 26, 47, 0.08);
3631 display: flex;
3632 align-items: center;
3633 justify-content: center;
3634 flex: 0 0 auto;
3635}
3636.profile-form-icon-preview-img {
3637 width: 100%;
3638 height: 100%;
3639 object-fit: contain;
3640 padding: 6px;
3641}
3642.profile-form-icon-placeholder {
3643 font-size: 0.7rem;
3644 font-weight: 600;
3645 letter-spacing: 0.05em;
3646 color: rgba(18, 26, 47, 0.4);
3647}
3648.profile-form-icon-actions {
3649 display: flex;
3650 align-items: center;
3651 gap: 0.5rem;
3652 flex-wrap: wrap;
3653}
3654.dark-phase .profile-form-icon-preview {
3655 background: rgba(255, 255, 255, 0.06);
3656 border-color: rgba(255, 255, 255, 0.1);
3657}
3658.dark-phase .profile-form-icon-placeholder {
3659 color: rgba(255, 255, 255, 0.5);
3660}
3661
3662/* Two parallel slots — color and B/W — share the same access gate
3663 and sanitiser, so we render them side-by-side. They wrap to a single
3664 column on narrow viewports so the upload buttons stay reachable. */
3665.profile-form-icon-grid {
3666 display: grid;
3667 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
3668 gap: 1rem;
3669 margin-top: 0.6rem;
3670}
3671.profile-form-icon-slot {
3672 display: flex;
3673 flex-direction: column;
3674 gap: 0.4rem;
3675 padding: 0.85rem;
3676 border-radius: 14px;
3677 background: rgba(255, 255, 255, 0.35);
3678 border: 1px solid rgba(18, 26, 47, 0.06);
3679}
3680.profile-form-icon-slot-heading {
3681 display: flex;
3682 flex-direction: column;
3683 gap: 0.15rem;
3684}
3685.profile-form-icon-slot-hint {
3686 margin: 0;
3687}
3688/* Render B/W previews with a neutral checker so a black-on-transparent
3689 mark is still visible without us having to inject CSS into the SVG. */
3690.profile-form-icon-preview--bw {
3691 background:
3692 linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%),
3693 linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%),
3694 linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%),
3695 linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%);
3696 background-size: 12px 12px;
3697 background-position: 0 0, 0 6px, 6px -6px, -6px 0;
3698}
3699.dark-phase .profile-form-icon-slot {
3700 background: rgba(255, 255, 255, 0.04);
3701 border-color: rgba(255, 255, 255, 0.08);
3702}
3703.dark-phase .profile-form-icon-preview--bw {
3704 background-color: rgba(255, 255, 255, 0.06);
3705 background-image:
3706 linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
3707 linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
3708 linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%),
3709 linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
3710}
3711.profile-form-icon-resource-actions {
3712 margin-top: 0.75rem;
3713}
3714.profile-form-icon-resource-link {
3715 text-decoration: none;
3716 color: inherit;
3717}
3718
3719/* ------------------------------------------------------------------ *
3720 * Modal popup (used by BskyClientPickerModal)
3721 * ------------------------------------------------------------------ */
3722.modal-backdrop {
3723 position: fixed;
3724 inset: 0;
3725 background: rgba(8, 14, 31, 0.55);
3726 backdrop-filter: blur(4px);
3727 display: flex;
3728 align-items: center;
3729 justify-content: center;
3730 z-index: 200;
3731 padding: 1rem;
3732}
3733.modal-card {
3734 width: min(440px, 100%);
3735 max-height: calc(100vh - 2rem);
3736 overflow-y: auto;
3737 background: rgba(255, 255, 255, 0.96);
3738 border-radius: 1rem;
3739 border: 1px solid rgba(255, 255, 255, 0.6);
3740 padding: 1.4rem 1.4rem 1rem;
3741 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
3742}
3743.dark-phase .modal-card {
3744 background: rgba(20, 28, 50, 0.96);
3745 border-color: rgba(255, 255, 255, 0.1);
3746 color: rgba(255, 255, 255, 0.95);
3747}
3748.modal-header {
3749 margin-bottom: 1rem;
3750}
3751.modal-title {
3752 font-size: 1.05rem;
3753 font-weight: 700;
3754 margin: 0 0 0.4rem;
3755}
3756.modal-body-text {
3757 font-size: 0.85rem;
3758 color: rgba(18, 26, 47, 0.7);
3759 margin: 0;
3760}
3761.dark-phase .modal-body-text {
3762 color: rgba(255, 255, 255, 0.7);
3763}
3764.modal-footnote {
3765 margin: 0.6rem 0 0;
3766 font-size: 0.78rem;
3767 color: rgba(185, 28, 28, 0.95);
3768}
3769.dark-phase .modal-footnote {
3770 color: rgba(254, 202, 202, 0.95);
3771}
3772.modal-footer {
3773 display: flex;
3774 gap: 0.55rem;
3775 justify-content: flex-end;
3776 margin-top: 1rem;
3777}
3778
3779.profile-form-chips {
3780 display: flex;
3781 gap: 0.4rem;
3782 flex-wrap: wrap;
3783}
3784.profile-form-chip {
3785 display: inline-flex;
3786 align-items: center;
3787 gap: 0.4rem;
3788 padding: 0.4rem 0.85rem;
3789 border-radius: 999px;
3790 background: rgba(255, 255, 255, 0.5);
3791 border: 1px solid rgba(255, 255, 255, 0.5);
3792 font: inherit;
3793 font-size: 0.85rem;
3794 cursor: pointer;
3795 color: rgba(18, 26, 47, 0.78);
3796}
3797.profile-form-chip input {
3798 display: none;
3799}
3800.profile-form-chip.is-selected {
3801 background: rgba(42, 90, 168, 0.92);
3802 color: #fff;
3803 border-color: rgba(42, 90, 168, 0.92);
3804}
3805
3806.profile-form-actions {
3807 display: flex;
3808 gap: 0.6rem;
3809 align-items: center;
3810 justify-content: center;
3811 flex-wrap: wrap;
3812 margin-top: 1.5rem;
3813}
3814.profile-form-button-primary {
3815 padding: 0.7rem 1.6rem;
3816 border-radius: 999px;
3817 border: 0;
3818 background: #0e1428;
3819 color: #fff;
3820 font: inherit;
3821 font-weight: 500;
3822 cursor: pointer;
3823}
3824.profile-form-button-primary:disabled {
3825 opacity: 0.7;
3826 cursor: not-allowed;
3827}
3828.profile-form-button-secondary {
3829 padding: 0.5rem 1rem;
3830 border-radius: 999px;
3831 background: rgba(255, 255, 255, 0.65);
3832 border: 1px solid rgba(255, 255, 255, 0.6);
3833 font: inherit;
3834 font-size: 0.85rem;
3835 cursor: pointer;
3836 display: inline-block;
3837}
3838/* Larger size variant used in the form action row so the secondary
3839 * "View public profile" button matches the proportions of the primary
3840 * Update / danger Remove buttons sitting next to it. Intentionally
3841 * scoped so existing compact secondary buttons (modals, custom-link
3842 * add, file picker label) keep their smaller look. */
3843.profile-form-button-secondary--lg {
3844 padding: 0.7rem 1.4rem;
3845 font-size: inherit;
3846 display: inline-flex;
3847 align-items: center;
3848 text-decoration: none;
3849 color: inherit;
3850}
3851.profile-form-button-link {
3852 background: none;
3853 border: 0;
3854 padding: 0;
3855 color: rgba(18, 26, 47, 0.55);
3856 text-decoration: underline;
3857 cursor: pointer;
3858 font: inherit;
3859 font-size: 0.85rem;
3860}
3861.profile-form-button-danger {
3862 padding: 0.7rem 1.4rem;
3863 border-radius: 999px;
3864 background: transparent;
3865 border: 1px solid rgba(217, 104, 96, 0.55);
3866 color: #c25048;
3867 font: inherit;
3868 cursor: pointer;
3869}
3870.profile-form-button-danger:hover {
3871 background: rgba(217, 104, 96, 0.08);
3872}
3873.profile-form-status {
3874 font-size: 0.9rem;
3875}
3876.profile-form-status--ok {
3877 color: #2c8854;
3878}
3879.profile-form-status--error {
3880 color: #c25048;
3881}
3882.profile-form-hydration-note {
3883 margin: 0.75rem 0 0;
3884 font-size: 0.85rem;
3885 color: rgba(194, 80, 72, 0.9);
3886}
3887
3888.profile-update-editor {
3889 padding: 1.35rem;
3890 border-radius: 24px;
3891}
3892.profile-update-editor-header h2,
3893.profile-update-editor-header p {
3894 margin: 0;
3895}
3896.profile-update-editor-header h2 {
3897 font-size: 1.25rem;
3898}
3899.profile-update-editor-header p {
3900 margin-top: 0.25rem;
3901 color: rgba(18, 26, 47, 0.68);
3902}
3903.profile-update-form {
3904 display: flex;
3905 flex-direction: column;
3906 gap: 0.9rem;
3907 margin-top: 1rem;
3908}
3909.profile-update-form-grid {
3910 display: grid;
3911 grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
3912 gap: 0.9rem;
3913}
3914.profile-update-actions,
3915.profile-update-list-actions {
3916 display: flex;
3917 flex-wrap: wrap;
3918 align-items: center;
3919 gap: 0.65rem;
3920}
3921.profile-update-list {
3922 display: flex;
3923 flex-direction: column;
3924 gap: 0.7rem;
3925 margin-top: 1rem;
3926}
3927.profile-update-list-item {
3928 display: flex;
3929 justify-content: space-between;
3930 gap: 1rem;
3931 padding: 0.95rem;
3932 border-radius: 16px;
3933 background: rgba(255, 255, 255, 0.4);
3934 border: 1px solid rgba(255, 255, 255, 0.46);
3935}
3936.profile-update-list-item h3,
3937.profile-update-list-item p {
3938 margin: 0;
3939}
3940.profile-update-list-item h3 {
3941 font-size: 1rem;
3942}
3943.profile-update-list-item p {
3944 margin-top: 0.25rem;
3945 color: rgba(18, 26, 47, 0.68);
3946 white-space: pre-wrap;
3947}
3948.profile-update-list-meta {
3949 display: flex;
3950 gap: 0.45rem;
3951 flex-wrap: wrap;
3952 font-size: 0.78rem;
3953 font-weight: 700;
3954 color: rgba(18, 26, 47, 0.55);
3955}
3956.dark-phase .profile-update-editor-header p,
3957.dark-phase .profile-update-list-item p,
3958.dark-phase .profile-update-list-meta {
3959 color: rgba(255, 255, 255, 0.62);
3960}
3961.dark-phase .profile-update-list-item {
3962 background: rgba(255, 255, 255, 0.06);
3963 border-color: rgba(255, 255, 255, 0.12);
3964}
3965@media (max-width: 720px) {
3966 .profile-update-form-grid,
3967 .profile-update-list-item {
3968 grid-template-columns: 1fr;
3969 }
3970 .profile-update-list-item {
3971 flex-direction: column;
3972 }
3973}
3974
3975/* ---- Sign-in form ---- */
3976.signin-form {
3977 display: flex;
3978 flex-direction: column;
3979 gap: 0.75rem;
3980}
3981.signin-form-label {
3982 font-family: "IBM Plex Mono", monospace;
3983 font-size: 0.78rem;
3984 text-transform: uppercase;
3985 letter-spacing: 0.04em;
3986 color: rgba(18, 26, 47, 0.65);
3987}
3988.dark-phase .signin-form-label {
3989 color: rgba(255, 255, 255, 0.65);
3990}
3991.signin-form-row {
3992 display: flex;
3993 gap: 0.5rem;
3994}
3995.signin-form-input {
3996 flex: 1;
3997 padding: 0.7rem 1rem;
3998 border-radius: 999px;
3999 border: 1px solid rgba(255, 255, 255, 0.55);
4000 background: rgba(255, 255, 255, 0.65);
4001 font: inherit;
4002 font-size: 1rem;
4003 outline: none;
4004 color: #0e1428;
4005}
4006.signin-form-input:focus {
4007 border-color: rgba(42, 90, 168, 0.6);
4008}
4009.signin-form-submit {
4010 padding: 0.7rem 1.4rem;
4011 border-radius: 999px;
4012 border: 0;
4013 background: #0e1428;
4014 color: #fff;
4015 font: inherit;
4016 cursor: pointer;
4017}
4018.signin-form-submit:disabled {
4019 opacity: 0.7;
4020 cursor: not-allowed;
4021}
4022.signin-form-error {
4023 color: #c25048;
4024 font-size: 0.85rem;
4025 margin: 0;
4026}
4027.signin-form-hint {
4028 font-size: 0.85rem;
4029 color: rgba(18, 26, 47, 0.55);
4030 margin: 0;
4031}
4032.dark-phase .signin-form-hint {
4033 color: rgba(255, 255, 255, 0.55);
4034}
4035
4036.admin-verify-form {
4037 display: flex;
4038 flex-direction: column;
4039 gap: 0.75rem;
4040 padding: 1rem;
4041 margin-top: 0.8rem;
4042}
4043.admin-verify-form-row {
4044 display: flex;
4045 gap: 0.6rem;
4046 align-items: center;
4047}
4048.admin-verify-form-row .signin-form-input {
4049 min-width: 0;
4050}
4051@media (max-width: 640px) {
4052 .admin-verify-form-row {
4053 align-items: stretch;
4054 flex-direction: column;
4055 }
4056}
4057
4058/* Hide the sky-effects toggle anywhere we explicitly disable effects (e.g. /explore). */
4059body.explore-no-effects {
4060 --nav-effects-strip: 0;
4061}
4062body.explore-no-effects #nav-effects-bar {
4063 display: none !important;
4064}
4065/* ---- Sign-in handle preview dropdown ---- */
4066/* IMPORTANT: do NOT set z-index here. position:relative alone is enough
4067 to anchor the absolutely positioned dropdown without creating a stacking
4068 context that would trap the dropdown below higher-z-index siblings
4069 (footer logo, footer links, nav, etc.). */
4070.signin-form-preview-wrap {
4071 position: relative;
4072 overflow: visible;
4073 display: flex;
4074 flex-direction: column;
4075 gap: 0.85rem;
4076}
4077/* Dropdown floats above page chrome (nav z-index 101). */
4078.signin-form-preview {
4079 position: absolute;
4080 z-index: 1000;
4081 top: calc(100% + 0.45rem);
4082 left: 0;
4083 right: 0;
4084 padding: 0.4rem;
4085 display: block;
4086 font-size: 0.92rem;
4087 color: #0e1428;
4088 isolation: isolate;
4089}
4090/* Lightly translucent surface — readable but still has a hint of glass. */
4091.signin-form-preview.glass {
4092 background: rgba(255, 255, 255, 0.92);
4093 border: 1px solid rgba(18, 26, 47, 0.12);
4094 backdrop-filter: blur(14px);
4095 -webkit-backdrop-filter: blur(14px);
4096 border-radius: 18px;
4097 box-shadow:
4098 0 20px 50px rgba(14, 20, 40, 0.22),
4099 0 6px 16px rgba(14, 20, 40, 0.1);
4100}
4101.dark-phase .signin-form-preview {
4102 color: #f3f5fb;
4103}
4104.dark-phase .signin-form-preview.glass {
4105 background: rgba(22, 28, 48, 0.92);
4106 border-color: rgba(255, 255, 255, 0.22);
4107 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.4);
4108}
4109.signin-form-preview-list {
4110 display: flex;
4111 flex-direction: column;
4112 gap: 2px;
4113 max-height: min(52vh, 320px);
4114 overflow-y: auto;
4115 -webkit-overflow-scrolling: touch;
4116}
4117.signin-form-preview-row {
4118 position: relative;
4119 z-index: 1;
4120 display: flex;
4121 align-items: center;
4122 gap: 0.7rem;
4123 padding: 0.55rem 0.6rem;
4124 border-radius: 12px;
4125 text-align: left;
4126 background: transparent;
4127 border: 0;
4128 cursor: pointer;
4129 font: inherit;
4130 color: inherit;
4131 width: 100%;
4132 pointer-events: auto;
4133 -webkit-tap-highlight-color: transparent;
4134}
4135.signin-form-preview-row:hover,
4136.signin-form-preview-row:focus-visible {
4137 background: rgba(42, 90, 168, 0.1);
4138 outline: none;
4139}
4140.dark-phase .signin-form-preview-row:hover,
4141.dark-phase .signin-form-preview-row:focus-visible {
4142 background: rgba(255, 255, 255, 0.1);
4143}
4144.signin-form-preview-avatar {
4145 width: 36px;
4146 height: 36px;
4147 border-radius: 50%;
4148 background: linear-gradient(135deg, #c9d8f5 0%, #a8c4f0 100%);
4149 flex-shrink: 0;
4150 object-fit: cover;
4151 border: 1px solid rgba(255, 255, 255, 0.6);
4152}
4153.signin-form-preview-meta {
4154 display: flex;
4155 flex-direction: column;
4156 gap: 0.1rem;
4157 min-width: 0;
4158}
4159.signin-form-preview-name {
4160 font-weight: 600;
4161 white-space: nowrap;
4162 overflow: hidden;
4163 text-overflow: ellipsis;
4164}
4165.signin-form-preview-handle {
4166 font-size: 0.8rem;
4167 color: rgba(18, 26, 47, 0.6);
4168 white-space: nowrap;
4169 overflow: hidden;
4170 text-overflow: ellipsis;
4171}
4172.dark-phase .signin-form-preview-handle {
4173 color: rgba(255, 255, 255, 0.55);
4174}
4175.signin-form-preview-status {
4176 padding: 0.55rem 0.7rem;
4177 font-size: 0.85rem;
4178 color: rgba(18, 26, 47, 0.65);
4179 display: flex;
4180 align-items: center;
4181 gap: 0.55rem;
4182}
4183.dark-phase .signin-form-preview-status {
4184 color: rgba(255, 255, 255, 0.6);
4185}
4186.signin-form-preview-spinner {
4187 width: 14px;
4188 height: 14px;
4189 border-radius: 50%;
4190 border: 2px solid rgba(18, 26, 47, 0.25);
4191 border-top-color: rgba(18, 26, 47, 0.65);
4192 animation: signin-spin 0.7s linear infinite;
4193}
4194.dark-phase .signin-form-preview-spinner {
4195 border-color: rgba(255, 255, 255, 0.25);
4196 border-top-color: rgba(255, 255, 255, 0.7);
4197}
4198@keyframes signin-spin {
4199 to {
4200 transform: rotate(360deg);
4201 }
4202}
4203
4204/* ================================
4205 Account menu (explore-page nav rail)
4206 ================================ */
4207
4208/* Fixed rail that hangs directly under the nav, right-aligned, so the
4209 * trigger sits visually "underneath the Explore button". The 0.55rem
4210 * offset adds a small visual gap so the rail's contents don't crash
4211 * into the nav's bottom border (especially once .nav.scrolled paints
4212 * its glass background). Sits above the effects bar's z-index so the
4213 * dropdown can paint over hero text. */
4214.account-menu-rail {
4215 position: fixed;
4216 top: calc(var(--nav-bar-height) + 0.55rem);
4217 right: 1.5rem;
4218 z-index: 110;
4219 pointer-events: none;
4220}
4221
4222.account-menu-rail .account-menu {
4223 pointer-events: auto;
4224}
4225
4226/* On the explore section we hide the effects bar entirely, so the rail
4227 * tucks right up under the nav with a hairline of breathing room. */
4228.account-menu,
4229.account-menu-signin {
4230 pointer-events: auto;
4231}
4232
4233.account-menu {
4234 position: relative;
4235 display: inline-block;
4236}
4237
4238/* Signed-out variant: a text-only ghost button (same family as the
4239 * old Explore button before it was promoted to the glass style).
4240 * Sized down slightly so it sits comfortably under the Explore CTA
4241 * without competing visually. */
4242.account-menu-signin {
4243 display: inline-block;
4244 padding: 0.35rem 0.95rem;
4245 font-size: 0.8rem;
4246}
4247
4248.account-menu-trigger {
4249 display: inline-flex;
4250 align-items: center;
4251 gap: 0.4rem;
4252 padding: 0.3rem 0.55rem 0.3rem 0.35rem;
4253 border-radius: 100px;
4254 background: rgba(255, 255, 255, 0.62);
4255 border: 1px solid rgba(255, 255, 255, 0.78);
4256 backdrop-filter: blur(14px);
4257 -webkit-backdrop-filter: blur(14px);
4258 box-shadow: 0 6px 18px rgba(14, 20, 40, 0.08);
4259 cursor: pointer;
4260 color: #0e1428;
4261 font-family: "IBM Plex Mono", monospace;
4262 font-size: 0.8rem;
4263 transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
4264}
4265
4266.account-menu-trigger:hover {
4267 background: rgba(255, 255, 255, 0.82);
4268 box-shadow: 0 10px 24px rgba(14, 20, 40, 0.12);
4269}
4270.account-menu-trigger--signed-out {
4271 opacity: 0.7;
4272}
4273
4274.account-menu-trigger:focus-visible {
4275 outline: 2px solid rgba(80, 130, 220, 0.6);
4276 outline-offset: 2px;
4277}
4278
4279.account-menu-avatar {
4280 width: 30px;
4281 height: 30px;
4282 border-radius: 50%;
4283 overflow: hidden;
4284 flex-shrink: 0;
4285 background: linear-gradient(135deg, #aac6f0 0%, #7da4dc 100%);
4286 display: inline-flex;
4287 align-items: center;
4288 justify-content: center;
4289 color: #fff;
4290 font-weight: 600;
4291 font-size: 0.8rem;
4292 letter-spacing: 0;
4293 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
4294}
4295
4296.account-menu-avatar img {
4297 width: 100%;
4298 height: 100%;
4299 object-fit: cover;
4300 display: block;
4301}
4302
4303.account-menu-avatar-initial {
4304 font-family: "IBM Plex Mono", monospace;
4305 /* Anti-alias against the gradient so the letter doesn't look fuzzy */
4306 -webkit-font-smoothing: antialiased;
4307 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
4308}
4309
4310.account-menu-chevron {
4311 font-size: 0.7rem;
4312 line-height: 1;
4313 color: rgba(18, 26, 47, 0.7);
4314 transition: transform 0.15s ease;
4315}
4316
4317.account-menu-trigger[aria-expanded="true"] .account-menu-chevron {
4318 transform: rotate(180deg);
4319}
4320
4321.account-menu-popup {
4322 position: absolute;
4323 top: calc(100% + 0.55rem);
4324 right: 0;
4325 min-width: 240px;
4326 padding: 0.45rem;
4327 /* Same z-strategy as the sign-in preview: sit above hero text and
4328 * the footer regardless of any sibling stacking contexts. */
4329 z-index: 1000;
4330 isolation: isolate;
4331 /* Override the default .glass tint for higher legibility — the menu
4332 * sits over arbitrary hero gradients and we don't want the items to
4333 * disappear into the sky. */
4334}
4335.account-menu-popup.glass {
4336 background: rgba(255, 255, 255, 0.94);
4337 border: 1px solid rgba(18, 26, 47, 0.12);
4338 backdrop-filter: blur(16px);
4339 -webkit-backdrop-filter: blur(16px);
4340 border-radius: 16px;
4341 box-shadow:
4342 0 20px 50px rgba(14, 20, 40, 0.22),
4343 0 6px 16px rgba(14, 20, 40, 0.1);
4344}
4345
4346.account-menu-header {
4347 display: flex;
4348 flex-direction: column;
4349 gap: 0.1rem;
4350 padding: 0.55rem 0.7rem 0.4rem;
4351}
4352
4353.account-menu-header-label {
4354 font-size: 0.7rem;
4355 text-transform: uppercase;
4356 letter-spacing: 0.06em;
4357 color: rgba(18, 26, 47, 0.55);
4358 font-family: "IBM Plex Mono", monospace;
4359}
4360
4361.account-menu-header-handle {
4362 font-size: 0.92rem;
4363 color: #0e1428;
4364 font-weight: 600;
4365 word-break: break-all;
4366}
4367
4368.account-menu-divider {
4369 height: 1px;
4370 margin: 0.25rem 0.5rem;
4371 background: rgba(18, 26, 47, 0.1);
4372}
4373
4374.account-menu-form {
4375 margin: 0;
4376 display: contents;
4377}
4378
4379.account-menu-item {
4380 display: block;
4381 width: 100%;
4382 text-align: left;
4383 padding: 0.55rem 0.7rem;
4384 border-radius: 10px;
4385 font-size: 0.88rem;
4386 color: #0e1428;
4387 background: transparent;
4388 border: none;
4389 cursor: pointer;
4390 text-decoration: none;
4391 font-family: inherit;
4392 transition: background 0.15s ease;
4393}
4394
4395.account-menu-item:hover,
4396.account-menu-item:focus-visible {
4397 background: rgba(18, 26, 47, 0.06);
4398 outline: none;
4399}
4400
4401.account-menu-item-primary {
4402 color: #fff;
4403 background: linear-gradient(135deg, #4a7bd9 0%, #2c5db4 100%);
4404 font-weight: 600;
4405 text-align: center;
4406 margin-top: 0.25rem;
4407}
4408
4409.account-menu-item-primary:hover,
4410.account-menu-item-primary:focus-visible {
4411 background: linear-gradient(135deg, #5a8be9 0%, #3c6dc4 100%);
4412}
4413
4414.account-menu-item-danger {
4415 color: rgba(146, 32, 32, 0.95);
4416}
4417
4418.account-menu-item-danger:hover,
4419.account-menu-item-danger:focus-visible {
4420 background: rgba(146, 32, 32, 0.08);
4421}
4422
4423.account-menu-hint {
4424 margin: 0;
4425 padding: 0.6rem 0.7rem 0.45rem;
4426 font-size: 0.82rem;
4427 color: rgba(18, 26, 47, 0.7);
4428 line-height: 1.4;
4429}
4430
4431/* --- Account switcher (remembered accounts on this device) --- */
4432
4433.account-menu-section-label {
4434 padding: 0.6rem 0.7rem 0.3rem;
4435 font-size: 0.72rem;
4436 font-weight: 600;
4437 letter-spacing: 0.04em;
4438 text-transform: uppercase;
4439 color: rgba(18, 26, 47, 0.55);
4440}
4441
4442.account-menu-switch-row {
4443 display: flex;
4444 align-items: stretch;
4445 gap: 0.25rem;
4446}
4447
4448.account-menu-switch-form {
4449 flex: 1;
4450 display: contents;
4451}
4452
4453.account-menu-switch-btn {
4454 display: flex;
4455 align-items: center;
4456 gap: 0.55rem;
4457 flex: 1;
4458 padding: 0.45rem 0.7rem;
4459}
4460
4461.account-menu-switch-btn .account-menu-avatar {
4462 width: 26px;
4463 height: 26px;
4464}
4465
4466.account-menu-switch-handle {
4467 font-weight: 500;
4468 font-size: 0.85rem;
4469 white-space: nowrap;
4470 overflow: hidden;
4471 text-overflow: ellipsis;
4472}
4473
4474.account-menu-forget-form {
4475 display: flex;
4476 align-items: center;
4477}
4478
4479.account-menu-forget-btn {
4480 background: transparent;
4481 border: none;
4482 color: rgba(18, 26, 47, 0.45);
4483 font-size: 1.1rem;
4484 line-height: 1;
4485 width: 24px;
4486 height: 24px;
4487 margin-right: 0.35rem;
4488 border-radius: 6px;
4489 cursor: pointer;
4490 transition: background 0.15s ease, color 0.15s ease;
4491}
4492
4493.account-menu-forget-btn:hover,
4494.account-menu-forget-btn:focus-visible {
4495 background: rgba(146, 32, 32, 0.08);
4496 color: rgba(146, 32, 32, 0.95);
4497 outline: none;
4498}
4499
4500.account-menu-item-add {
4501 display: flex;
4502 align-items: center;
4503 gap: 0.5rem;
4504 font-size: 0.85rem;
4505 color: rgba(18, 26, 47, 0.78);
4506}
4507
4508.account-menu-add-glyph {
4509 display: inline-flex;
4510 align-items: center;
4511 justify-content: center;
4512 width: 20px;
4513 height: 20px;
4514 border-radius: 50%;
4515 background: rgba(18, 26, 47, 0.08);
4516 font-size: 0.95rem;
4517 line-height: 1;
4518}
4519
4520/* Dark-phase variants — match the sign-in preview palette so both
4521 * float on the same hero gradients without re-tinting work. */
4522.dark-phase .account-menu-trigger {
4523 color: #f3f5fb;
4524 background: rgba(22, 28, 48, 0.55);
4525 border-color: rgba(255, 255, 255, 0.22);
4526 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
4527}
4528
4529.dark-phase .account-menu-trigger:hover {
4530 background: rgba(34, 42, 68, 0.7);
4531}
4532
4533.dark-phase .account-menu-chevron {
4534 color: rgba(255, 255, 255, 0.75);
4535}
4536
4537.dark-phase .account-menu-popup.glass {
4538 background: rgba(22, 28, 48, 0.94);
4539 border-color: rgba(255, 255, 255, 0.22);
4540 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.4);
4541}
4542
4543.dark-phase .account-menu-header-label {
4544 color: rgba(255, 255, 255, 0.6);
4545}
4546
4547.dark-phase .account-menu-header-handle {
4548 color: #f3f5fb;
4549}
4550
4551.dark-phase .account-menu-divider {
4552 background: rgba(255, 255, 255, 0.12);
4553}
4554
4555.dark-phase .account-menu-item {
4556 color: #f3f5fb;
4557}
4558
4559.dark-phase .account-menu-item:hover,
4560.dark-phase .account-menu-item:focus-visible {
4561 background: rgba(255, 255, 255, 0.08);
4562}
4563
4564.dark-phase .account-menu-item-danger {
4565 color: #f4a3a3;
4566}
4567
4568.dark-phase .account-menu-item-danger:hover,
4569.dark-phase .account-menu-item-danger:focus-visible {
4570 background: rgba(244, 163, 163, 0.12);
4571}
4572
4573.dark-phase .account-menu-hint {
4574 color: rgba(255, 255, 255, 0.7);
4575}
4576
4577.dark-phase .account-menu-section-label {
4578 color: rgba(255, 255, 255, 0.55);
4579}
4580
4581.dark-phase .account-menu-forget-btn {
4582 color: rgba(255, 255, 255, 0.55);
4583}
4584
4585.dark-phase .account-menu-forget-btn:hover,
4586.dark-phase .account-menu-forget-btn:focus-visible {
4587 background: rgba(244, 163, 163, 0.18);
4588 color: #f4a3a3;
4589}
4590
4591.dark-phase .account-menu-item-add {
4592 color: rgba(255, 255, 255, 0.85);
4593}
4594
4595.dark-phase .account-menu-add-glyph {
4596 background: rgba(255, 255, 255, 0.12);
4597}
4598
4599@media (max-width: 480px) {
4600 .account-menu-rail {
4601 right: 0.85rem;
4602 }
4603 .account-menu-popup {
4604 min-width: 220px;
4605 }
4606}
4607
4608/* ================================
4609 Homepage closing CTA → /explore
4610 ================================ */
4611
4612.home-explore-cta {
4613 /* Tight under YourChoice's footnote — tighten the top padding so
4614 * the section doesn't feel orphaned, and keep generous bottom
4615 * breathing room before the footer. */
4616 padding-top: 2rem;
4617}
4618
4619.home-explore-cta-button {
4620 /* A bit chunkier than the default explore-cta-primary so it reads
4621 * as a primary CTA from a distance. */
4622 padding: 0.95rem 1.9rem;
4623 font-size: 1rem;
4624 font-weight: 600;
4625 gap: 0.6rem;
4626 box-shadow: 0 12px 30px rgba(14, 20, 40, 0.1);
4627}
4628
4629.home-explore-cta-button:hover .home-explore-cta-arrow {
4630 transform: translateX(3px);
4631}
4632
4633.home-explore-cta-arrow {
4634 transition: transform 0.18s ease;
4635}
4636
4637/* ================================
4638 Developer Resources — Profile API playground
4639 ================================ */
4640
4641/* Wrapping card matches the manage-form glass aesthetic so the page
4642 * reads as one consistent design language. */
4643.api-playground {
4644 margin-top: 1rem;
4645 padding: 1.5rem;
4646 border-radius: 20px;
4647 background: rgba(255, 255, 255, 0.55);
4648 border: 1px solid rgba(255, 255, 255, 0.6);
4649 box-shadow: 0 8px 24px rgba(14, 20, 40, 0.06);
4650 display: flex;
4651 flex-direction: column;
4652 gap: 1rem;
4653 text-align: left;
4654 /* min-width: 0 lets the inner <pre> blocks honour overflow:auto
4655 * instead of pushing the card wider than its parent (the default
4656 * min-width: auto on flex/grid items expands to fit content). */
4657 min-width: 0;
4658}
4659
4660.api-playground-tabs {
4661 display: flex;
4662 gap: 0.4rem;
4663 flex-wrap: wrap;
4664 border-bottom: 1px solid rgba(14, 20, 40, 0.08);
4665 padding-bottom: 0.6rem;
4666}
4667
4668.api-playground-tab {
4669 padding: 0.45rem 1rem;
4670 border-radius: 999px;
4671 border: 1px solid transparent;
4672 background: transparent;
4673 font: inherit;
4674 font-size: 0.85rem;
4675 color: rgba(14, 20, 40, 0.7);
4676 cursor: pointer;
4677}
4678
4679.api-playground-tab.is-active {
4680 background: rgba(42, 90, 168, 0.12);
4681 border-color: rgba(42, 90, 168, 0.28);
4682 color: #1f4f96;
4683 font-weight: 500;
4684}
4685
4686.api-playground-form {
4687 display: flex;
4688 flex-direction: column;
4689 gap: 0.85rem;
4690}
4691
4692.api-playground-grid {
4693 display: grid;
4694 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
4695 gap: 0.75rem;
4696}
4697
4698.api-playground-field {
4699 display: flex;
4700 flex-direction: column;
4701 gap: 0.3rem;
4702}
4703
4704.api-playground-label {
4705 font-size: 0.75rem;
4706 font-weight: 500;
4707 letter-spacing: 0.02em;
4708 color: rgba(14, 20, 40, 0.65);
4709 text-transform: uppercase;
4710}
4711
4712.api-playground-input {
4713 padding: 0.55rem 0.8rem;
4714 border-radius: 10px;
4715 border: 1px solid rgba(14, 20, 40, 0.14);
4716 background: rgba(255, 255, 255, 0.85);
4717 font: inherit;
4718 font-size: 0.9rem;
4719 color: #0e1428;
4720}
4721
4722.api-playground-input:focus {
4723 outline: none;
4724 border-color: rgba(42, 90, 168, 0.55);
4725 box-shadow: 0 0 0 3px rgba(42, 90, 168, 0.15);
4726}
4727
4728.api-playground-actions {
4729 display: flex;
4730 align-items: center;
4731 gap: 0.8rem;
4732 flex-wrap: wrap;
4733}
4734
4735.api-playground-fetch {
4736 padding: 0.6rem 1.4rem;
4737 border-radius: 999px;
4738 border: 0;
4739 background: #0e1428;
4740 color: #fff;
4741 font: inherit;
4742 font-weight: 500;
4743 cursor: pointer;
4744}
4745
4746.api-playground-fetch:disabled {
4747 opacity: 0.55;
4748 cursor: not-allowed;
4749}
4750
4751/* Inline preview of the resolved request URL — monospace so devs can
4752 * eyeball the query string without copying. */
4753.api-playground-url {
4754 font-family: "IBM Plex Mono", monospace;
4755 font-size: 0.8rem;
4756 color: rgba(14, 20, 40, 0.7);
4757 background: rgba(14, 20, 40, 0.05);
4758 padding: 0.3rem 0.6rem;
4759 border-radius: 8px;
4760 overflow: hidden;
4761 text-overflow: ellipsis;
4762 white-space: nowrap;
4763 max-width: 100%;
4764}
4765
4766.api-playground-response {
4767 display: flex;
4768 flex-direction: column;
4769 gap: 0.5rem;
4770 padding-top: 0.5rem;
4771 border-top: 1px solid rgba(14, 20, 40, 0.08);
4772}
4773
4774.api-playground-response-header {
4775 display: flex;
4776 align-items: center;
4777 gap: 0.6rem;
4778}
4779
4780.api-playground-status {
4781 font-family: "IBM Plex Mono", monospace;
4782 font-size: 0.8rem;
4783 padding: 0.15rem 0.55rem;
4784 border-radius: 999px;
4785 font-weight: 500;
4786}
4787
4788.api-playground-status.is-ok {
4789 background: rgba(44, 136, 84, 0.12);
4790 color: #2c8854;
4791}
4792
4793.api-playground-status.is-err {
4794 background: rgba(194, 80, 72, 0.12);
4795 color: #c25048;
4796}
4797
4798.api-playground-error {
4799 font-size: 0.85rem;
4800 color: #c25048;
4801 margin: 0;
4802}
4803
4804.api-playground-pre {
4805 margin: 0;
4806 padding: 0.85rem 1rem;
4807 border-radius: 12px;
4808 background: #0e1428;
4809 color: rgba(245, 247, 250, 0.95);
4810 font-family: "IBM Plex Mono", monospace;
4811 font-size: 0.78rem;
4812 line-height: 1.55;
4813 max-height: 360px;
4814 overflow: auto;
4815 white-space: pre;
4816 /* Prevents grid/flex parents from expanding to the longest line —
4817 * without this, a long fetch URL pushes the snippet column past
4818 * the playground card and off the page. */
4819 min-width: 0;
4820 max-width: 100%;
4821}
4822
4823.api-playground-snippets {
4824 display: grid;
4825 gap: 0.85rem;
4826 grid-template-columns: 1fr;
4827 /* Required so the inner <pre> can scroll horizontally instead of
4828 * stretching the grid past its parent. */
4829 min-width: 0;
4830}
4831
4832@media (min-width: 720px) {
4833 .api-playground-snippets {
4834 /* `minmax(0, 1fr)` keeps both columns equal-width regardless of
4835 * the longest line in either snippet (defaults to min-content
4836 * which would otherwise overflow). */
4837 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
4838 }
4839}
4840
4841.api-playground-snippet {
4842 display: flex;
4843 flex-direction: column;
4844 gap: 0.4rem;
4845 min-width: 0;
4846}
4847
4848.api-playground-snippet-header {
4849 display: flex;
4850 align-items: center;
4851 justify-content: space-between;
4852 gap: 0.5rem;
4853}
4854
4855.api-playground-copy {
4856 padding: 0.3rem 0.7rem;
4857 border-radius: 999px;
4858 border: 1px solid rgba(42, 90, 168, 0.28);
4859 background: rgba(42, 90, 168, 0.08);
4860 color: #1f4f96;
4861 font: inherit;
4862 font-size: 0.75rem;
4863 cursor: pointer;
4864}
4865
4866.api-playground-copy:hover {
4867 background: rgba(42, 90, 168, 0.16);
4868}
4869
4870/* ---- Endpoint reference ---- */
4871
4872.api-endpoints {
4873 margin: 1.25rem 0 0;
4874 display: flex;
4875 flex-direction: column;
4876 gap: 1rem;
4877}
4878
4879.api-endpoint {
4880 padding: 1rem 1.1rem;
4881 border-radius: 14px;
4882 border: 1px solid rgba(14, 20, 40, 0.08);
4883 background: rgba(255, 255, 255, 0.5);
4884 display: flex;
4885 flex-direction: column;
4886 gap: 0.4rem;
4887}
4888
4889.api-endpoint-path {
4890 display: flex;
4891 flex-wrap: wrap;
4892 align-items: center;
4893 gap: 0.5rem;
4894 margin: 0;
4895 font-family: "IBM Plex Mono", monospace;
4896 font-size: 0.85rem;
4897 color: #0e1428;
4898}
4899
4900.api-endpoint-method {
4901 display: inline-block;
4902 padding: 0.1rem 0.55rem;
4903 border-radius: 6px;
4904 background: rgba(42, 90, 168, 0.14);
4905 color: #1f4f96;
4906 font-weight: 600;
4907 font-size: 0.75rem;
4908}
4909
4910.api-endpoint-summary {
4911 margin: 0;
4912 font-size: 0.9rem;
4913 color: rgba(14, 20, 40, 0.78);
4914 line-height: 1.5;
4915}
4916
4917/* Per-card parameters block. Renders below the summary as a
4918 * "Parameters" label + indented bullet list — much easier to scan
4919 * than the previous inline `?q=&...` query-string template. */
4920.api-endpoint-params {
4921 margin: 0;
4922 display: flex;
4923 flex-direction: column;
4924 gap: 0.3rem;
4925}
4926
4927.api-endpoint-params-label {
4928 font-size: 0.7rem;
4929 font-weight: 600;
4930 letter-spacing: 0.04em;
4931 text-transform: uppercase;
4932 color: rgba(14, 20, 40, 0.55);
4933}
4934
4935.api-endpoint-params-list {
4936 margin: 0;
4937 padding-left: 1.1rem;
4938 display: flex;
4939 flex-direction: column;
4940 gap: 0.2rem;
4941 font-size: 0.85rem;
4942 color: rgba(14, 20, 40, 0.78);
4943 line-height: 1.5;
4944}
4945
4946.api-endpoint-param-name {
4947 font-family: "IBM Plex Mono", monospace;
4948 font-size: 0.8rem;
4949 color: #1f4f96;
4950}
4951
4952.api-endpoint-param-default {
4953 color: rgba(14, 20, 40, 0.55);
4954 font-size: 0.8rem;
4955}
4956
4957.api-endpoint-param-default code {
4958 font-family: "IBM Plex Mono", monospace;
4959}
4960
4961.api-endpoint-cache {
4962 margin: 0;
4963 font-size: 0.75rem;
4964 color: rgba(14, 20, 40, 0.55);
4965}
4966
4967.api-endpoint-cache code {
4968 font-family: "IBM Plex Mono", monospace;
4969}
4970
4971/* Sub-section headings inside the Profile API panel (Endpoints,
4972 * Schema). Centred to match the page's other section headers, with
4973 * generous top spacing so the divider feels intentional rather than
4974 * crammed against the preceding card. */
4975.api-section-heading {
4976 margin: 3rem 0 1.25rem;
4977 text-align: center;
4978}
4979
4980.api-section-heading .divider {
4981 margin-top: 0.6rem;
4982}
4983
4984/* ---- Project SVG icon download tool ---- */
4985
4986.svg-download-tool {
4987 margin-top: 1rem;
4988 padding: 1.5rem;
4989 border-radius: 20px;
4990 background: rgba(255, 255, 255, 0.55);
4991 border: 1px solid rgba(255, 255, 255, 0.6);
4992 box-shadow: 0 8px 24px rgba(14, 20, 40, 0.06);
4993 text-align: left;
4994}
4995
4996.svg-download-toolbar {
4997 display: flex;
4998 gap: 0.85rem;
4999 align-items: end;
5000 justify-content: space-between;
5001 flex-wrap: wrap;
5002}
5003
5004.svg-download-search {
5005 flex: 1 1 240px;
5006}
5007
5008.svg-download-zip {
5009 min-height: 2.4rem;
5010}
5011
5012/* Color / B/W toggle. Sits between the search input and the ZIP
5013 button so the toolbar reads search → variant → bulk-download. */
5014.svg-download-tabs {
5015 display: inline-flex;
5016 align-items: stretch;
5017 padding: 3px;
5018 border-radius: 999px;
5019 background: rgba(14, 20, 40, 0.06);
5020 border: 1px solid rgba(14, 20, 40, 0.08);
5021}
5022.svg-download-tab {
5023 appearance: none;
5024 border: 0;
5025 background: transparent;
5026 color: rgba(14, 20, 40, 0.7);
5027 font-family: "IBM Plex Mono", monospace;
5028 font-size: 0.78rem;
5029 letter-spacing: 0.03em;
5030 padding: 0.35rem 0.85rem;
5031 border-radius: 999px;
5032 cursor: pointer;
5033 transition: background 120ms ease, color 120ms ease;
5034}
5035.svg-download-tab:hover {
5036 color: #0e1428;
5037}
5038.svg-download-tab.is-active {
5039 background: rgba(255, 255, 255, 0.95);
5040 color: #0e1428;
5041 box-shadow: 0 1px 2px rgba(14, 20, 40, 0.08);
5042}
5043.dark-phase .svg-download-tabs {
5044 background: rgba(255, 255, 255, 0.06);
5045 border-color: rgba(255, 255, 255, 0.1);
5046}
5047.dark-phase .svg-download-tab {
5048 color: rgba(255, 255, 255, 0.7);
5049}
5050.dark-phase .svg-download-tab:hover {
5051 color: #fff;
5052}
5053.dark-phase .svg-download-tab.is-active {
5054 background: rgba(255, 255, 255, 0.16);
5055 color: #fff;
5056 box-shadow: none;
5057}
5058
5059.svg-download-meta {
5060 margin-top: 0.9rem;
5061 font-size: 0.82rem;
5062 color: rgba(14, 20, 40, 0.62);
5063}
5064
5065.svg-download-empty {
5066 margin: 1rem 0 0;
5067}
5068
5069.svg-download-grid {
5070 margin-top: 1rem;
5071 display: grid;
5072 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
5073 gap: 0.85rem;
5074}
5075
5076.svg-download-card {
5077 display: flex;
5078 flex-direction: column;
5079 gap: 0.7rem;
5080 padding: 1rem;
5081 border-radius: 16px;
5082 border: 1px solid rgba(14, 20, 40, 0.08);
5083 background: rgba(255, 255, 255, 0.58);
5084}
5085
5086.svg-download-preview {
5087 display: grid;
5088 place-items: center;
5089 min-height: 96px;
5090 border-radius: 12px;
5091 background:
5092 linear-gradient(45deg, rgba(14, 20, 40, 0.04) 25%, transparent 25%),
5093 linear-gradient(-45deg, rgba(14, 20, 40, 0.04) 25%, transparent 25%),
5094 linear-gradient(45deg, transparent 75%, rgba(14, 20, 40, 0.04) 75%),
5095 linear-gradient(-45deg, transparent 75%, rgba(14, 20, 40, 0.04) 75%);
5096 background-position: 0 0, 0 8px, 8px -8px, -8px 0;
5097 background-size: 16px 16px;
5098}
5099
5100.svg-download-preview img {
5101 max-width: 72px;
5102 max-height: 72px;
5103 object-fit: contain;
5104}
5105
5106/* When showing the B/W variant we paint the preview tile white so a
5107 pure-black mark remains legible regardless of the page theme. The
5108 downloaded SVG itself is unmodified — this is preview-only chrome. */
5109.svg-download-preview--bw {
5110 background: #ffffff;
5111 border: 1px solid rgba(14, 20, 40, 0.08);
5112}
5113.dark-phase .svg-download-preview--bw {
5114 background: #ffffff;
5115 border-color: rgba(255, 255, 255, 0.18);
5116}
5117
5118.svg-download-details {
5119 min-width: 0;
5120}
5121
5122.svg-download-name {
5123 margin: 0;
5124 font-family: "IBM Plex Mono", monospace;
5125 font-size: 0.92rem;
5126 color: #0e1428;
5127 overflow: hidden;
5128 text-overflow: ellipsis;
5129 white-space: nowrap;
5130}
5131
5132.svg-download-handle {
5133 margin: 0.15rem 0 0;
5134 font-size: 0.78rem;
5135 color: rgba(14, 20, 40, 0.6);
5136 overflow: hidden;
5137 text-overflow: ellipsis;
5138 white-space: nowrap;
5139}
5140
5141.svg-download-button {
5142 width: 100%;
5143}
5144
5145/* Dark phase — keep the playground readable when the sky is in its
5146 * darker pass. The /developer-resources page forces sky-static today
5147 * (effectsOff allowlist), but mobile and reduced-motion users may
5148 * still hit the dark phase, so we cover the cases. */
5149.dark-phase .api-playground {
5150 background: rgba(20, 26, 48, 0.55);
5151 border-color: rgba(255, 255, 255, 0.12);
5152}
5153.dark-phase .svg-download-tool,
5154.dark-phase .svg-download-card {
5155 background: rgba(20, 26, 48, 0.55);
5156 border-color: rgba(255, 255, 255, 0.12);
5157}
5158.dark-phase .api-playground-tab {
5159 color: rgba(245, 247, 250, 0.7);
5160}
5161.dark-phase .api-playground-tab.is-active {
5162 background: rgba(150, 180, 240, 0.18);
5163 color: #cfdfff;
5164 border-color: rgba(150, 180, 240, 0.32);
5165}
5166.dark-phase .api-playground-input {
5167 background: rgba(20, 26, 48, 0.6);
5168 border-color: rgba(255, 255, 255, 0.18);
5169 color: rgba(245, 247, 250, 0.95);
5170}
5171.dark-phase .api-playground-fetch {
5172 background: rgba(245, 247, 250, 0.92);
5173 color: #0e1428;
5174}
5175.dark-phase .api-endpoint {
5176 background: rgba(20, 26, 48, 0.45);
5177 border-color: rgba(255, 255, 255, 0.12);
5178}
5179.dark-phase .api-endpoint-summary,
5180.dark-phase .api-endpoint-cache,
5181.dark-phase .api-endpoint-params-list,
5182.dark-phase .svg-download-meta,
5183.dark-phase .svg-download-handle {
5184 color: rgba(245, 247, 250, 0.78);
5185}
5186.dark-phase .api-endpoint-path,
5187.dark-phase .svg-download-name {
5188 color: rgba(245, 247, 250, 0.95);
5189}
5190.dark-phase .api-endpoint-params-label,
5191.dark-phase .api-endpoint-param-default {
5192 color: rgba(245, 247, 250, 0.6);
5193}
5194.dark-phase .api-endpoint-param-name {
5195 color: #cfdfff;
5196}
5197
5198/* ================================================================== *
5199 * Admin dashboard + moderation UI
5200 * ================================================================== */
5201
5202.admin-section {
5203 padding: 7rem 0 4rem;
5204}
5205.admin-header {
5206 margin-bottom: 2rem;
5207}
5208.admin-header h1 {
5209 margin: 0;
5210}
5211.admin-grid {
5212 display: grid;
5213 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
5214 gap: 1.25rem;
5215 margin-top: 1rem;
5216}
5217.admin-card {
5218 display: block;
5219 padding: 1.25rem 1.4rem;
5220 border-radius: 1rem;
5221 background: rgba(255, 255, 255, 0.55);
5222 border: 1px solid rgba(18, 26, 47, 0.08);
5223 text-decoration: none;
5224 color: inherit;
5225 transition: transform 0.15s ease, box-shadow 0.15s ease;
5226}
5227.admin-card:hover {
5228 transform: translateY(-2px);
5229 box-shadow: 0 8px 24px rgba(8, 14, 31, 0.08);
5230}
5231.admin-card-count {
5232 font-size: 2rem;
5233 font-weight: 700;
5234 margin: 0;
5235 line-height: 1;
5236}
5237.admin-card-title {
5238 margin: 0.5rem 0 0.25rem;
5239 font-size: 1rem;
5240 font-weight: 600;
5241}
5242.admin-card-body {
5243 margin: 0;
5244 font-size: 0.85rem;
5245 color: rgba(18, 26, 47, 0.65);
5246}
5247.dark-phase .admin-card {
5248 background: rgba(255, 255, 255, 0.05);
5249 border-color: rgba(255, 255, 255, 0.1);
5250}
5251.dark-phase .admin-card-body {
5252 color: rgba(255, 255, 255, 0.7);
5253}
5254.admin-empty {
5255 margin-top: 2rem;
5256 font-style: italic;
5257 color: rgba(18, 26, 47, 0.55);
5258}
5259.dark-phase .admin-empty {
5260 color: rgba(255, 255, 255, 0.55);
5261}
5262
5263/* --- Pending icon review rows ------------------------------------- */
5264.admin-icon-list {
5265 display: flex;
5266 flex-direction: column;
5267 gap: 1rem;
5268 margin-top: 1.5rem;
5269}
5270.admin-icon-row {
5271 display: grid;
5272 grid-template-columns: 96px minmax(0, 1fr) auto;
5273 gap: 1.2rem;
5274 align-items: center;
5275 padding: 1rem 1.2rem;
5276 border-radius: 1rem;
5277 background: rgba(255, 255, 255, 0.55);
5278 border: 1px solid rgba(18, 26, 47, 0.08);
5279}
5280.admin-icon-row--done {
5281 display: flex;
5282 align-items: center;
5283 gap: 0.75rem;
5284 opacity: 0.65;
5285}
5286.admin-icon-row-preview {
5287 width: 96px;
5288 height: 96px;
5289 border-radius: 12px;
5290 background: rgba(255, 255, 255, 0.6);
5291 border: 1px solid rgba(18, 26, 47, 0.08);
5292 display: flex;
5293 align-items: center;
5294 justify-content: center;
5295}
5296.admin-icon-row-img {
5297 width: 100%;
5298 height: 100%;
5299 object-fit: contain;
5300 padding: 8px;
5301}
5302.admin-icon-row-meta {
5303 min-width: 0;
5304}
5305.admin-icon-row-name {
5306 margin: 0;
5307 font-size: 1rem;
5308 display: flex;
5309 gap: 0.6rem;
5310 align-items: baseline;
5311 flex-wrap: wrap;
5312}
5313.admin-icon-row-handle {
5314 color: rgba(18, 26, 47, 0.55);
5315 font-size: 0.85rem;
5316}
5317.admin-icon-row-did {
5318 margin: 0.25rem 0;
5319 font-size: 0.75rem;
5320 color: rgba(18, 26, 47, 0.55);
5321 word-break: break-all;
5322}
5323.admin-icon-row-uploaded {
5324 margin: 0;
5325 font-size: 0.75rem;
5326 color: rgba(18, 26, 47, 0.55);
5327}
5328.admin-icon-row-actions {
5329 display: flex;
5330 flex-direction: column;
5331 gap: 0.5rem;
5332 align-items: flex-end;
5333 min-width: 200px;
5334}
5335.admin-icon-reject {
5336 display: flex;
5337 flex-direction: column;
5338 gap: 0.5rem;
5339 width: 280px;
5340 max-width: 100%;
5341}
5342.admin-icon-reject-label {
5343 font-size: 0.8rem;
5344 color: rgba(18, 26, 47, 0.7);
5345 display: flex;
5346 flex-direction: column;
5347 gap: 0.4rem;
5348}
5349.admin-icon-reject-input {
5350 width: 100%;
5351 border: 1px solid rgba(18, 26, 47, 0.15);
5352 border-radius: 0.5rem;
5353 padding: 0.5rem 0.6rem;
5354 font: inherit;
5355 background: rgba(255, 255, 255, 0.95);
5356 resize: vertical;
5357}
5358.admin-icon-reject-actions {
5359 display: flex;
5360 gap: 0.5rem;
5361 align-items: center;
5362}
5363.admin-icon-row-error {
5364 margin: 0;
5365 font-size: 0.75rem;
5366 color: #c25048;
5367}
5368.dark-phase .admin-icon-row {
5369 background: rgba(255, 255, 255, 0.05);
5370 border-color: rgba(255, 255, 255, 0.1);
5371}
5372.dark-phase .admin-icon-row-handle,
5373.dark-phase .admin-icon-row-did,
5374.dark-phase .admin-icon-row-uploaded {
5375 color: rgba(255, 255, 255, 0.6);
5376}
5377.dark-phase .admin-icon-row-preview {
5378 background: rgba(255, 255, 255, 0.06);
5379 border-color: rgba(255, 255, 255, 0.1);
5380}
5381.dark-phase .admin-icon-reject-input {
5382 background: rgba(255, 255, 255, 0.06);
5383 color: rgba(255, 255, 255, 0.95);
5384 border-color: rgba(255, 255, 255, 0.18);
5385}
5386
5387/* --- Status pills ------------------------------------------------- */
5388.admin-status-badge {
5389 display: inline-block;
5390 padding: 0.15rem 0.55rem;
5391 border-radius: 999px;
5392 font-size: 0.7rem;
5393 font-weight: 600;
5394 letter-spacing: 0.02em;
5395}
5396.admin-status-badge--pending {
5397 background: rgba(255, 197, 99, 0.2);
5398 color: #8a5a00;
5399}
5400.admin-status-badge--approved {
5401 background: rgba(70, 196, 142, 0.2);
5402 color: #1f7a4e;
5403}
5404.admin-status-badge--rejected {
5405 background: rgba(217, 104, 96, 0.2);
5406 color: #b1453d;
5407}
5408.dark-phase .admin-status-badge--pending {
5409 color: #ffd791;
5410}
5411.dark-phase .admin-status-badge--approved {
5412 color: #8be0b3;
5413}
5414.dark-phase .admin-status-badge--rejected {
5415 color: #ffaca6;
5416}
5417
5418/* --- Per-project SVG verification gate (manage form) ------------- */
5419/**
5420 * Banner that explains the current verification state above the SVG
5421 * uploader. Color reflects state: neutral grey for locked, amber for
5422 * pending review, soft red for denied, no banner for granted.
5423 */
5424.icon-gate-banner {
5425 display: flex;
5426 flex-direction: column;
5427 gap: 0.4rem;
5428 align-items: flex-start;
5429 padding: 0.85rem 1rem;
5430 border-radius: 0.85rem;
5431 font-size: 0.82rem;
5432 margin: 0 0 0.85rem;
5433 line-height: 1.45;
5434}
5435.icon-gate-banner-title {
5436 font-size: 0.9rem;
5437 font-weight: 700;
5438}
5439.icon-gate-banner-body {
5440 display: block;
5441}
5442.icon-gate-banner-hint {
5443 font-size: 0.75rem;
5444 opacity: 0.7;
5445}
5446.icon-gate-button {
5447 margin-top: 0.25rem;
5448 align-self: flex-start;
5449}
5450.icon-gate-banner--locked {
5451 background: rgba(99, 113, 145, 0.1);
5452 border: 1px solid rgba(99, 113, 145, 0.3);
5453 color: rgba(38, 50, 78, 0.95);
5454}
5455.icon-gate-banner--pending {
5456 background: rgba(255, 197, 99, 0.15);
5457 border: 1px solid rgba(255, 197, 99, 0.4);
5458 color: #6c4500;
5459}
5460.icon-gate-banner--denied {
5461 background: rgba(217, 104, 96, 0.12);
5462 border: 1px solid rgba(217, 104, 96, 0.4);
5463 color: #8a3a34;
5464}
5465.icon-gate-granted-hint {
5466 color: rgba(11, 110, 79, 0.95);
5467}
5468.dark-phase .icon-gate-banner--locked {
5469 background: rgba(255, 255, 255, 0.04);
5470 border-color: rgba(255, 255, 255, 0.12);
5471 color: rgba(255, 255, 255, 0.85);
5472}
5473.dark-phase .icon-gate-banner--pending {
5474 color: #ffd791;
5475 background: rgba(255, 197, 99, 0.1);
5476}
5477.dark-phase .icon-gate-banner--denied {
5478 color: #ffb1ab;
5479 background: rgba(217, 104, 96, 0.12);
5480}
5481.dark-phase .icon-gate-granted-hint {
5482 color: #8be0b3;
5483}
5484
5485/**
5486 * Greyed-out uploader when verification hasn't been granted. We keep
5487 * the slot visible (so the user understands what they're requesting
5488 * access to) but visibly inert.
5489 */
5490.profile-form-icon-row.is-locked {
5491 opacity: 0.45;
5492 pointer-events: none;
5493 filter: saturate(0.5);
5494}
5495.profile-form-button-secondary.is-disabled,
5496.profile-form-button-secondary.is-disabled:hover {
5497 opacity: 0.55;
5498 cursor: not-allowed;
5499 background: transparent;
5500}
5501
5502/* --- Verification request modal --------------------------------- */
5503.icon-access-modal {
5504 width: min(460px, 100%);
5505}
5506.modal-actions {
5507 display: flex;
5508 align-items: center;
5509 gap: 0.85rem;
5510 flex-wrap: wrap;
5511}
5512
5513/* ================================================================== *
5514 * Reports — admin queue + user-facing button/modal
5515 * ================================================================== */
5516
5517.admin-report-list {
5518 display: flex;
5519 flex-direction: column;
5520 gap: 1rem;
5521 margin-top: 1.5rem;
5522}
5523.admin-report-row {
5524 padding: 1rem 1.2rem;
5525 border-radius: 1rem;
5526 background: rgba(255, 255, 255, 0.55);
5527 border: 1px solid rgba(18, 26, 47, 0.08);
5528 display: flex;
5529 flex-direction: column;
5530 gap: 0.6rem;
5531}
5532.admin-report-row--done {
5533 opacity: 0.55;
5534}
5535.admin-report-meta {
5536 display: flex;
5537 flex-wrap: wrap;
5538 gap: 0.6rem 1.2rem;
5539 font-size: 0.8rem;
5540 color: rgba(18, 26, 47, 0.7);
5541}
5542.admin-report-meta strong {
5543 color: rgba(18, 26, 47, 0.95);
5544}
5545.admin-report-details {
5546 margin: 0;
5547 font-size: 0.85rem;
5548 white-space: pre-wrap;
5549}
5550.admin-report-actions {
5551 display: flex;
5552 flex-wrap: wrap;
5553 gap: 0.5rem;
5554 align-items: center;
5555}
5556.admin-report-notes-input {
5557 flex: 1 1 200px;
5558 border: 1px solid rgba(18, 26, 47, 0.15);
5559 border-radius: 0.5rem;
5560 padding: 0.5rem 0.6rem;
5561 font: inherit;
5562 background: rgba(255, 255, 255, 0.95);
5563}
5564.dark-phase .admin-report-row {
5565 background: rgba(255, 255, 255, 0.05);
5566 border-color: rgba(255, 255, 255, 0.1);
5567}
5568.dark-phase .admin-report-meta {
5569 color: rgba(255, 255, 255, 0.65);
5570}
5571.dark-phase .admin-report-meta strong {
5572 color: rgba(255, 255, 255, 0.95);
5573}
5574.dark-phase .admin-report-notes-input {
5575 background: rgba(255, 255, 255, 0.06);
5576 color: rgba(255, 255, 255, 0.95);
5577 border-color: rgba(255, 255, 255, 0.18);
5578}
5579
5580/* User-facing report button (under the profile hero) */
5581.profile-report-row {
5582 margin-top: 1.5rem;
5583 display: flex;
5584 justify-content: flex-end;
5585}
5586.profile-report-button {
5587 background: transparent;
5588 border: 1px solid rgba(18, 26, 47, 0.18);
5589 color: rgba(18, 26, 47, 0.65);
5590 border-radius: 999px;
5591 padding: 0.45rem 0.95rem;
5592 font: inherit;
5593 font-size: 0.8rem;
5594 cursor: pointer;
5595}
5596.profile-report-button:hover {
5597 color: #c25048;
5598 border-color: rgba(217, 104, 96, 0.5);
5599}
5600.dark-phase .profile-report-button {
5601 border-color: rgba(255, 255, 255, 0.18);
5602 color: rgba(255, 255, 255, 0.65);
5603}
5604.profile-reviews-shell {
5605 display: flex;
5606 flex-direction: column;
5607 gap: 0.75rem;
5608 margin-top: 1rem;
5609}
5610.profile-whats-new {
5611 margin-top: 1rem;
5612 padding: 0.95rem 1rem;
5613 border-radius: 1.2rem;
5614}
5615.profile-whats-new-main {
5616 display: flex;
5617 justify-content: space-between;
5618 align-items: flex-start;
5619 gap: 1rem;
5620}
5621.profile-whats-new-copy {
5622 min-width: 0;
5623}
5624.profile-whats-new-heading-row {
5625 display: flex;
5626 align-items: center;
5627 justify-content: space-between;
5628 gap: 0.75rem;
5629}
5630.profile-whats-new h2,
5631.profile-whats-new h3,
5632.profile-whats-new h4,
5633.profile-whats-new p {
5634 margin: 0;
5635}
5636.profile-card-section-title {
5637 margin: 0;
5638 font-size: 1rem;
5639 font-weight: 800;
5640 letter-spacing: 0;
5641 line-height: 1.25;
5642 text-transform: none;
5643 color: rgba(18, 26, 47, 0.92);
5644}
5645.profile-whats-new-title {
5646 margin-top: 0.25rem;
5647 font-size: clamp(1rem, 1.8vw, 1.2rem);
5648 font-weight: 750;
5649 line-height: 1.3;
5650}
5651.profile-whats-new-body,
5652.profile-whats-new-preview,
5653.profile-whats-new-full {
5654 margin-top: 0.45rem;
5655 color: rgba(18, 26, 47, 0.76);
5656 white-space: pre-wrap;
5657 font-size: 0.9rem;
5658 line-height: 1.55;
5659}
5660.profile-whats-new-expand {
5661 display: flex;
5662 flex-direction: column;
5663}
5664.profile-whats-new-expand:has(.profile-whats-new-details[open])
5665 .profile-whats-new-preview {
5666 display: none;
5667}
5668.profile-whats-new-details summary {
5669 align-self: flex-start;
5670 margin-top: 0.55rem;
5671 list-style: none;
5672 color: #254a9e;
5673 font-size: 0.82rem;
5674 font-weight: 750;
5675 cursor: pointer;
5676}
5677.profile-whats-new-details summary::-webkit-details-marker {
5678 display: none;
5679}
5680.profile-whats-new-preview {
5681 display: -webkit-box;
5682 overflow: hidden;
5683 -webkit-box-orient: vertical;
5684 -webkit-line-clamp: 2;
5685 white-space: normal;
5686}
5687.profile-whats-new-empty {
5688 color: rgba(18, 26, 47, 0.62);
5689}
5690.profile-whats-new-meta {
5691 display: flex;
5692 flex-wrap: wrap;
5693 gap: 0.45rem;
5694 font-size: 0.78rem;
5695 font-weight: 750;
5696 color: rgba(18, 26, 47, 0.58);
5697}
5698.profile-whats-new-icon-button,
5699.profile-whats-new-history-button,
5700.profile-version-history-commit {
5701 flex: 0 0 auto;
5702 display: inline-flex;
5703 align-items: center;
5704 justify-content: center;
5705 font: inherit;
5706 text-decoration: none;
5707 color: #254a9e;
5708 border: 1px solid rgba(18, 26, 47, 0.12);
5709 background: rgba(255, 255, 255, 0.6);
5710 border-radius: 999px;
5711}
5712.profile-whats-new-icon-button,
5713.profile-whats-new-history-button {
5714 width: 2.15rem;
5715 height: 2.15rem;
5716}
5717.profile-whats-new-icon-button {
5718 position: relative;
5719}
5720.profile-whats-new-history-button {
5721 cursor: pointer;
5722 font-size: 1rem;
5723}
5724.profile-whats-new-icon-button:hover,
5725.profile-whats-new-history-button:hover,
5726.profile-version-history-commit:hover {
5727 background: rgba(255, 255, 255, 0.86);
5728 border-color: rgba(42, 90, 168, 0.3);
5729}
5730.profile-whats-new-icon {
5731 width: 1.15rem;
5732 height: 1.15rem;
5733}
5734.profile-whats-new-icon-arrow {
5735 position: absolute;
5736 right: 0.25rem;
5737 top: 0.18rem;
5738 font-size: 0.62rem;
5739 line-height: 1;
5740}
5741.profile-version-history-modal {
5742 max-width: 640px;
5743}
5744.profile-version-history-list {
5745 display: flex;
5746 flex-direction: column;
5747 gap: 0;
5748 margin-top: 0.75rem;
5749}
5750.profile-version-history-item {
5751 padding: 0.85rem 0;
5752 border-top: 1px solid rgba(18, 26, 47, 0.08);
5753}
5754.profile-version-history-item:first-of-type {
5755 border-top: 0;
5756 padding-top: 0;
5757}
5758.profile-version-history-item h3 {
5759 margin-top: 0.2rem;
5760 font-size: 0.98rem;
5761}
5762.profile-version-history-item p {
5763 margin-top: 0.25rem;
5764 color: rgba(18, 26, 47, 0.7);
5765 white-space: pre-wrap;
5766 font-size: 0.88rem;
5767}
5768.profile-version-history-commit {
5769 gap: 0.25rem;
5770 margin-top: 0.55rem;
5771 padding: 0.32rem 0.55rem;
5772}
5773.profile-reviews-summary,
5774.profile-reviews-panel,
5775.profile-review-card {
5776 padding: 1rem;
5777 border-radius: 1.2rem;
5778}
5779.profile-reviews-summary.glass,
5780.profile-reviews-panel.glass,
5781.profile-review-card.glass {
5782 background: rgba(255, 255, 255, 0.58);
5783 border-color: rgba(18, 26, 47, 0.08);
5784}
5785.profile-reviews-summary {
5786 display: grid;
5787 grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
5788 gap: 1.2rem;
5789 align-items: center;
5790}
5791.profile-reviews-average {
5792 margin: 0.3rem 0 0;
5793 font-size: clamp(1.15rem, 2.1vw, 1.55rem);
5794 font-weight: 850;
5795}
5796.profile-reviews-average span,
5797.profile-review-stars {
5798 color: #d89a23;
5799}
5800.profile-reviews-threshold {
5801 margin: 0.25rem 0 0;
5802 color: rgba(18, 26, 47, 0.68);
5803}
5804.profile-rating-distribution {
5805 display: flex;
5806 flex-direction: column;
5807 gap: 0.35rem;
5808}
5809.profile-rating-row {
5810 display: grid;
5811 grid-template-columns: 2.4rem 1fr 2rem;
5812 gap: 0.5rem;
5813 align-items: center;
5814 font-size: 0.8rem;
5815 color: rgba(18, 26, 47, 0.68);
5816}
5817.profile-rating-bar {
5818 height: 0.45rem;
5819 overflow: hidden;
5820 border-radius: 999px;
5821 background: rgba(18, 26, 47, 0.1);
5822}
5823.profile-rating-bar span {
5824 display: block;
5825 height: 100%;
5826 border-radius: inherit;
5827 background: linear-gradient(90deg, #d89a23, #f2c75c);
5828}
5829.profile-reviews-panel-header {
5830 display: flex;
5831 flex-wrap: wrap;
5832 align-items: center;
5833 justify-content: space-between;
5834 gap: 0.75rem;
5835 margin-bottom: 0.75rem;
5836 padding-bottom: 0.75rem;
5837 border-bottom: 1px solid rgba(18, 26, 47, 0.08);
5838}
5839.profile-review-action-row {
5840 display: flex;
5841 flex-wrap: wrap;
5842 justify-content: flex-end;
5843 align-items: center;
5844 gap: 0.75rem;
5845}
5846.profile-review-write-button {
5847 display: inline-flex;
5848 align-items: center;
5849 gap: 0.45rem;
5850}
5851.profile-review-write-icon {
5852 font-size: 1rem;
5853 line-height: 1;
5854}
5855.profile-review-action-hint,
5856.profile-review-owner-note {
5857 margin: 0;
5858 font-size: 0.88rem;
5859 color: rgba(18, 26, 47, 0.62);
5860}
5861.profile-review-rating-field {
5862 display: flex;
5863 gap: 0.2rem;
5864 margin: 0 0 0.85rem;
5865 padding: 0;
5866 border: 0;
5867}
5868.profile-review-rating-field legend,
5869.profile-review-body-field span {
5870 display: block;
5871 margin-bottom: 0.4rem;
5872 font-size: 0.82rem;
5873 font-weight: 750;
5874 color: rgba(18, 26, 47, 0.7);
5875}
5876.profile-review-star {
5877 background: none;
5878 border: 0;
5879 color: rgba(18, 26, 47, 0.22);
5880 cursor: pointer;
5881 font-size: 1.8rem;
5882 line-height: 1;
5883 padding: 0 0.1rem;
5884}
5885.profile-review-star.is-active {
5886 color: #d89a23;
5887}
5888.profile-review-body-field textarea,
5889.profile-review-response-composer textarea {
5890 width: 100%;
5891 min-height: 5.5rem;
5892 resize: vertical;
5893 border: 1px solid rgba(18, 26, 47, 0.14);
5894 border-radius: 0.9rem;
5895 padding: 0.8rem;
5896 background: rgba(255, 255, 255, 0.92);
5897 color: inherit;
5898 font: inherit;
5899}
5900.profile-review-char-count {
5901 margin: 0.35rem 0 0;
5902 text-align: right;
5903 font-size: 0.78rem;
5904 color: rgba(18, 26, 47, 0.55);
5905}
5906.profile-review-composer-actions {
5907 display: flex;
5908 flex-wrap: wrap;
5909 gap: 0.65rem;
5910 justify-content: flex-end;
5911 margin-top: 0.85rem;
5912}
5913.profile-review-cards {
5914 display: flex;
5915 flex-direction: column;
5916 gap: 0.65rem;
5917}
5918.profile-review-card {
5919 background: rgba(255, 255, 255, 0.46);
5920 border: 1px solid rgba(18, 26, 47, 0.07);
5921 box-shadow: none;
5922}
5923.profile-reviews-empty {
5924 margin-top: 0.25rem;
5925}
5926.profile-review-header {
5927 display: flex;
5928 justify-content: space-between;
5929 gap: 1rem;
5930 align-items: flex-start;
5931}
5932.profile-review-author-row {
5933 display: flex;
5934 gap: 0.65rem;
5935 align-items: flex-start;
5936 color: inherit;
5937 text-decoration: none;
5938}
5939.profile-review-avatar {
5940 display: inline-flex;
5941 flex: 0 0 auto;
5942 align-items: center;
5943 justify-content: center;
5944 width: 2.35rem;
5945 height: 2.35rem;
5946 overflow: hidden;
5947 border-radius: 999px;
5948 background: rgba(18, 26, 47, 0.1);
5949 color: rgba(18, 26, 47, 0.68);
5950 font-size: 0.9rem;
5951 font-weight: 850;
5952}
5953.profile-review-avatar img {
5954 width: 100%;
5955 height: 100%;
5956 object-fit: cover;
5957}
5958.profile-review-author,
5959.profile-review-date,
5960.profile-review-body,
5961.profile-review-stars {
5962 margin: 0;
5963}
5964.profile-review-author {
5965 font-weight: 800;
5966}
5967.profile-review-handle {
5968 margin: 0.1rem 0 0;
5969 font-size: 0.78rem;
5970 color: rgba(18, 26, 47, 0.55);
5971}
5972.profile-review-date {
5973 margin-top: 0.15rem;
5974 font-size: 0.78rem;
5975 color: rgba(18, 26, 47, 0.55);
5976}
5977.profile-review-stars {
5978 flex: 0 0 auto;
5979 letter-spacing: 0.05em;
5980}
5981.profile-review-stars span {
5982 color: rgba(18, 26, 47, 0.24);
5983}
5984.profile-review-body {
5985 margin-top: 0.75rem;
5986 padding-top: 0.75rem;
5987 border-top: 1px solid rgba(18, 26, 47, 0.07);
5988 white-space: pre-wrap;
5989 font-size: 0.92rem;
5990 line-height: 1.55;
5991}
5992.profile-review-response {
5993 margin-top: 0.9rem;
5994 border-left: 3px solid rgba(18, 26, 47, 0.18);
5995 padding: 0.1rem 0 0.1rem 0.85rem;
5996}
5997.profile-review-response p {
5998 margin: 0.2rem 0 0;
5999}
6000.profile-review-response-label {
6001 font-size: 0.78rem;
6002 font-weight: 850;
6003 letter-spacing: 0.04em;
6004 text-transform: uppercase;
6005 color: rgba(18, 26, 47, 0.58);
6006}
6007.profile-review-response-toggle,
6008.profile-review-report-button {
6009 margin-top: 0.9rem;
6010}
6011.profile-review-report-button {
6012 display: inline-flex;
6013}
6014.profile-review-response-composer {
6015 margin-top: 0.9rem;
6016}
6017.dark-phase .profile-review-rating-field legend,
6018.dark-phase .profile-review-body-field span,
6019.dark-phase .profile-review-response-label {
6020 color: rgba(255, 255, 255, 0.65);
6021}
6022.dark-phase .profile-card-section-title {
6023 color: rgba(255, 255, 255, 0.92);
6024}
6025.dark-phase .profile-reviews-summary.glass,
6026.dark-phase .profile-reviews-panel.glass,
6027.dark-phase .profile-review-card.glass {
6028 background: rgba(255, 255, 255, 0.08);
6029 border-color: rgba(255, 255, 255, 0.13);
6030}
6031.dark-phase .profile-reviews-threshold,
6032.dark-phase .profile-whats-new-empty,
6033.dark-phase .profile-whats-new-body,
6034.dark-phase .profile-whats-new-preview,
6035.dark-phase .profile-whats-new-full,
6036.dark-phase .profile-version-history-item p,
6037.dark-phase .profile-whats-new-meta,
6038.dark-phase .profile-rating-row,
6039.dark-phase .profile-review-handle,
6040.dark-phase .profile-review-date,
6041.dark-phase .profile-review-char-count,
6042.dark-phase .profile-review-action-hint,
6043.dark-phase .profile-review-owner-note {
6044 color: rgba(255, 255, 255, 0.58);
6045}
6046.dark-phase .profile-rating-bar {
6047 background: rgba(255, 255, 255, 0.12);
6048}
6049.dark-phase .profile-reviews-panel-header,
6050.dark-phase .profile-review-body {
6051 border-color: rgba(255, 255, 255, 0.1);
6052}
6053.dark-phase .profile-review-star {
6054 color: rgba(255, 255, 255, 0.22);
6055}
6056.dark-phase .profile-review-star.is-active {
6057 color: #f2c75c;
6058}
6059.dark-phase .profile-review-stars span {
6060 color: rgba(255, 255, 255, 0.25);
6061}
6062.dark-phase .profile-review-avatar {
6063 background: rgba(255, 255, 255, 0.12);
6064 color: rgba(255, 255, 255, 0.72);
6065}
6066.dark-phase .profile-whats-new-details summary,
6067.dark-phase .profile-whats-new-icon-button,
6068.dark-phase .profile-whats-new-history-button,
6069.dark-phase .profile-version-history-commit {
6070 color: rgba(160, 200, 255, 1);
6071}
6072.dark-phase .profile-whats-new-icon-button,
6073.dark-phase .profile-whats-new-history-button,
6074.dark-phase .profile-version-history-commit {
6075 background: rgba(255, 255, 255, 0.06);
6076 border-color: rgba(255, 255, 255, 0.13);
6077}
6078.dark-phase .profile-whats-new-icon-button:hover,
6079.dark-phase .profile-whats-new-history-button:hover,
6080.dark-phase .profile-version-history-commit:hover {
6081 background: rgba(255, 255, 255, 0.1);
6082 border-color: rgba(160, 200, 255, 0.35);
6083}
6084.dark-phase .profile-version-history-item {
6085 border-top-color: rgba(255, 255, 255, 0.1);
6086}
6087.dark-phase .profile-review-body-field textarea,
6088.dark-phase .profile-review-response-composer textarea {
6089 background: rgba(255, 255, 255, 0.06);
6090 border-color: rgba(255, 255, 255, 0.12);
6091}
6092.dark-phase .profile-review-response {
6093 border-left-color: rgba(255, 255, 255, 0.2);
6094}
6095@media (max-width: 640px) {
6096 .profile-whats-new-main {
6097 flex-direction: column;
6098 }
6099 .profile-reviews-summary {
6100 grid-template-columns: 1fr;
6101 }
6102 .profile-review-header {
6103 flex-direction: column;
6104 }
6105}
6106
6107/* Account type onboarding + user review management */
6108.account-type-section,
6109.account-reviews-section {
6110 min-height: 70vh;
6111 padding: 8rem 0 4rem;
6112}
6113.account-type-backdrop {
6114 position: fixed;
6115}
6116.account-type-card {
6117 width: min(560px, 100%);
6118}
6119.account-type-options {
6120 display: grid;
6121 grid-template-columns: 1fr 1fr;
6122 gap: 0.85rem;
6123}
6124.account-type-options form {
6125 margin: 0;
6126}
6127.account-type-option {
6128 display: flex;
6129 min-height: 10rem;
6130 width: 100%;
6131 flex-direction: column;
6132 gap: 0.45rem;
6133 align-items: flex-start;
6134 justify-content: flex-start;
6135 border: 1px solid rgba(18, 26, 47, 0.14);
6136 border-radius: 1rem;
6137 padding: 1rem;
6138 background: rgba(255, 255, 255, 0.72);
6139 color: inherit;
6140 font: inherit;
6141 text-align: left;
6142 cursor: pointer;
6143 transition:
6144 transform 0.15s ease,
6145 border-color 0.15s ease,
6146 background 0.15s ease;
6147}
6148.account-type-option:hover {
6149 transform: translateY(-1px);
6150 border-color: rgba(81, 114, 255, 0.45);
6151 background: rgba(255, 255, 255, 0.9);
6152}
6153.account-type-option strong {
6154 font-size: 1rem;
6155}
6156.account-type-option span {
6157 font-size: 0.9rem;
6158 color: rgba(18, 26, 47, 0.68);
6159}
6160.account-reviews-header {
6161 margin-bottom: 1.5rem;
6162}
6163.account-reviews-header-row {
6164 display: flex;
6165 gap: 1rem;
6166 align-items: flex-start;
6167 justify-content: space-between;
6168 flex-wrap: wrap;
6169}
6170.user-profile-upgrade-button {
6171 flex: 0 0 auto;
6172 align-self: flex-start;
6173 margin-top: 0.35rem;
6174 font-size: 0.85rem;
6175 padding: 0.45rem 0.9rem;
6176}
6177
6178/* ---- Project page (banner + share toolbar) ---- */
6179.project-page-toolbar {
6180 display: flex;
6181 align-items: center;
6182 justify-content: space-between;
6183 gap: 1rem;
6184 margin-bottom: 1rem;
6185 flex-wrap: wrap;
6186}
6187.project-page-banner {
6188 width: 100%;
6189 aspect-ratio: 1200 / 630;
6190 border-radius: 18px;
6191 overflow: hidden;
6192 margin-bottom: 1.25rem;
6193 border: 1px solid rgba(255, 255, 255, 0.4);
6194 background: rgba(255, 255, 255, 0.3);
6195}
6196.project-page-banner-img {
6197 width: 100%;
6198 height: 100%;
6199 object-fit: cover;
6200 display: block;
6201}
6202
6203/* ---- Share button + toast ---- */
6204.share-button-wrap {
6205 position: relative;
6206 display: inline-flex;
6207 align-items: center;
6208}
6209.share-button {
6210 display: inline-flex;
6211 align-items: center;
6212 gap: 0.45rem;
6213 padding: 0.45rem 0.9rem;
6214 border-radius: 999px;
6215 background: rgba(255, 255, 255, 0.78);
6216 border: 1px solid rgba(255, 255, 255, 0.7);
6217 color: #0e1428;
6218 font-size: 0.9rem;
6219 font-weight: 500;
6220 cursor: pointer;
6221 transition: transform 0.15s ease, background 0.15s ease;
6222}
6223.share-button:hover {
6224 background: rgba(255, 255, 255, 0.95);
6225 transform: translateY(-1px);
6226}
6227.share-button-icon {
6228 display: inline-flex;
6229 align-items: center;
6230 justify-content: center;
6231}
6232.dark-phase .share-button {
6233 background: rgba(255, 255, 255, 0.14);
6234 border-color: rgba(255, 255, 255, 0.22);
6235 color: #f0f4ff;
6236}
6237.dark-phase .share-button:hover {
6238 background: rgba(255, 255, 255, 0.22);
6239}
6240.share-button-toast {
6241 position: absolute;
6242 top: calc(100% + 0.4rem);
6243 right: 0;
6244 padding: 0.4rem 0.7rem;
6245 border-radius: 8px;
6246 font-size: 0.85rem;
6247 background: rgba(20, 30, 60, 0.92);
6248 color: #fff;
6249 white-space: nowrap;
6250 pointer-events: none;
6251 z-index: 10;
6252 animation: share-toast-pop 0.2s ease-out;
6253}
6254.share-button-toast--error {
6255 background: rgba(120, 30, 30, 0.92);
6256}
6257@keyframes share-toast-pop {
6258 from {
6259 opacity: 0;
6260 transform: translateY(-4px);
6261 }
6262 to {
6263 opacity: 1;
6264 transform: translateY(0);
6265 }
6266}
6267.account-reviews-empty {
6268 display: flex;
6269 gap: 1rem;
6270 align-items: center;
6271 justify-content: space-between;
6272 padding: 1.2rem;
6273}
6274.user-reviews-heading {
6275 margin: 1.45rem 0 0.75rem;
6276 font-size: clamp(1.15rem, 2vw, 1.45rem);
6277}
6278.user-profile-settings {
6279 position: relative;
6280 display: grid;
6281 grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
6282 gap: 1.2rem;
6283 align-items: start;
6284 margin-bottom: 1rem;
6285 padding: 1.2rem;
6286 border-radius: 1.2rem;
6287}
6288.user-profile-settings:has(.user-profile-client-form.is-modal-open) {
6289 z-index: 300;
6290}
6291.user-profile-client-form.is-modal-open .modal-backdrop {
6292 z-index: 1000;
6293}
6294.user-profile-preview {
6295 display: flex;
6296 gap: 1rem;
6297 align-items: flex-start;
6298}
6299.user-profile-avatar,
6300.user-public-avatar {
6301 display: inline-flex;
6302 flex: 0 0 auto;
6303 align-items: center;
6304 justify-content: center;
6305 overflow: hidden;
6306 border-radius: 999px;
6307 background: rgba(18, 26, 47, 0.1);
6308 color: rgba(18, 26, 47, 0.7);
6309 font-weight: 850;
6310}
6311.user-profile-avatar {
6312 width: 4rem;
6313 height: 4rem;
6314 font-size: 1.3rem;
6315}
6316.user-public-avatar {
6317 width: 6.5rem;
6318 height: 6.5rem;
6319 font-size: 2rem;
6320}
6321.user-profile-avatar img,
6322.user-public-avatar img {
6323 width: 100%;
6324 height: 100%;
6325 object-fit: cover;
6326}
6327.user-profile-preview h2 {
6328 margin: 0;
6329 font-size: 1.15rem;
6330}
6331.user-profile-handle {
6332 margin: 0.15rem 0 0.6rem;
6333 color: rgba(18, 26, 47, 0.58);
6334}
6335.user-profile-bio {
6336 margin: 0.7rem 0 0;
6337 white-space: pre-wrap;
6338}
6339.user-profile-view-link {
6340 display: inline-flex;
6341 margin-top: 0.85rem;
6342 text-decoration: none;
6343 color: inherit;
6344}
6345.user-profile-client-form {
6346 display: flex;
6347 flex-direction: column;
6348 gap: 0.75rem;
6349}
6350.user-profile-bio-input {
6351 min-height: 6rem;
6352 resize: vertical;
6353}
6354.user-profile-save-row {
6355 display: flex;
6356 flex-wrap: wrap;
6357 align-items: center;
6358 gap: 0.75rem;
6359}
6360.user-bsky-picker-label {
6361 display: block;
6362 margin-bottom: 0.35rem;
6363 font-size: 0.82rem;
6364 font-weight: 750;
6365 color: rgba(18, 26, 47, 0.7);
6366}
6367.user-review-list {
6368 display: flex;
6369 flex-direction: column;
6370 gap: 0.85rem;
6371}
6372.user-review-row {
6373 padding: 1rem 1.1rem;
6374 border-radius: 1.2rem;
6375}
6376.user-review-row--deleted {
6377 opacity: 0.65;
6378}
6379.user-review-row-header,
6380.user-review-row-actions {
6381 display: flex;
6382 flex-wrap: wrap;
6383 gap: 0.75rem;
6384 align-items: flex-start;
6385 justify-content: space-between;
6386}
6387.user-review-row-header h2,
6388.user-review-row-header p,
6389.user-review-row-body {
6390 margin: 0;
6391}
6392.user-review-row-header h2 {
6393 font-size: 1rem;
6394}
6395.user-review-row-header a {
6396 color: inherit;
6397 opacity: 0.68;
6398}
6399.user-review-row-body {
6400 margin-top: 0.8rem;
6401 white-space: pre-wrap;
6402}
6403.user-review-row-actions {
6404 align-items: center;
6405 margin-top: 1rem;
6406 color: rgba(18, 26, 47, 0.58);
6407 font-size: 0.82rem;
6408}
6409.dark-phase .account-type-option {
6410 background: rgba(255, 255, 255, 0.06);
6411 border-color: rgba(255, 255, 255, 0.12);
6412}
6413.dark-phase .account-type-option:hover {
6414 background: rgba(255, 255, 255, 0.1);
6415 border-color: rgba(160, 180, 255, 0.45);
6416}
6417.dark-phase .account-type-option span,
6418.dark-phase .user-profile-handle,
6419.dark-phase .user-bsky-picker-label,
6420.dark-phase .user-review-row-actions {
6421 color: rgba(255, 255, 255, 0.6);
6422}
6423.dark-phase .user-profile-avatar,
6424.dark-phase .user-public-avatar {
6425 background: rgba(255, 255, 255, 0.12);
6426 color: rgba(255, 255, 255, 0.75);
6427}
6428@media (max-width: 640px) {
6429 .account-type-options {
6430 grid-template-columns: 1fr;
6431 }
6432 .account-reviews-empty {
6433 align-items: flex-start;
6434 flex-direction: column;
6435 }
6436 .user-profile-settings {
6437 grid-template-columns: 1fr;
6438 }
6439}
6440
6441.user-public-section {
6442 min-height: 70vh;
6443 padding: 8rem 0 4rem;
6444}
6445.user-public-card {
6446 display: flex;
6447 gap: 1.4rem;
6448 align-items: flex-start;
6449 margin-top: 1rem;
6450 padding: 1.5rem;
6451 border-radius: 1.4rem;
6452}
6453.user-public-media {
6454 display: flex;
6455 flex: 0 0 auto;
6456 flex-direction: column;
6457 align-items: center;
6458 gap: 0.7rem;
6459}
6460.user-public-body {
6461 min-width: 0;
6462}
6463.user-public-client-link {
6464 margin-top: 0;
6465}
6466@media (max-width: 640px) {
6467 .user-public-card {
6468 flex-direction: column;
6469 }
6470}
6471
6472/* Modal-internal styles for the report dialog */
6473.report-modal-fieldset {
6474 display: flex;
6475 flex-direction: column;
6476 gap: 0.55rem;
6477 border: 0;
6478 margin: 0 0 1rem;
6479 padding: 0;
6480}
6481.report-modal-fieldset legend {
6482 font-weight: 600;
6483 font-size: 0.85rem;
6484 margin-bottom: 0.4rem;
6485}
6486.report-modal-radio {
6487 display: flex;
6488 align-items: center;
6489 gap: 0.5rem;
6490 font-size: 0.85rem;
6491 cursor: pointer;
6492}
6493.report-modal-textarea {
6494 width: 100%;
6495 border: 1px solid rgba(18, 26, 47, 0.15);
6496 border-radius: 0.5rem;
6497 padding: 0.55rem 0.7rem;
6498 font: inherit;
6499 background: rgba(255, 255, 255, 0.95);
6500 resize: vertical;
6501 min-height: 4.5rem;
6502}
6503.dark-phase .report-modal-textarea {
6504 background: rgba(255, 255, 255, 0.06);
6505 color: rgba(255, 255, 255, 0.95);
6506 border-color: rgba(255, 255, 255, 0.18);
6507}
6508.report-modal-actions {
6509 display: flex;
6510 gap: 0.5rem;
6511 justify-content: flex-end;
6512}
6513.report-modal-status {
6514 font-size: 0.8rem;
6515 margin: 0.5rem 0;
6516}
6517.report-modal-status--ok {
6518 color: #1f7a4e;
6519}
6520.report-modal-status--error {
6521 color: #c25048;
6522}
6523
6524/* ================================================================== *
6525 * Featured curation
6526 * ================================================================== */
6527
6528.admin-featured-layout {
6529 display: grid;
6530 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
6531 gap: 1.5rem;
6532 margin-top: 1.5rem;
6533}
6534@media (max-width: 760px) {
6535 .admin-featured-layout {
6536 grid-template-columns: 1fr;
6537 }
6538}
6539.admin-featured-column h2 {
6540 font-size: 1rem;
6541 margin: 0 0 0.75rem;
6542}
6543.admin-featured-list {
6544 list-style: none;
6545 margin: 0;
6546 padding: 0;
6547 display: flex;
6548 flex-direction: column;
6549 gap: 0.5rem;
6550}
6551.admin-featured-row {
6552 display: grid;
6553 grid-template-columns: minmax(0, 1fr) auto;
6554 gap: 0.75rem;
6555 align-items: center;
6556 padding: 0.6rem 0.8rem;
6557 border-radius: 0.75rem;
6558 background: rgba(255, 255, 255, 0.55);
6559 border: 1px solid rgba(18, 26, 47, 0.08);
6560}
6561.admin-featured-row strong {
6562 font-size: 0.9rem;
6563}
6564.admin-featured-handle {
6565 color: rgba(18, 26, 47, 0.55);
6566 font-size: 0.78rem;
6567 margin-left: 0.4rem;
6568}
6569.admin-featured-actions {
6570 display: flex;
6571 gap: 0.35rem;
6572 align-items: center;
6573}
6574.admin-featured-icon-button {
6575 background: transparent;
6576 border: 1px solid rgba(18, 26, 47, 0.15);
6577 border-radius: 6px;
6578 width: 26px;
6579 height: 26px;
6580 font-size: 0.85rem;
6581 cursor: pointer;
6582 color: rgba(18, 26, 47, 0.7);
6583 display: inline-flex;
6584 align-items: center;
6585 justify-content: center;
6586}
6587.admin-featured-icon-button:disabled {
6588 opacity: 0.3;
6589 cursor: not-allowed;
6590}
6591.admin-featured-badges {
6592 display: flex;
6593 gap: 0.25rem;
6594}
6595.admin-featured-badge-toggle {
6596 background: transparent;
6597 border: 1px solid rgba(18, 26, 47, 0.15);
6598 border-radius: 999px;
6599 padding: 0.1rem 0.55rem;
6600 font: inherit;
6601 font-size: 0.7rem;
6602 cursor: pointer;
6603 color: rgba(18, 26, 47, 0.65);
6604}
6605.admin-featured-badge-toggle--on {
6606 background: rgba(70, 196, 142, 0.18);
6607 border-color: rgba(70, 196, 142, 0.5);
6608 color: #1f7a4e;
6609}
6610.admin-featured-filter {
6611 width: 100%;
6612 border: 1px solid rgba(18, 26, 47, 0.15);
6613 border-radius: 0.5rem;
6614 padding: 0.5rem 0.7rem;
6615 font: inherit;
6616 background: rgba(255, 255, 255, 0.95);
6617 margin-bottom: 0.75rem;
6618}
6619.admin-featured-toolbar {
6620 display: flex;
6621 gap: 0.75rem;
6622 align-items: center;
6623 margin-top: 1.5rem;
6624 flex-wrap: wrap;
6625}
6626.admin-featured-status {
6627 font-size: 0.85rem;
6628}
6629.admin-featured-status--ok {
6630 color: #1f7a4e;
6631}
6632.admin-featured-status--error {
6633 color: #c25048;
6634}
6635.dark-phase .admin-featured-row {
6636 background: rgba(255, 255, 255, 0.05);
6637 border-color: rgba(255, 255, 255, 0.1);
6638}
6639.dark-phase .admin-featured-handle {
6640 color: rgba(255, 255, 255, 0.55);
6641}
6642.dark-phase .admin-featured-icon-button {
6643 border-color: rgba(255, 255, 255, 0.18);
6644 color: rgba(255, 255, 255, 0.7);
6645}
6646.dark-phase .admin-featured-badge-toggle {
6647 border-color: rgba(255, 255, 255, 0.18);
6648 color: rgba(255, 255, 255, 0.65);
6649}
6650.dark-phase .admin-featured-filter {
6651 background: rgba(255, 255, 255, 0.06);
6652 color: rgba(255, 255, 255, 0.95);
6653 border-color: rgba(255, 255, 255, 0.18);
6654}
6655
6656/* ================================================================== *
6657 * Takedowns
6658 * ================================================================== */
6659
6660.admin-report-takedown-button {
6661 background: rgba(194, 80, 72, 0.12);
6662 border: 1px solid rgba(194, 80, 72, 0.4);
6663 color: #c25048;
6664 border-radius: 6px;
6665 padding: 0.4rem 0.85rem;
6666 font: inherit;
6667 font-size: 0.85rem;
6668 cursor: pointer;
6669}
6670.admin-report-takedown-button:hover:not(:disabled) {
6671 background: rgba(194, 80, 72, 0.2);
6672}
6673.admin-report-takedown-button:disabled {
6674 opacity: 0.5;
6675 cursor: not-allowed;
6676}
6677.dark-phase .admin-report-takedown-button {
6678 background: rgba(255, 110, 100, 0.15);
6679 border-color: rgba(255, 110, 100, 0.45);
6680 color: #ff9b94;
6681}
6682
6683.manage-takedown-banner {
6684 margin-top: 1.5rem;
6685 padding: 1rem 1.1rem;
6686 border-radius: 0.75rem;
6687 background: rgba(194, 80, 72, 0.08);
6688 border: 1px solid rgba(194, 80, 72, 0.35);
6689 color: #7a2a24;
6690}
6691.manage-takedown-banner-title {
6692 display: block;
6693 font-size: 1rem;
6694 margin-bottom: 0.4rem;
6695}
6696.manage-takedown-banner-body {
6697 margin: 0 0 0.5rem;
6698 font-size: 0.9rem;
6699 line-height: 1.45;
6700}
6701.manage-takedown-banner-reason {
6702 margin: 0;
6703 font-size: 0.85rem;
6704}
6705.dark-phase .manage-takedown-banner {
6706 background: rgba(255, 110, 100, 0.1);
6707 border-color: rgba(255, 110, 100, 0.4);
6708 color: #ffb6b0;
6709}