/* Search Results Page */ .search-results-page { max-width: 800px; margin: 0 auto; padding: 30px 20px; } .search-header { text-align: center; margin-bottom: 40px; } .search-header h1 { margin-bottom: 20px; color: #333; } .search-summary { background: #f8f9fa; padding: 15px 20px; border-radius: 8px; margin-bottom: 30px; color: #666; } /* Results List */ .search-results { margin: 30px 0; } .search-result-item { background: white; border-radius: 8px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border-left: 4px solid transparent; } .search-result-item:hover { transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-left-color: #007bff; } .result-title { margin: 0 0 10px 0; font-size: 20px; } .result-title a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } .result-title a:hover { color: #0056b3; text-decoration: underline; } .result-meta { margin-bottom: 15px; color: #666; font-size: 14px; } .result-date { display: inline-flex; align-items: center; gap: 5px; } .meta-icon { fill: #999; } .result-excerpt { color: #444; line-height: 1.6; margin-bottom: 15px; } .read-more { color: #007bff; text-decoration: none; font-weight: 500; font-size: 14px; transition: color 0.3s ease; } .read-more:hover { color: #0056b3; text-decoration: underline; } /* Pagination */ .pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 40px 0 20px; flex-wrap: wrap; } .pagination a, .pagination span { padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; color: #007bff; text-decoration: none; transition: all 0.3s ease; min-width: 40px; text-align: center; } .pagination a:hover { background: #007bff; color: white; border-color: #007bff; } .pagination .active { background: #007bff; color: white; border-color: #007bff; } .pagination .disabled { color: #999; pointer-events: none; border-color: #dee2e6; } .page-first, .page-last { font-size: 14px; } /* Empty State */ .search-empty { text-align: center; padding: 60px 20px; background: #f8f9fa; border-radius: 8px; } .empty-icon { fill: #ccc; margin-bottom: 20px; } .search-empty h3 { color: #333; margin-bottom: 10px; } .search-empty p { color: #666; } /* Highlight */ .highlight { background: #fff3cd; padding: 2px 4px; border-radius: 3px; font-weight: 500; }