main.css (26215B)
1 /* ── VARIÁVEIS E RESET ── */ 2 :root { 3 --serif: 'Lora', serif; 4 --mono: 'JetBrains Mono', monospace; 5 --text: #dedad4; 6 --text-2: #a8a8a8; 7 --muted: #6a6a75; 8 --surface: #1a1a1f; 9 --border: #2a2a30; 10 --border-2: #3a3a40; 11 --amber: #c9a961; 12 --t: 150ms ease; 13 } 14 15 * { 16 margin: 0; 17 padding: 0; 18 box-sizing: border-box; 19 } 20 21 html { 22 background: #0f0f13; 23 color: var(--text); 24 font-family: var(--serif); 25 font-size: 16px; 26 line-height: 1.6; 27 } 28 29 body { 30 background: #0f0f13; 31 color: var(--text); 32 font-family: var(--serif); 33 display: flex; 34 flex-direction: column; 35 min-height: 100vh; 36 } 37 38 /* ── HEADER ── */ 39 header { 40 padding: 1.2rem 2rem; 41 border-bottom: 1px solid var(--border); 42 background: rgba(15, 15, 19, 0.95); 43 backdrop-filter: blur(4px); 44 position: sticky; 45 top: 0; 46 z-index: 100; 47 } 48 49 .site-name { 50 font-family: var(--mono); 51 font-size: 0.75rem; 52 letter-spacing: 0.15em; 53 text-transform: uppercase; 54 color: var(--text); 55 text-decoration: none; 56 transition: color var(--t); 57 } 58 59 .site-name:hover { 60 color: var(--amber); 61 } 62 63 .header-sep { 64 color: var(--border-2); 65 margin: 0 0.5rem; 66 } 67 68 .breadcrumb { 69 color: var(--text-2); 70 font-size: 0.9rem; 71 } 72 73 .breadcrumb-link { 74 color: var(--text-2); 75 text-decoration: none; 76 transition: color var(--t); 77 } 78 79 .breadcrumb-link:hover { 80 color: var(--text); 81 } 82 83 /* ── MAIN ── */ 84 main { 85 flex: 1; 86 padding: 2rem; 87 max-width: 900px; 88 margin: 0 auto; 89 width: 100%; 90 } 91 92 /* ── FADE ANIMATION ── */ 93 .fade { 94 animation: fadeIn 200ms ease; 95 } 96 97 @keyframes fadeIn { 98 from { opacity: 0; } 99 to { opacity: 1; } 100 } 101 102 .fade-out { 103 animation: fadeOut 100ms ease; 104 } 105 106 @keyframes fadeOut { 107 from { opacity: 1; } 108 to { opacity: 0; } 109 } 110 111 /* ── GRID DE DISCIPLINAS ── */ 112 .disc-grid { 113 display: grid; 114 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 115 gap: 1.2rem; 116 margin-bottom: 2rem; 117 } 118 119 .disc-card { 120 display: flex; 121 flex-direction: column; 122 padding: 1.2rem; 123 border: 1px dashed var(--border); 124 border-radius: 4px; 125 text-decoration: none; 126 color: var(--text); 127 transition: all var(--t); 128 cursor: pointer; 129 } 130 131 .disc-card:hover { 132 border-color: var(--amber); 133 background: color-mix(in srgb, var(--amber) 3%, transparent); 134 transform: translateY(-2px); 135 } 136 137 .disc-card-name { 138 font-size: 1rem; 139 font-weight: 600; 140 margin-bottom: 0.5rem; 141 line-height: 1.3; 142 } 143 144 .disc-card-meta { 145 font-family: var(--mono); 146 font-size: 0.62rem; 147 color: var(--muted); 148 letter-spacing: 0.08em; 149 text-transform: uppercase; 150 } 151 152 /* ── BOTÃO VOLTAR ── */ 153 .disc-back { 154 margin-bottom: 1.2rem; 155 } 156 157 .disc-back a { 158 font-family: var(--mono); 159 font-size: 0.68rem; 160 color: var(--muted); 161 text-decoration: none; 162 letter-spacing: 0.06em; 163 text-transform: uppercase; 164 transition: color var(--t); 165 } 166 167 .disc-back a:hover { 168 color: var(--text-2); 169 } 170 171 /* ── DISCIPLINA ── */ 172 .discipline { 173 margin-bottom: 2.5rem; 174 } 175 176 .discipline-name { 177 font-family: var(--mono); 178 font-size: 0.68rem; 179 color: var(--muted); 180 letter-spacing: 0.1em; 181 text-transform: uppercase; 182 margin-bottom: 0.65rem; 183 padding-bottom: 0.45rem; 184 border-bottom: 1px solid var(--border); 185 } 186 187 /* ── INTRO/NOTAS DA DISCIPLINA ── */ 188 .disc-intro { 189 margin: 1.2rem 0 1.8rem; 190 padding: 1rem 1.2rem; 191 border-left: 2px solid var(--amber); 192 background: color-mix(in srgb, var(--amber) 5%, transparent); 193 border-radius: 0 4px 4px 0; 194 } 195 196 .disc-intro-prose { 197 font-size: 0.9rem; 198 color: var(--text-2); 199 margin: 0; 200 } 201 202 .disc-intro-prose p:first-child { 203 margin-top: 0; 204 } 205 206 .disc-intro-prose p:last-child { 207 margin-bottom: 0; 208 } 209 210 .disc-intro-refs { 211 margin-top: 0.75rem; 212 padding-top: 0.5rem; 213 border-top: 1px solid var(--border); 214 } 215 216 /* ── TÓPICOS (SUBPASTAS) ── */ 217 .topic-section { 218 margin-bottom: 0.5rem; 219 } 220 221 .topic-head { 222 font-family: var(--mono); 223 font-size: 0.62rem; 224 color: var(--muted); 225 letter-spacing: 0.12em; 226 text-transform: uppercase; 227 margin: 1.4rem 0 0.3rem; 228 padding-bottom: 0.3rem; 229 border-bottom: 1px dashed var(--border); 230 } 231 232 .subject-group { 233 padding: 0.85rem 0; 234 border-bottom: 1px solid var(--border); 235 } 236 237 .subject-group:last-child { 238 border-bottom: none; 239 } 240 241 .subject-head { 242 font-size: 0.95rem; 243 color: var(--text); 244 margin-bottom: 0.5rem; 245 } 246 247 .item-row { 248 display: flex; 249 justify-content: space-between; 250 align-items: baseline; 251 padding: 0.35rem 0; 252 cursor: pointer; 253 text-decoration: none; 254 color: var(--text-2); 255 transition: opacity var(--t); 256 gap: 1rem; 257 } 258 259 .item-row:hover { 260 opacity: 0.55; 261 color: var(--text); 262 } 263 264 .item-kind { 265 font-family: var(--mono); 266 font-size: 0.62rem; 267 letter-spacing: 0.1em; 268 text-transform: uppercase; 269 color: var(--muted); 270 min-width: 3.2rem; 271 flex-shrink: 0; 272 } 273 274 .item-kind.txt { 275 color: var(--amber); 276 } 277 278 .item-kind.qz { 279 color: var(--text-2); 280 } 281 282 .item-title { 283 flex: 1; 284 font-size: 0.9rem; 285 } 286 287 .item-meta { 288 font-family: var(--mono); 289 font-size: 0.66rem; 290 color: var(--muted); 291 white-space: nowrap; 292 flex-shrink: 0; 293 } 294 295 /* ── LEITOR DE TEXTOS & PROSE ── */ 296 .text-meta { 297 font-family: var(--mono); 298 font-size: 0.68rem; 299 color: var(--muted); 300 margin-bottom: 1.4rem; 301 letter-spacing: 0.02em; 302 display: flex; 303 gap: 0.6rem; 304 align-items: center; 305 flex-wrap: wrap; 306 } 307 308 .text-meta .dot { 309 width: 3px; 310 height: 3px; 311 border-radius: 50%; 312 background: var(--border-2); 313 } 314 315 .text-title { 316 font-size: 1.4rem; 317 line-height: 1.35; 318 margin-bottom: 1.6rem; 319 color: var(--text); 320 font-weight: 600; 321 } 322 323 .prose { 324 font-size: 1rem; 325 line-height: 1.8; 326 color: var(--text); 327 } 328 329 .prose p { 330 margin-bottom: 1.1rem; 331 } 332 333 .prose h2 { 334 font-family: var(--serif); 335 font-size: 1.1rem; 336 font-weight: 600; 337 margin: 1.8rem 0 0.8rem; 338 color: var(--text); 339 } 340 341 .prose h3 { 342 font-family: var(--mono); 343 font-size: 0.72rem; 344 letter-spacing: 0.08em; 345 text-transform: uppercase; 346 color: var(--muted); 347 margin: 1.6rem 0 0.6rem; 348 } 349 350 .prose blockquote { 351 border-left: 2px solid var(--border-2); 352 padding: 0.2rem 0 0.2rem 1rem; 353 margin: 1rem 0; 354 color: var(--text-2); 355 font-style: italic; 356 } 357 358 .prose em { 359 color: var(--text-2); 360 } 361 362 .prose strong { 363 color: var(--text); 364 font-weight: 600; 365 } 366 367 .prose code { 368 font-family: var(--mono); 369 font-size: 0.85em; 370 background: var(--surface); 371 padding: 0.05em 0.35em; 372 border-radius: 2px; 373 color: var(--text-2); 374 } 375 376 /* ── TABELAS ── */ 377 .prose table { 378 width: 100%; 379 border-collapse: collapse; 380 margin: 1.8rem 0; 381 font-size: 0.9rem; 382 color: var(--text-2); 383 } 384 385 .prose th { 386 font-family: var(--mono); 387 font-size: 0.68rem; 388 letter-spacing: 0.05em; 389 text-transform: uppercase; 390 color: var(--muted); 391 border-bottom: 1px solid var(--border-2); 392 padding: 0.5rem 0.6rem; 393 text-align: left; 394 } 395 396 .prose td { 397 padding: 0.6rem; 398 border-bottom: 1px solid var(--border); 399 vertical-align: top; 400 } 401 402 .prose tr:hover td { 403 color: var(--text); 404 } 405 406 @media (max-width: 480px) { 407 .prose table { 408 overflow-x: auto; 409 display: block; 410 } 411 } 412 413 /* ── NOTAS DE RODAPÉ ── */ 414 a[href^="#fn:"] { 415 text-decoration: none; 416 color: var(--amber); 417 cursor: pointer; 418 transition: opacity var(--t); 419 } 420 421 a[href^="#fn:"]:hover { 422 opacity: 0.7; 423 } 424 425 a[href^="#fn:"].active { 426 font-weight: 600; 427 } 428 429 .footnotes { 430 margin-top: 2rem; 431 padding-top: 1rem; 432 border-top: 1px solid var(--border); 433 font-size: 0.9rem; 434 } 435 436 .footnote-backref { 437 text-decoration: none; 438 color: var(--amber); 439 } 440 441 /* ── FLOATER (POPUP DE NOTAS) ── */ 442 .floater { 443 position: fixed; 444 background: var(--surface); 445 border: 1px solid var(--border); 446 border-radius: 4px; 447 padding: 1rem; 448 max-width: 320px; 449 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); 450 z-index: 1000; 451 animation: slideUp 150ms ease; 452 } 453 454 @keyframes slideUp { 455 from { 456 opacity: 0; 457 transform: translateY(10px); 458 } 459 to { 460 opacity: 1; 461 transform: translateY(0); 462 } 463 } 464 465 .f-label { 466 display: flex; 467 justify-content: space-between; 468 align-items: center; 469 font-family: var(--mono); 470 font-size: 0.62rem; 471 color: var(--muted); 472 letter-spacing: 0.1em; 473 text-transform: uppercase; 474 margin-bottom: 0.5rem; 475 padding-bottom: 0.5rem; 476 border-bottom: 1px solid var(--border); 477 } 478 479 .f-close { 480 cursor: pointer; 481 font-size: 1.2rem; 482 color: var(--text-2); 483 transition: color var(--t); 484 } 485 486 .f-close:hover { 487 color: var(--text); 488 } 489 490 .f-quote { 491 font-size: 0.85rem; 492 color: var(--text-2); 493 font-style: italic; 494 margin-bottom: 0.5rem; 495 } 496 497 /* ── SUMÁRIO (TOC) ── */ 498 .toc { 499 margin: 1.5rem 0 2rem; 500 padding: 1rem; 501 background: color-mix(in srgb, var(--amber) 3%, transparent); 502 border: 1px solid var(--border); 503 border-radius: 4px; 504 } 505 506 .toc-label { 507 font-family: var(--mono); 508 font-size: 0.62rem; 509 color: var(--muted); 510 letter-spacing: 0.1em; 511 text-transform: uppercase; 512 margin-bottom: 0.75rem; 513 } 514 515 #toc-list { 516 list-style: none; 517 margin: 0; 518 padding: 0; 519 } 520 521 .toc-h2 { 522 margin-bottom: 0.5rem; 523 } 524 525 .toc-h2 a { 526 font-size: 0.95rem; 527 color: var(--text); 528 text-decoration: none; 529 transition: color var(--t); 530 } 531 532 .toc-h2 a:hover { 533 color: var(--amber); 534 } 535 536 .toc-h3 { 537 margin-left: 1.2rem; 538 margin-bottom: 0.3rem; 539 } 540 541 .toc-h3 a { 542 font-size: 0.85rem; 543 color: var(--text-2); 544 text-decoration: none; 545 transition: color var(--t); 546 } 547 548 .toc-h3 a:hover { 549 color: var(--text); 550 } 551 552 /* ── REFERÊNCIAS ── */ 553 .references { 554 margin-top: 2rem; 555 padding-top: 1.5rem; 556 border-top: 1px solid var(--border); 557 } 558 559 .ref-head { 560 font-family: var(--mono); 561 font-size: 0.62rem; 562 color: var(--muted); 563 letter-spacing: 0.1em; 564 text-transform: uppercase; 565 margin-bottom: 1rem; 566 } 567 568 .ref-list { 569 display: flex; 570 flex-direction: column; 571 gap: 0.75rem; 572 } 573 574 .ref-list p { 575 font-size: 0.9rem; 576 color: var(--text-2); 577 margin: 0; 578 line-height: 1.5; 579 } 580 581 /* ── QUIZ: LAYOUT GERAL ── */ 582 .progress-wrap { 583 width: 100%; 584 height: 3px; 585 background: var(--border); 586 border-radius: 2px; 587 overflow: hidden; 588 margin-bottom: 1.5rem; 589 } 590 591 .progress-fill { 592 height: 100%; 593 background: var(--amber); 594 width: 0%; 595 transition: width 300ms ease; 596 } 597 598 .q-meta { 599 font-family: var(--mono); 600 font-size: 0.68rem; 601 color: var(--muted); 602 letter-spacing: 0.08em; 603 text-transform: uppercase; 604 margin-bottom: 1.2rem; 605 } 606 607 #quiz-body { 608 margin-bottom: 1.5rem; 609 } 610 611 /* ── QUIZ: MÚLTIPLA ESCOLHA ── */ 612 .q-text { 613 font-size: 1rem; 614 line-height: 1.8; 615 color: var(--text); 616 margin-bottom: 1.5rem; 617 } 618 619 .options { 620 display: flex; 621 flex-direction: column; 622 gap: 0.75rem; 623 margin-bottom: 1.5rem; 624 } 625 626 .opt { 627 display: flex; 628 align-items: flex-start; 629 gap: 0.75rem; 630 padding: 0.75rem 1rem; 631 background: var(--surface); 632 border: 1px solid var(--border); 633 border-radius: 4px; 634 cursor: pointer; 635 transition: all var(--t); 636 font-family: var(--serif); 637 font-size: 0.95rem; 638 color: var(--text); 639 text-align: left; 640 min-height: 3rem; 641 } 642 643 .opt:hover:not(:disabled) { 644 border-color: var(--amber); 645 background: color-mix(in srgb, var(--amber) 5%, transparent); 646 } 647 648 .opt:disabled { 649 cursor: not-allowed; 650 opacity: 0.7; 651 } 652 653 .opt.correct { 654 border-color: #4ade80; 655 background: color-mix(in srgb, #4ade80 15%, transparent); 656 } 657 658 .opt.wrong { 659 border-color: #ef4444; 660 background: color-mix(in srgb, #ef4444 15%, transparent); 661 } 662 663 .opt.revealed { 664 opacity: 0.5; 665 } 666 667 .opt-letter { 668 font-family: var(--mono); 669 font-size: 0.75rem; 670 font-weight: 600; 671 color: var(--muted); 672 min-width: 1.5rem; 673 flex-shrink: 0; 674 } 675 676 /* ── QUIZ: RESPOSTA ABERTA ── */ 677 .open-area { 678 display: flex; 679 flex-direction: column; 680 gap: 1rem; 681 } 682 683 textarea { 684 padding: 1rem; 685 background: var(--surface); 686 border: 1px solid var(--border); 687 border-radius: 4px; 688 color: var(--text); 689 font-family: var(--serif); 690 font-size: 0.95rem; 691 line-height: 1.6; 692 resize: vertical; 693 min-height: 120px; 694 transition: border-color var(--t); 695 } 696 697 textarea:focus { 698 outline: none; 699 border-color: var(--amber); 700 } 701 702 textarea::placeholder { 703 color: var(--muted); 704 } 705 706 /* ── QUIZ: FEEDBACK ── */ 707 .feedback-line { 708 display: flex; 709 align-items: center; 710 gap: 0.5rem; 711 font-family: var(--mono); 712 font-size: 0.75rem; 713 letter-spacing: 0.05em; 714 text-transform: uppercase; 715 color: var(--text-2); 716 opacity: 0; 717 transition: opacity var(--t); 718 } 719 720 .feedback-line.show { 721 opacity: 1; 722 } 723 724 .feedback-dot { 725 width: 6px; 726 height: 6px; 727 border-radius: 50%; 728 background: var(--text-2); 729 } 730 731 .feedback-line.ok .feedback-dot { 732 background: #4ade80; 733 } 734 735 .feedback-line.bad .feedback-dot { 736 background: #ef4444; 737 } 738 739 /* ── QUIZ: COMENTÁRIO ── */ 740 .comment-block { 741 padding: 1rem; 742 background: color-mix(in srgb, var(--amber) 5%, transparent); 743 border-left: 2px solid var(--amber); 744 border-radius: 0 4px 4px 0; 745 max-height: 0; 746 overflow: hidden; 747 transition: max-height var(--t); 748 } 749 750 .comment-block.show { 751 max-height: 500px; 752 } 753 754 .comment-label { 755 font-family: var(--mono); 756 font-size: 0.62rem; 757 color: var(--muted); 758 letter-spacing: 0.1em; 759 text-transform: uppercase; 760 margin-bottom: 0.5rem; 761 } 762 763 .comment-block > div:last-child { 764 font-size: 0.9rem; 765 color: var(--text-2); 766 line-height: 1.6; 767 } 768 769 /* ── QUIZ: REFERÊNCIA (RESPOSTA ABERTA) ── */ 770 .ref-block { 771 padding: 1rem; 772 background: var(--surface); 773 border: 1px solid var(--border); 774 border-radius: 4px; 775 max-height: 0; 776 overflow: hidden; 777 transition: max-height var(--t)); 778 } 779 780 .ref-block.show { 781 max-height: 500px; 782 } 783 784 .ref-label { 785 font-family: var(--mono); 786 font-size: 0.62rem; 787 color: var(--muted); 788 letter-spacing: 0.1em; 789 text-transform: uppercase; 790 margin-bottom: 0.5rem; 791 } 792 793 .ref-block > div:last-child { 794 font-size: 0.9rem; 795 color: var(--text-2); 796 line-height: 1.6; 797 } 798 799 /* ── QUIZ: BOTÕES ── */ 800 .next-row { 801 display: flex; 802 justify-content: flex-end; 803 margin-top: 1.5rem; 804 } 805 806 .open-btns { 807 display: flex; 808 gap: 0.75rem; 809 justify-content: flex-end; 810 } 811 812 .btn { 813 padding: 0.6rem 1.2rem; 814 background: var(--surface); 815 border: 1px solid var(--border); 816 border-radius: 4px; 817 color: var(--text); 818 font-family: var(--serif); 819 font-size: 0.9rem; 820 cursor: pointer; 821 transition: all var(--t); 822 text-decoration: none; 823 display: inline-flex; 824 align-items: center; 825 justify-content: center; 826 } 827 828 .btn:hover:not(:disabled) { 829 border-color: var(--amber); 830 background: color-mix(in srgb, var(--amber) 10%, transparent); 831 } 832 833 .btn:disabled { 834 opacity: 0.5; 835 cursor: not-allowed; 836 } 837 838 .btn-ok { 839 border-color: #4ade80; 840 color: #4ade80; 841 } 842 843 .btn-ok:hover:not(:disabled) { 844 background: color-mix(in srgb, #4ade80 15%, transparent); 845 } 846 847 .btn-bad { 848 border-color: #ef4444; 849 color: #ef4444; 850 } 851 852 .btn-bad:hover:not(:disabled) { 853 background: color-mix(in srgb, #ef4444 15%, transparent); 854 } 855 856 /* ── QUIZ: RESULTADO ── */ 857 .res-score { 858 font-size: 3rem; 859 font-weight: 600; 860 color: var(--amber); 861 text-align: center; 862 margin-bottom: 0.5rem; 863 } 864 865 .res-subtitle { 866 font-size: 1rem; 867 color: var(--text-2); 868 text-align: center; 869 margin-bottom: 1.5rem; 870 } 871 872 .res-divider { 873 height: 1px; 874 background: var(--border); 875 margin: 1.5rem 0; 876 } 877 878 .res-stats { 879 display: flex; 880 justify-content: center; 881 gap: 3rem; 882 margin-bottom: 1.5rem; 883 } 884 885 .rs-item { 886 display: flex; 887 flex-direction: column; 888 align-items: center; 889 gap: 0.5rem; 890 } 891 892 .rs-num { 893 font-size: 1.8rem; 894 font-weight: 600; 895 } 896 897 .rs-num.g { 898 color: #4ade80; 899 } 900 901 .rs-num.r { 902 color: #ef4444; 903 } 904 905 .rs-label { 906 font-family: var(--mono); 907 font-size: 0.62rem; 908 color: var(--muted); 909 letter-spacing: 0.1em; 910 text-transform: uppercase; 911 } 912 913 .res-msg { 914 padding: 1rem; 915 background: color-mix(in srgb, var(--amber) 5%, transparent); 916 border-left: 2px solid var(--amber); 917 border-radius: 0 4px 4px 0; 918 margin-bottom: 1.5rem; 919 } 920 921 .res-msg-label { 922 font-family: var(--mono); 923 font-size: 0.62rem; 924 color: var(--muted); 925 letter-spacing: 0.1em; 926 text-transform: uppercase; 927 margin-bottom: 0.5rem; 928 } 929 930 .res-msg-body { 931 font-size: 0.95rem; 932 color: var(--text-2); 933 line-height: 1.6; 934 } 935 936 .res-btns { 937 display: flex; 938 gap: 0.75rem; 939 justify-content: center; 940 flex-wrap: wrap; 941 } 942 943 /* ── EXTRAS DE DISCIPLINA (COLAPSÁVEIS) ── */ 944 .disc-extras-wrap { 945 margin: 1.5rem 0 2rem; 946 } 947 948 .disc-extra { 949 margin-bottom: 0.75rem; 950 border: 1px solid var(--border); 951 border-radius: 4px; 952 overflow: hidden; 953 } 954 955 .disc-extra-summary { 956 display: flex; 957 align-items: center; 958 justify-content: space-between; 959 padding: 0.75rem 1rem; 960 background: var(--surface); 961 cursor: pointer; 962 user-select: none; 963 transition: background var(--t); 964 } 965 966 .disc-extra-summary:hover { 967 background: color-mix(in srgb, var(--amber) 5%, transparent); 968 } 969 970 .disc-extra-label { 971 font-family: var(--mono); 972 font-size: 0.68rem; 973 color: var(--muted); 974 letter-spacing: 0.1em; 975 text-transform: uppercase; 976 } 977 978 .disc-extra-count { 979 font-family: var(--mono); 980 font-size: 0.62rem; 981 color: var(--text-2); 982 letter-spacing: 0.05em; 983 } 984 985 .disc-extra-chevron { 986 color: var(--text-2); 987 transition: transform var(--t); 988 } 989 990 .disc-extra[open] .disc-extra-chevron { 991 transform: rotate(180deg); 992 } 993 994 .disc-extra-body { 995 padding: 1rem; 996 border-top: 1px solid var(--border); 997 } 998 999 .disc-extra-row { 1000 display: flex; 1001 align-items: center; 1002 gap: 0.75rem; 1003 padding: 0.5rem 0; 1004 text-decoration: none; 1005 color: var(--text-2); 1006 transition: color var(--t); 1007 } 1008 1009 .disc-extra-row:hover { 1010 color: var(--text); 1011 } 1012 1013 .disc-extra-icon { 1014 font-size: 0.8rem; 1015 color: var(--muted); 1016 min-width: 1.2rem; 1017 } 1018 1019 .disc-extra-name { 1020 flex: 1; 1021 font-size: 0.9rem; 1022 } 1023 1024 .disc-extra-meta { 1025 font-family: var(--mono); 1026 font-size: 0.62rem; 1027 color: var(--muted); 1028 letter-spacing: 0.05em; 1029 text-transform: uppercase; 1030 } 1031 1032 .disc-extra-prose { 1033 font-size: 0.9rem; 1034 color: var(--text-2); 1035 } 1036 1037 .disc-extra-prose p { 1038 margin-bottom: 0.75rem; 1039 } 1040 1041 .disc-extra-prose p:last-child { 1042 margin-bottom: 0; 1043 } 1044 1045 .disc-extra-kind-label { 1046 font-family: var(--mono); 1047 font-size: 0.62rem; 1048 color: var(--muted); 1049 letter-spacing: 0.1em; 1050 text-transform: uppercase; 1051 margin: 1rem 0 0.5rem; 1052 padding-bottom: 0.5rem; 1053 border-bottom: 1px dashed var(--border); 1054 } 1055 1056 .disc-extra-kind-label:first-child { 1057 margin-top: 0; 1058 } 1059 1060 /* ── SUBJECT QUIZZES (LINKS PARA EXERCÍCIOS) ── */ 1061 .subject-quizzes { 1062 margin: 1.5rem 0 2rem; 1063 padding: 1rem; 1064 background: color-mix(in srgb, var(--amber) 3%, transparent); 1065 border: 1px solid var(--border); 1066 border-radius: 4px; 1067 } 1068 1069 .sq-label { 1070 font-family: var(--mono); 1071 font-size: 0.62rem; 1072 color: var(--muted); 1073 letter-spacing: 0.1em; 1074 text-transform: uppercase; 1075 margin-bottom: 0.75rem; 1076 } 1077 1078 .sq-list { 1079 display: flex; 1080 flex-direction: column; 1081 gap: 0.5rem; 1082 } 1083 1084 .sq-item { 1085 display: flex; 1086 justify-content: space-between; 1087 align-items: center; 1088 padding: 0.6rem 0.75rem; 1089 background: var(--surface); 1090 border: 1px solid var(--border); 1091 border-radius: 3px; 1092 text-decoration: none; 1093 color: var(--text); 1094 transition: all var(--t); 1095 } 1096 1097 .sq-item:hover { 1098 border-color: var(--amber); 1099 background: color-mix(in srgb, var(--amber) 8%, transparent); 1100 } 1101 1102 .sq-name { 1103 font-size: 0.9rem; 1104 flex: 1; 1105 } 1106 1107 .sq-meta { 1108 font-family: var(--mono); 1109 font-size: 0.62rem; 1110 color: var(--muted); 1111 letter-spacing: 0.05em; 1112 text-transform: uppercase; 1113 flex-shrink: 0; 1114 } 1115 1116 /* ── SUBJECT LIST ── */ 1117 .subject-list { 1118 display: flex; 1119 flex-direction: column; 1120 gap: 0; 1121 } 1122 1123 .subject-row { 1124 display: flex; 1125 justify-content: space-between; 1126 align-items: center; 1127 padding: 0.75rem 0; 1128 border-bottom: 1px solid var(--border); 1129 text-decoration: none; 1130 color: var(--text); 1131 transition: all var(--t); 1132 } 1133 1134 .subject-row:last-child { 1135 border-bottom: none; 1136 } 1137 1138 .subject-row:hover { 1139 color: var(--amber); 1140 padding-left: 0.5rem; 1141 } 1142 1143 .subject-row-name { 1144 font-size: 0.95rem; 1145 flex: 1; 1146 } 1147 1148 .subject-row-meta { 1149 font-family: var(--mono); 1150 font-size: 0.62rem; 1151 color: var(--muted); 1152 letter-spacing: 0.1em; 1153 text-transform: uppercase; 1154 flex-shrink: 0; 1155 } 1156 1157 .empty-note { 1158 font-size: 0.9rem; 1159 color: var(--muted); 1160 font-style: italic; 1161 padding: 1rem 0; 1162 } 1163 1164 /* ── RESPONSIVIDADE ── */ 1165 @media (max-width: 768px) { 1166 main { 1167 padding: 1.5rem; 1168 } 1169 1170 .disc-grid { 1171 grid-template-columns: 1fr; 1172 } 1173 1174 .res-stats { 1175 gap: 2rem; 1176 } 1177 1178 header { 1179 padding: 1rem 1.5rem; 1180 } 1181 } 1182 1183 @media (max-width: 480px) { 1184 main { 1185 padding: 1rem; 1186 } 1187 1188 .text-title { 1189 font-size: 1.2rem; 1190 } 1191 1192 .prose { 1193 font-size: 0.95rem; 1194 } 1195 1196 .options { 1197 gap: 0.5rem; 1198 } 1199 1200 .opt { 1201 padding: 0.6rem 0.75rem; 1202 min-height: 2.5rem; 1203 } 1204 1205 .floater { 1206 max-width: 280px; 1207 } 1208 1209 .res-score { 1210 font-size: 2.5rem; 1211 } 1212 1213 .res-stats { 1214 gap: 1.5rem; 1215 } 1216 } 1217 1218 /* ── FLASHCARD ── */ 1219 .flashcard-area { 1220 display: flex; 1221 flex-direction: column; 1222 gap: 1.5rem; 1223 } 1224 1225 .flashcard { 1226 perspective: 1000px; 1227 cursor: pointer; 1228 height: 300px; 1229 position: relative; 1230 } 1231 1232 .flashcard-front, 1233 .flashcard-back { 1234 position: absolute; 1235 width: 100%; 1236 height: 100%; 1237 backface-visibility: hidden; 1238 display: flex; 1239 align-items: center; 1240 justify-content: center; 1241 border: 2px solid var(--amber); 1242 border-radius: 4px; 1243 padding: 2rem; 1244 text-align: center; 1245 transition: transform 0.6s; 1246 } 1247 1248 .flashcard-front { 1249 background: var(--surface); 1250 color: var(--text); 1251 transform: rotateY(0deg); 1252 } 1253 1254 .flashcard-back { 1255 background: var(--amber); 1256 color: #0f0f13; 1257 transform: rotateY(180deg); 1258 } 1259 1260 .flashcard.flipped .flashcard-front { 1261 transform: rotateY(180deg); 1262 } 1263 1264 .flashcard.flipped .flashcard-back { 1265 transform: rotateY(0deg); 1266 } 1267 1268 .flashcard-hint { 1269 font-size: 1.2rem; 1270 opacity: 0.7; 1271 } 1272 1273 .flashcard-btns { 1274 display: flex; 1275 gap: 0.75rem; 1276 justify-content: center; 1277 } 1278 1279 /* ── FILTRO NA HOME ── */ 1280 .filter-container { 1281 margin-bottom: 2rem; 1282 display: flex; 1283 gap: 1rem; 1284 align-items: center; 1285 } 1286 1287 .filter-input { 1288 flex: 1; 1289 padding: 0.75rem 1rem; 1290 background: var(--surface); 1291 color: var(--text); 1292 border: 1px solid var(--border); 1293 border-radius: 4px; 1294 font-size: 1rem; 1295 font-family: var(--serif); 1296 } 1297 1298 .filter-input:focus { 1299 outline: none; 1300 border-color: var(--amber); 1301 } 1302 1303 .filter-count { 1304 color: var(--amber); 1305 font-size: 0.9rem; 1306 white-space: nowrap; 1307 } 1308 1309 /* ── DASHBOARD ── */ 1310 .dashboard-container { 1311 background: var(--surface); 1312 border: 1px solid var(--border); 1313 border-radius: 4px; 1314 padding: 2rem; 1315 margin-bottom: 2rem; 1316 } 1317 1318 .dashboard-overview { 1319 display: grid; 1320 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 1321 gap: 1rem; 1322 margin: 1.5rem 0; 1323 } 1324 1325 .stat-card { 1326 background: #0f0f13; 1327 border: 1px solid var(--border); 1328 border-radius: 4px; 1329 padding: 1.5rem; 1330 text-align: center; 1331 } 1332 1333 .stat-label { 1334 font-size: 0.9rem; 1335 color: var(--muted); 1336 margin-bottom: 0.5rem; 1337 } 1338 1339 .stat-value { 1340 font-size: 2rem; 1341 font-weight: 600; 1342 color: var(--amber); 1343 } 1344 1345 .dashboard-disciplines { 1346 margin-top: 2rem; 1347 } 1348 1349 .disc-stat { 1350 margin-bottom: 1.5rem; 1351 padding-bottom: 1rem; 1352 border-bottom: 1px solid var(--border); 1353 } 1354 1355 .disc-name { 1356 font-weight: 600; 1357 margin-bottom: 0.5rem; 1358 } 1359 1360 .disc-bar { 1361 height: 8px; 1362 background: #0f0f13; 1363 border-radius: 4px; 1364 overflow: hidden; 1365 margin-bottom: 0.5rem; 1366 } 1367 1368 .disc-progress { 1369 height: 100%; 1370 background: #4ade80; 1371 transition: width 0.3s; 1372 } 1373 1374 .disc-info { 1375 display: flex; 1376 justify-content: space-between; 1377 font-size: 0.85rem; 1378 color: var(--muted); 1379 } 1380 1381 .dashboard-actions { 1382 margin-top: 2rem; 1383 text-align: center; 1384 } 1385 1386 /* ── MODO ESCURO TOGGLE ── */ 1387 #dark-mode-toggle { 1388 background: none; 1389 border: none; 1390 font-size: 1.5rem; 1391 cursor: pointer; 1392 margin-left: auto; 1393 padding: 0.5rem; 1394 border-radius: 4px; 1395 transition: background-color var(--t); 1396 } 1397 1398 #dark-mode-toggle:hover { 1399 background-color: var(--border); 1400 } 1401 1402 /* ── PRINT-FRIENDLY ── */ 1403 @media print { 1404 header, 1405 .filter-container, 1406 .dashboard-container, 1407 .btn, 1408 .next-row, 1409 #dark-mode-toggle, 1410 .flashcard-btns, 1411 .open-btns { 1412 display: none; 1413 } 1414 1415 body { 1416 background: white; 1417 color: black; 1418 padding: 0; 1419 } 1420 1421 main { 1422 max-width: 100%; 1423 padding: 0; 1424 } 1425 1426 .q-text, 1427 .flashcard-back { 1428 page-break-inside: avoid; 1429 } 1430 1431 .flashcard { 1432 border: 1px solid black; 1433 background: white; 1434 color: black; 1435 } 1436 1437 .flashcard-front, 1438 .flashcard-back { 1439 position: static; 1440 transform: none; 1441 border: none; 1442 background: white; 1443 color: black; 1444 } 1445 } 1446 1447 /* ── RESPONSIVIDADE MOBILE ── */ 1448 @media (max-width: 768px) { 1449 .dashboard-overview { 1450 grid-template-columns: 1fr; 1451 } 1452 1453 .flashcard { 1454 height: 250px; 1455 } 1456 } 1457 1458 @media (max-width: 480px) { 1459 .flashcard { 1460 height: 200px; 1461 } 1462 1463 .filter-container { 1464 flex-direction: column; 1465 } 1466 1467 .filter-input { 1468 width: 100%; 1469 } 1470 } 1471 1472 /* ── QUIZ INLINE (dentro do assunto) ── */ 1473 .inline-quiz-wrap { 1474 margin: 2.5rem 0 1.5rem; 1475 border: 1px solid var(--border); 1476 border-radius: 4px; 1477 overflow: hidden; 1478 } 1479 1480 .inline-quiz-head { 1481 display: flex; 1482 align-items: center; 1483 justify-content: space-between; 1484 padding: 0.9rem 1.2rem; 1485 background: var(--surface); 1486 border-bottom: 1px solid var(--border); 1487 } 1488 1489 .inline-quiz-head .sq-label { 1490 margin: 0; 1491 padding: 0; 1492 border: none; 1493 } 1494 1495 .inline-quiz-link { 1496 font-family: var(--mono); 1497 font-size: 0.65rem; 1498 letter-spacing: 0.08em; 1499 text-transform: uppercase; 1500 color: var(--muted); 1501 text-decoration: none; 1502 transition: color var(--t); 1503 } 1504 1505 .inline-quiz-link:hover { 1506 color: var(--amber); 1507 } 1508 1509 #inline-quiz-body, 1510 #inline-quiz-player, 1511 #inline-quiz-result { 1512 padding: 1.2rem; 1513 } 1514 1515 .btn-start-quiz { 1516 width: 100%; 1517 padding: 0.85rem; 1518 justify-content: center; 1519 background: color-mix(in srgb, var(--amber) 8%, transparent); 1520 border-color: var(--amber); 1521 color: var(--amber); 1522 } 1523 1524 .btn-start-quiz:hover { 1525 background: color-mix(in srgb, var(--amber) 15%, transparent); 1526 } 1527 1528 /* ── TABELA NA PROSE ── */ 1529 .prose table { 1530 width: 100%; 1531 border-collapse: collapse; 1532 font-size: 0.88rem; 1533 margin: 1.5rem 0; 1534 } 1535 1536 .prose th { 1537 font-family: var(--mono); 1538 font-size: 0.7rem; 1539 letter-spacing: 0.08em; 1540 text-transform: uppercase; 1541 color: var(--muted); 1542 padding: 0.55rem 0.75rem; 1543 border-bottom: 1px solid var(--border-2); 1544 text-align: left; 1545 } 1546 1547 .prose td { 1548 padding: 0.55rem 0.75rem; 1549 border-bottom: 1px solid var(--border); 1550 color: var(--text-2); 1551 vertical-align: top; 1552 } 1553 1554 .prose tr:last-child td { 1555 border-bottom: none; 1556 } 1557 1558 .prose tr:hover td { 1559 background: color-mix(in srgb, var(--amber) 3%, transparent); 1560 }