|
649 | 649 | grid-template-columns: 1fr; |
650 | 650 | } |
651 | 651 | } |
| 652 | + |
| 653 | +/* Modern News Box Styles */ |
| 654 | +.news-box { |
| 655 | + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| 656 | + border-radius: 12px; |
| 657 | + padding: 20px; |
| 658 | + margin: 24px 0; |
| 659 | + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
| 660 | + position: relative; |
| 661 | + overflow: hidden; |
| 662 | +} |
| 663 | + |
| 664 | +.news-box::before { |
| 665 | + content: ''; |
| 666 | + position: absolute; |
| 667 | + top: 0; |
| 668 | + left: 0; |
| 669 | + right: 0; |
| 670 | + height: 3px; |
| 671 | + background: linear-gradient(90deg, #861F41 0%, #E5751F 100%); |
| 672 | +} |
| 673 | + |
| 674 | +.news-scroll { |
| 675 | + max-height: 200px; |
| 676 | + overflow-y: auto; |
| 677 | + overflow-x: hidden; |
| 678 | + padding-right: 8px; |
| 679 | +} |
| 680 | + |
| 681 | +/* Modern Scrollbar */ |
| 682 | +.news-scroll::-webkit-scrollbar { |
| 683 | + width: 6px; |
| 684 | +} |
| 685 | + |
| 686 | +.news-scroll::-webkit-scrollbar-track { |
| 687 | + background: rgba(0, 0, 0, 0.05); |
| 688 | + border-radius: 10px; |
| 689 | +} |
| 690 | + |
| 691 | +.news-scroll::-webkit-scrollbar-thumb { |
| 692 | + background: linear-gradient(180deg, #861F41 0%, #E5751F 100%); |
| 693 | + border-radius: 10px; |
| 694 | + transition: all 0.3s ease; |
| 695 | +} |
| 696 | + |
| 697 | +.news-scroll::-webkit-scrollbar-thumb:hover { |
| 698 | + background: linear-gradient(180deg, #E5751F 0%, #861F41 100%); |
| 699 | +} |
| 700 | + |
| 701 | +/* Firefox Scrollbar */ |
| 702 | +.news-scroll { |
| 703 | + scrollbar-width: thin; |
| 704 | + scrollbar-color: #861F41 rgba(0, 0, 0, 0.05); |
| 705 | +} |
| 706 | + |
| 707 | +.news-entry { |
| 708 | + display: flex; |
| 709 | + align-items: center; |
| 710 | + gap: 16px; |
| 711 | + padding: 10px 12px; |
| 712 | + margin-bottom: 8px; |
| 713 | + background: rgba(255, 255, 255, 0.7); |
| 714 | + backdrop-filter: blur(10px); |
| 715 | + border-radius: 8px; |
| 716 | + transition: all 0.3s ease; |
| 717 | + cursor: default; |
| 718 | +} |
| 719 | + |
| 720 | +.news-entry:hover { |
| 721 | + background: rgba(255, 255, 255, 0.9); |
| 722 | + transform: translateX(4px); |
| 723 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| 724 | +} |
| 725 | + |
| 726 | +.news-entry:last-child { |
| 727 | + margin-bottom: 0; |
| 728 | +} |
| 729 | + |
| 730 | +.news-date { |
| 731 | + color: #861F41; |
| 732 | + font-size: 0.8rem; |
| 733 | + font-weight: 700; |
| 734 | + min-width: 65px; |
| 735 | + text-transform: uppercase; |
| 736 | + letter-spacing: 0.5px; |
| 737 | + opacity: 0.8; |
| 738 | +} |
| 739 | + |
| 740 | +.news-title { |
| 741 | + color: #2c3e50; |
| 742 | + font-size: 0.95rem; |
| 743 | + font-weight: 500; |
| 744 | + flex: 1; |
| 745 | + line-height: 1.4; |
| 746 | +} |
| 747 | + |
| 748 | +/* Gradient fade effect at bottom of scroll */ |
| 749 | +.news-box::after { |
| 750 | + content: ''; |
| 751 | + position: absolute; |
| 752 | + bottom: 20px; |
| 753 | + left: 20px; |
| 754 | + right: 20px; |
| 755 | + height: 30px; |
| 756 | + background: linear-gradient(to top, rgba(245, 247, 250, 1), rgba(245, 247, 250, 0)); |
| 757 | + pointer-events: none; |
| 758 | + z-index: 1; |
| 759 | +} |
0 commit comments