style.css (17638B)
1 :root { 2 --bg: #0c0b0f; 3 --fg: #e8e4dc; 4 --muted: #8a8494; 5 --accent: #7fd4a0; 6 --accent2: #c49cf5; 7 --grid: rgba(232, 228, 220, 0.06); 8 --stroke: rgba(232, 228, 220, 0.1); 9 --radius: 10px; 10 } 11 12 *, 13 *::before, 14 *::after { 15 box-sizing: border-box; 16 } 17 18 html { 19 scroll-behavior: smooth; 20 max-width: 100%; 21 } 22 23 body { 24 margin: 0; 25 min-height: 100vh; 26 max-width: 100%; 27 font-family: "Atkinson Hyperlegible", Georgia, serif; 28 font-size: 1.05rem; 29 line-height: 1.6; 30 color: var(--fg); 31 background: var(--bg); 32 background-image: 33 linear-gradient(var(--grid) 1px, transparent 1px), 34 linear-gradient(90deg, var(--grid) 1px, transparent 1px); 35 background-size: 24px 24px; 36 } 37 38 /* Overflow horizontal só no fluxo da página — evita interferir com camadas fixed no body. */ 39 .page-root { 40 position: relative; 41 z-index: 1; 42 overflow-x: clip; 43 max-width: 100%; 44 } 45 46 @supports not (overflow: clip) { 47 .page-root { 48 overflow-x: hidden; 49 } 50 } 51 52 .visually-hidden { 53 position: absolute; 54 width: 1px; 55 height: 1px; 56 padding: 0; 57 margin: -1px; 58 overflow: hidden; 59 clip: rect(0, 0, 0, 0); 60 white-space: nowrap; 61 border: 0; 62 } 63 64 /* Camada de pontos: acompanha o scroll (absolute dentro de .page-root, não fixed ao viewport). */ 65 .starfield-root { 66 position: absolute; 67 inset: 0; 68 z-index: 0; 69 pointer-events: none; 70 overflow: visible; 71 } 72 73 /* Membros como pontos: só em ecrãs largos (em mobile o texto ocupa o viewport). */ 74 @media (max-width: 768px) { 75 .starfield-root { 76 display: none; 77 } 78 } 79 80 .star-member { 81 --star-scale: 1; 82 position: absolute; 83 z-index: 0; 84 width: calc(10px * var(--star-scale)); 85 height: calc(10px * var(--star-scale)); 86 margin: calc(-5px * var(--star-scale)) 0 0 calc(-5px * var(--star-scale)); 87 padding: 0; 88 border: none; 89 border-radius: 50%; 90 pointer-events: auto; 91 cursor: pointer; 92 text-indent: -9999px; 93 overflow: hidden; 94 white-space: nowrap; 95 background: var(--accent); 96 opacity: 0.72; 97 transition: opacity 0.15s ease, width 0.15s ease, height 0.15s ease, margin 0.15s ease; 98 } 99 100 .star-member:hover, 101 .star-member:focus-visible { 102 opacity: 1; 103 outline: none; 104 width: calc(11px * var(--star-scale)); 105 height: calc(11px * var(--star-scale)); 106 margin: calc(-5.5px * var(--star-scale)) 0 0 calc(-5.5px * var(--star-scale)); 107 } 108 109 .star-member:focus-visible { 110 outline: 2px solid var(--accent2); 111 outline-offset: 2px; 112 } 113 114 .wrap { 115 position: relative; 116 z-index: 1; 117 width: 100%; 118 max-width: min(46rem, 100%); 119 margin: 0 auto; 120 padding: 1.35rem clamp(1rem, 4vw, 1.35rem) 4.5rem; 121 box-sizing: border-box; 122 } 123 124 .hero { 125 margin-bottom: 0.5rem; 126 } 127 128 .eyebrow { 129 margin: 0 0 0.35rem; 130 font-family: "IBM Plex Mono", monospace; 131 font-size: 0.72rem; 132 letter-spacing: 0.12em; 133 text-transform: uppercase; 134 color: var(--muted); 135 } 136 137 .hero-nav { 138 display: flex; 139 flex-wrap: wrap; 140 align-items: center; 141 gap: 0.35rem 0.5rem; 142 margin: 0 0 1rem; 143 font-family: "Syne", sans-serif; 144 font-weight: 600; 145 font-size: 0.95rem; 146 } 147 148 .hero-nav a { 149 color: var(--accent2); 150 text-decoration: none; 151 } 152 153 .hero-nav a:hover { 154 color: var(--accent); 155 text-decoration: underline; 156 text-underline-offset: 3px; 157 } 158 159 .hero-nav-sep { 160 color: var(--muted); 161 user-select: none; 162 } 163 164 .hero-nav-current { 165 color: var(--fg); 166 } 167 168 .top-nav { 169 margin: 0 0 1.5rem; 170 font-family: "IBM Plex Mono", monospace; 171 font-size: 0.85rem; 172 } 173 174 .top-nav a { 175 color: var(--accent); 176 text-decoration: none; 177 } 178 179 .top-nav a:hover { 180 color: var(--accent2); 181 text-decoration: underline; 182 text-underline-offset: 2px; 183 } 184 185 .subpage-title { 186 margin: 0 0 0.5rem; 187 } 188 189 .subpage-intro { 190 margin: 0 0 1.25rem; 191 color: var(--muted); 192 font-size: 1rem; 193 max-width: 38rem; 194 } 195 196 .placeholder-block { 197 margin: 0; 198 padding: 1.25rem 1.15rem; 199 border: 1px dashed var(--stroke); 200 border-radius: var(--radius); 201 color: var(--muted); 202 font-size: 0.98rem; 203 } 204 205 .section.subpage-main:first-of-type { 206 margin-top: 1.25rem; 207 } 208 209 .hero-title { 210 font-family: "Syne", sans-serif; 211 font-weight: 800; 212 font-size: clamp(2.4rem, 7vw, 3.35rem); 213 letter-spacing: -0.03em; 214 line-height: 1.05; 215 margin: 0 0 1rem; 216 color: var(--accent); 217 } 218 219 .hero-subtitle { 220 margin: 0 0 1.75rem; 221 font-family: "Syne", sans-serif; 222 font-weight: 600; 223 font-size: clamp(1.05rem, 2.4vw, 1.25rem); 224 line-height: 1.45; 225 color: var(--accent2); 226 max-width: 38rem; 227 } 228 229 .hero-lead { 230 margin: 0 0 1.1rem; 231 font-size: 1.06rem; 232 line-height: 1.65; 233 color: var(--fg); 234 max-width: 40rem; 235 } 236 237 .hero-lead:last-of-type { 238 margin-bottom: 1.75rem; 239 } 240 241 .chips { 242 display: flex; 243 flex-wrap: wrap; 244 gap: 0.5rem 0.6rem; 245 margin: 0 0 2.5rem; 246 padding: 0; 247 list-style: none; 248 } 249 250 .chips li { 251 margin: 0; 252 padding: 0.4rem 0.75rem; 253 font-size: 0.78rem; 254 line-height: 1.35; 255 font-family: "IBM Plex Mono", monospace; 256 color: var(--muted); 257 border: 1px solid rgba(196, 156, 245, 0.28); 258 border-radius: 999px; 259 background: rgba(196, 156, 245, 0.06); 260 } 261 262 .hero-actions { 263 display: flex; 264 flex-wrap: wrap; 265 gap: 0.75rem; 266 margin: 0 0 2.5rem; 267 } 268 269 .button-primary, 270 .button-secondary { 271 display: inline-flex; 272 align-items: center; 273 justify-content: center; 274 min-height: 2.8rem; 275 padding: 0.75rem 1rem; 276 border-radius: 999px; 277 font-family: "Syne", sans-serif; 278 font-weight: 700; 279 text-decoration: none; 280 transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease; 281 } 282 283 .button-primary { 284 color: #08110d; 285 background: linear-gradient(135deg, rgba(127, 212, 160, 0.96) 0%, rgba(190, 255, 215, 0.92) 100%); 286 border: 1px solid rgba(127, 212, 160, 0.6); 287 box-shadow: 0 12px 30px rgba(127, 212, 160, 0.12); 288 } 289 290 .button-secondary { 291 color: var(--fg); 292 background: rgba(196, 156, 245, 0.08); 293 border: 1px solid rgba(196, 156, 245, 0.28); 294 } 295 296 .button-primary:hover, 297 .button-primary:focus-visible, 298 .button-secondary:hover, 299 .button-secondary:focus-visible { 300 transform: translateY(-1px); 301 } 302 303 .button-primary:hover, 304 .button-primary:focus-visible { 305 color: #08110d; 306 background: linear-gradient(135deg, rgba(148, 232, 180, 0.98) 0%, rgba(206, 255, 227, 0.94) 100%); 307 } 308 309 .button-secondary:hover, 310 .button-secondary:focus-visible { 311 color: var(--accent); 312 border-color: rgba(127, 212, 160, 0.34); 313 background: rgba(127, 212, 160, 0.07); 314 } 315 316 .feature-grid, 317 .mini-cards, 318 .quick-paths { 319 display: grid; 320 grid-template-columns: repeat(3, minmax(0, 1fr)); 321 gap: 1rem; 322 } 323 324 .mini-cards { 325 grid-template-columns: repeat(2, minmax(0, 1fr)); 326 margin-top: 1.35rem; 327 } 328 329 .quick-paths { 330 grid-template-columns: repeat(2, minmax(0, 1fr)); 331 } 332 333 .feature-card, 334 .mini-card, 335 .quick-path-card { 336 padding: 1.15rem 1.05rem 1.15rem; 337 border-radius: calc(var(--radius) + 2px); 338 border: 1px solid var(--stroke); 339 background: 340 radial-gradient(circle at top left, rgba(127, 212, 160, 0.08), transparent 45%), 341 linear-gradient(145deg, rgba(232, 228, 220, 0.04) 0%, rgba(12, 11, 15, 0.62) 100%); 342 box-shadow: 343 0 1px 0 rgba(232, 228, 220, 0.05) inset, 344 0 10px 24px rgba(0, 0, 0, 0.18); 345 } 346 347 .feature-card h2, 348 .mini-card h2, 349 .quick-path-card h2 { 350 margin-bottom: 0.6rem; 351 font-size: 1.04rem; 352 color: var(--fg); 353 } 354 355 .feature-card p:last-child, 356 .mini-card p:last-child, 357 .quick-path-card p:last-child { 358 margin-bottom: 0; 359 } 360 361 .feature-kicker, 362 .mini-card-kicker { 363 margin: 0 0 0.55rem; 364 font-family: "IBM Plex Mono", monospace; 365 font-size: 0.74rem; 366 letter-spacing: 0.08em; 367 text-transform: uppercase; 368 color: var(--accent); 369 } 370 371 .inline-accent { 372 color: var(--accent); 373 } 374 375 .section { 376 margin-top: 2.75rem; 377 } 378 379 .section:first-of-type { 380 margin-top: 0; 381 } 382 383 .prose-block { 384 max-width: 100%; 385 padding: 1.75rem clamp(1rem, 3vw, 1.35rem); 386 background: rgba(0, 0, 0, 0.28); 387 border: 1px solid var(--stroke); 388 border-radius: var(--radius); 389 box-sizing: border-box; 390 overflow-x: hidden; 391 } 392 393 .prose-block code { 394 word-break: break-word; 395 overflow-wrap: anywhere; 396 } 397 398 .prose-block h2 { 399 margin-top: 0; 400 } 401 402 .prose-block p:last-child { 403 margin-bottom: 0; 404 } 405 406 h1 { 407 font-family: "Syne", sans-serif; 408 font-weight: 800; 409 font-size: clamp(1.75rem, 4vw, 2.35rem); 410 letter-spacing: -0.02em; 411 margin: 0 0 0.5rem; 412 color: var(--accent); 413 } 414 415 h2 { 416 font-family: "Syne", sans-serif; 417 font-weight: 700; 418 font-size: 1.2rem; 419 margin: 0 0 0.85rem; 420 color: var(--accent2); 421 letter-spacing: -0.02em; 422 } 423 424 .lede { 425 color: var(--muted); 426 font-size: 1.02rem; 427 max-width: 40rem; 428 } 429 430 .checklist { 431 margin: 0.5rem 0 1rem; 432 padding: 0 0 0 1.15rem; 433 color: var(--fg); 434 } 435 436 .checklist li { 437 margin: 0 0 0.45rem; 438 padding-left: 0.15rem; 439 } 440 441 .checklist li::marker { 442 color: var(--accent); 443 } 444 445 .pillars { 446 display: flex; 447 flex-wrap: wrap; 448 gap: 0.45rem; 449 margin: 0.75rem 0 1rem; 450 padding: 0; 451 list-style: none; 452 } 453 454 .pillars li { 455 margin: 0; 456 padding: 0.35rem 0.7rem; 457 font-size: 0.88rem; 458 color: var(--fg); 459 background: rgba(127, 212, 160, 0.1); 460 border: 1px solid rgba(127, 212, 160, 0.25); 461 border-radius: 6px; 462 } 463 464 .pull-soft { 465 margin: 1rem 0 0.35rem; 466 color: var(--muted); 467 font-style: italic; 468 } 469 470 .pull-accent { 471 margin: 0; 472 font-size: 1.08rem; 473 color: var(--accent); 474 } 475 476 .prose-block a, 477 .section-invite a { 478 color: var(--accent); 479 text-decoration: underline; 480 text-underline-offset: 2px; 481 } 482 483 .prose-block a:hover, 484 .section-invite a:hover { 485 color: var(--accent2); 486 } 487 488 .section-invite { 489 margin-top: 2.75rem; 490 padding: 1.75rem 0 0.5rem; 491 border-top: 1px solid var(--stroke); 492 } 493 494 .section-invite p { 495 margin: 0 0 1rem; 496 font-size: 1.08rem; 497 line-height: 1.62; 498 max-width: 38rem; 499 } 500 501 .invite-line { 502 font-family: "Syne", sans-serif; 503 font-weight: 700; 504 font-size: clamp(1rem, 2.5vw, 1.15rem); 505 color: var(--accent2); 506 letter-spacing: -0.01em; 507 } 508 509 .cta-panel { 510 margin: 2.5rem 0 0; 511 padding: 2rem 1.5rem; 512 text-align: center; 513 border-radius: var(--radius); 514 border: 1px solid rgba(127, 212, 160, 0.3); 515 background: rgba(0, 0, 0, 0.32); 516 } 517 518 .cta-brand { 519 margin: 0; 520 font-family: "Syne", sans-serif; 521 font-weight: 800; 522 font-size: clamp(1.85rem, 5vw, 2.5rem); 523 letter-spacing: -0.03em; 524 color: var(--accent); 525 } 526 527 .cta-tagline { 528 margin: 0.65rem 0 0; 529 font-family: "Syne", sans-serif; 530 font-weight: 600; 531 font-size: clamp(0.95rem, 2.2vw, 1.1rem); 532 color: var(--fg); 533 letter-spacing: 0.04em; 534 } 535 536 .cta-join { 537 margin: 1.1rem 0 0; 538 font-size: 0.98rem; 539 } 540 541 .cta-subline { 542 margin: 0.85rem auto 0; 543 max-width: 30rem; 544 color: var(--muted); 545 font-size: 0.96rem; 546 } 547 548 .cta-join a { 549 color: var(--accent2); 550 text-decoration: none; 551 font-weight: 600; 552 } 553 554 .cta-join a:hover, 555 .cta-join a:focus-visible { 556 text-decoration: underline; 557 } 558 559 .ascii-block { 560 display: flex; 561 justify-content: flex-start; 562 width: 100%; 563 max-width: 100%; 564 margin: 0 0 1.5rem; 565 overflow-x: auto; 566 -webkit-overflow-scrolling: touch; 567 scrollbar-width: none; 568 -ms-overflow-style: none; 569 } 570 571 .ascii-block::-webkit-scrollbar { 572 display: none; 573 height: 0; 574 } 575 576 .ascii-inner { 577 display: flex; 578 flex-direction: column; 579 align-items: flex-start; 580 width: 100%; 581 max-width: 100%; 582 } 583 584 .ascii { 585 font-family: "IBM Plex Mono", ui-monospace, monospace; 586 font-size: clamp(0.58rem, 1.65vw, 0.68rem); 587 line-height: 1.15; 588 letter-spacing: 0; 589 color: var(--accent); 590 white-space: pre; 591 text-align: left; 592 margin: 0; 593 padding: 1rem; 594 width: max-content; 595 max-width: 100%; 596 box-sizing: border-box; 597 overflow-x: auto; 598 background: rgba(0, 0, 0, 0.35); 599 border: 1px solid rgba(127, 212, 160, 0.2); 600 border-radius: var(--radius); 601 -webkit-font-smoothing: antialiased; 602 } 603 604 .ascii-tagline { 605 margin: 0.45rem 0 0; 606 padding: 0; 607 max-width: 40rem; 608 box-sizing: border-box; 609 font-family: "IBM Plex Mono", ui-monospace, monospace; 610 font-size: clamp(0.52rem, 1.45vw, 0.62rem); 611 line-height: 1.35; 612 letter-spacing: 0.02em; 613 color: var(--accent); 614 text-align: left; 615 } 616 617 .code-block { 618 font-family: "IBM Plex Mono", ui-monospace, monospace; 619 font-size: 0.82rem; 620 line-height: 1.45; 621 margin: 0.75rem 0 1.25rem; 622 padding: 0.85rem 1rem; 623 max-width: 100%; 624 overflow-x: hidden; 625 white-space: pre-wrap; 626 word-break: break-word; 627 overflow-wrap: anywhere; 628 color: var(--fg); 629 background: rgba(0, 0, 0, 0.45); 630 border: 1px solid var(--stroke); 631 border-radius: var(--radius); 632 } 633 634 .code-block code { 635 font-family: inherit; 636 font-size: inherit; 637 color: inherit; 638 white-space: pre-wrap; 639 word-break: break-word; 640 overflow-wrap: anywhere; 641 } 642 643 /* Identidade SSH em destaque (ex.: entre@runv.club) */ 644 .ssh-identity { 645 font-family: "IBM Plex Mono", ui-monospace, monospace; 646 font-weight: 600; 647 padding: 0.12em 0.5em; 648 border-radius: 6px; 649 background: linear-gradient( 650 135deg, 651 rgba(127, 212, 160, 0.2) 0%, 652 rgba(196, 156, 245, 0.18) 100% 653 ); 654 color: var(--accent); 655 border: 1px solid rgba(127, 212, 160, 0.45); 656 box-shadow: 0 0 20px rgba(127, 212, 160, 0.12); 657 white-space: nowrap; 658 } 659 660 .ssh-identity-lg { 661 display: inline-block; 662 margin-top: 0.35rem; 663 max-width: 100%; 664 font-size: clamp(1rem, 4.5vw, 1.25rem); 665 letter-spacing: 0.02em; 666 white-space: normal; 667 word-break: break-all; 668 text-align: center; 669 } 670 671 .entre-callout { 672 margin: 1.5rem 0 2rem; 673 padding: 1.1rem 1rem; 674 text-align: center; 675 border-radius: var(--radius); 676 border: 1px solid rgba(196, 156, 245, 0.35); 677 background: rgba(0, 0, 0, 0.35); 678 } 679 680 .entre-callout-label { 681 display: block; 682 font-size: 0.82rem; 683 letter-spacing: 0.08em; 684 text-transform: uppercase; 685 color: var(--muted); 686 font-family: "IBM Plex Mono", ui-monospace, monospace; 687 margin-bottom: 0.35rem; 688 } 689 690 .site-footer { 691 margin-top: 3rem; 692 padding-top: 1.5rem; 693 border-top: 1px solid var(--stroke); 694 font-size: 0.9rem; 695 color: var(--muted); 696 text-align: center; 697 } 698 699 .site-footer p { 700 margin: 0; 701 } 702 703 .site-footer a { 704 color: var(--accent); 705 text-decoration: none; 706 } 707 708 .site-footer a:hover, 709 .site-footer a:focus-visible { 710 text-decoration: underline; 711 } 712 713 .footer-sep { 714 color: var(--muted); 715 user-select: none; 716 } 717 718 .footer-link-discrete { 719 color: var(--muted); 720 font-size: 0.88em; 721 font-weight: 400; 722 text-decoration: none; 723 } 724 725 .footer-link-discrete:hover, 726 .footer-link-discrete:focus-visible { 727 color: var(--accent); 728 text-decoration: underline; 729 text-underline-offset: 2px; 730 } 731 732 /* FAQ */ 733 .faq-main .faq-item { 734 margin-bottom: 1.75rem; 735 padding: 1.1rem 1rem 1.2rem; 736 border: 1px solid rgba(196, 156, 245, 0.16); 737 border-radius: calc(var(--radius) - 2px); 738 background: 739 linear-gradient( 740 145deg, 741 rgba(196, 156, 245, 0.07) 0%, 742 rgba(12, 11, 15, 0.2) 100% 743 ); 744 } 745 746 .faq-main .faq-item:last-child { 747 margin-bottom: 0; 748 padding-bottom: 0; 749 } 750 751 .faq-q { 752 margin: 0 0 0.5rem; 753 font-family: "Syne", sans-serif; 754 font-weight: 700; 755 font-size: 1.05rem; 756 line-height: 1.35; 757 letter-spacing: -0.02em; 758 color: var(--accent2); 759 } 760 761 .faq-main .faq-item p { 762 margin: 0; 763 color: var(--fg); 764 max-width: 40rem; 765 } 766 767 /* Junte-se (versão curta) */ 768 .join-summary { 769 margin-bottom: 1.5rem; 770 padding: 0.9rem 1rem 0.7rem 2rem; 771 border: 1px solid rgba(127, 212, 160, 0.2); 772 border-radius: calc(var(--radius) - 2px); 773 background: rgba(127, 212, 160, 0.06); 774 } 775 776 .join-note { 777 font-size: 0.95rem; 778 color: var(--muted); 779 margin-top: 0.35rem; 780 } 781 782 .join-main h2 { 783 margin-top: 1.65rem; 784 } 785 786 .join-main h2:first-of-type { 787 margin-top: 0; 788 } 789 790 /* Página de notícias (data/news.json + news-page.js) */ 791 .news-main { 792 margin-top: 1.25rem; 793 } 794 795 .news-rss-link { 796 color: var(--accent2); 797 text-decoration: none; 798 font-weight: 600; 799 white-space: nowrap; 800 } 801 802 .news-rss-link:hover, 803 .news-rss-link:focus-visible { 804 text-decoration: underline; 805 text-underline-offset: 3px; 806 } 807 808 .news-feed { 809 display: flex; 810 flex-direction: column; 811 gap: 1.35rem; 812 max-width: 42rem; 813 } 814 815 .news-card { 816 margin: 0; 817 padding: 1.35rem 1.4rem 1.45rem; 818 border-radius: calc(var(--radius) + 4px); 819 border: 1px solid var(--stroke); 820 background: linear-gradient( 821 145deg, 822 rgba(232, 228, 220, 0.05) 0%, 823 rgba(12, 11, 15, 0.65) 100% 824 ); 825 box-shadow: 826 0 1px 0 rgba(232, 228, 220, 0.06) inset, 827 0 12px 32px rgba(0, 0, 0, 0.35); 828 } 829 830 .news-card__head { 831 margin: 0 0 0.85rem; 832 padding: 0; 833 border: none; 834 } 835 836 .news-card__date { 837 display: block; 838 font-family: "IBM Plex Mono", ui-monospace, monospace; 839 font-size: 0.78rem; 840 letter-spacing: 0.06em; 841 text-transform: uppercase; 842 color: var(--muted); 843 margin-bottom: 0.45rem; 844 } 845 846 .news-card__title { 847 margin: 0; 848 font-family: "Syne", sans-serif; 849 font-weight: 700; 850 font-size: clamp(1.25rem, 3.5vw, 1.45rem); 851 line-height: 1.25; 852 letter-spacing: -0.02em; 853 color: var(--accent); 854 } 855 856 .news-card__body { 857 margin: 0; 858 font-size: 1.02rem; 859 line-height: 1.65; 860 color: var(--fg); 861 } 862 863 .news-card__body p { 864 margin: 0 0 0.75rem; 865 } 866 867 .news-card__body p:last-child { 868 margin-bottom: 0; 869 } 870 871 .prose-news strong { 872 color: var(--fg); 873 font-weight: 700; 874 } 875 876 .prose-news em { 877 font-style: italic; 878 color: var(--fg); 879 } 880 881 .prose-news u { 882 text-decoration: underline; 883 text-underline-offset: 3px; 884 text-decoration-color: var(--accent2); 885 } 886 887 .wiki-hero-nav { 888 font-size: 0.88rem; 889 } 890 891 .wiki-toc { 892 margin: 0 0 2rem; 893 padding: 1rem 1.25rem; 894 border: 1px solid var(--stroke); 895 border-radius: var(--radius); 896 background: rgba(232, 228, 220, 0.03); 897 } 898 899 .wiki-toc-title { 900 margin: 0 0 0.75rem; 901 font-family: "Syne", sans-serif; 902 font-weight: 700; 903 font-size: 0.85rem; 904 color: var(--muted); 905 text-transform: uppercase; 906 letter-spacing: 0.06em; 907 } 908 909 .wiki-toc ul { 910 margin: 0; 911 padding-left: 1.25rem; 912 } 913 914 .wiki-main .wiki-page-title { 915 margin-top: 0; 916 } 917 918 .wiki-main p + p { 919 margin-top: 0.8rem; 920 } 921 922 .wiki-main ul { 923 margin: 0.75rem 0 1rem; 924 } 925 926 @media (max-width: 860px) { 927 .feature-grid, 928 .mini-cards, 929 .quick-paths { 930 grid-template-columns: 1fr; 931 } 932 } 933