.explore-page { display: flex; flex-direction: column; min-height: 100vh; } .explore-container { max-width: 1200px; margin: 0 auto; padding: 20px; flex: 1; } .search-container { margin: 20px 0; padding: 20px 0; border-bottom: 1px solid #eee; } .search-container form { display: flex; gap: 10px; } .search-container input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .search-container button { padding: 10px 20px; background-color: #0095f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .search-container button:disabled { background-color: #b2dffc; cursor: not-allowed; } .section-title { margin: 30px 0 20px; font-size: 24px; color: #262626; } .search-results { margin-bottom: 30px; padding: 15px; background-color: #fafafa; border-radius: 8px; } .search-results h3 { margin-bottom: 15px; color: #262626; } .users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .user-card { display: flex; flex-direction: column; align-items: center; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; } .user-card:hover { transform: translateY(-5px); } .user-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; } .username { font-weight: 600; color: #262626; } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .post-item { position: relative; aspect-ratio: 1; overflow: hidden; } .post-item img { width: 100%; height: 100%; object-fit: cover; } .post-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .post-item:hover .post-overlay { opacity: 1; } .post-likes, .post-comments { color: white; margin: 0 10px; font-weight: bold; } .loading, .no-posts { text-align: center; padding: 40px; color: #8e8e8e; font-size: 18px; } /* Responsive adjustments */ @media (max-width: 768px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .users-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .posts-grid { grid-template-columns: 1fr; } .search-container form { flex-direction: column; } } .post-user-info2 { display: flex; align-items: center; margin-bottom: 15px; } .post-pin-info { margin: 10px 0; padding: 8px; background-color: #f5f5f5; border-radius: 4px; } .go-to-pin-btn { margin-left: 10px; padding: 4px 8px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; } .go-to-pin-btn:hover { background-color: #0056b3; }