background: var(--color-hero-bg); color: var(--color-hero-text); padding: 3rem 0; margin-bottom: 2rem; } .news-card { background: var(--color-bg-white); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-xs); transition: transform 0.2s, box-shadow 0.2s; border-left: 4px solid var(--color-link); } .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .news-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; margin-right: 0.5rem; } .badge-important { background-color: var(--color-danger, #dc3545); color: var(--color-bg-white); } .badge-urgent { background-color: var(--color-warning, #fd7e14); color: var(--color-bg-white); } .category-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; margin-right: 0.5rem; } .news-meta { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 1rem; } .news-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-text-primary); } .news-excerpt { color: var(--color-text-tertiary); line-height: 1.6; margin-bottom: 1rem; } .read-more { color: var(--color-link); text-decoration: none; font-weight: 500; transition: color 0.2s; } .read-more:hover { color: var(--color-link-hover); } .category-filter { background: var(--color-bg-white); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-xs); margin-bottom: 2rem; } .category-btn { display: inline-block; padding: 0.5rem 1rem; margin: 0.25rem; border-radius: 20px; border: 2px solid var(--color-link); background: var(--color-bg-white); color: var(--color-link); text-decoration: none; transition: all 0.2s; font-size: 0.9rem; } .category-btn.active, .category-btn:hover { background: var(--color-link); color: var(--color-bg-white); } .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .pagination a { padding: 0.5rem 1rem; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-link); text-decoration: none; transition: all 0.2s; } .pagination a:hover { background: var(--color-link); color: var(--color-bg-white); border-color: var(--color-link); } .pagination .active { background: var(--color-link); color: var(--color-bg-white); border-color: var(--color-link); }