@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap'); /* General Body & Typography */ body { font-family: 'Be Vietnam Pro', sans-serif; background-color: #f8f9fa; color: #212529; margin: 0; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Header & Navigation */ .header { background-color: #ffffff; padding: 1rem 2rem; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 1000; } .logo { font-size: 1.75rem; font-weight: 700; color: #0d6efd; text-decoration: none; } .nav-buttons .btn { margin-left: 1rem; } .welcome-message { margin-right: 1rem; color: #495057; font-weight: 500; } /* Buttons */ .btn { padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn-primary { background: linear-gradient(45deg, #0d6efd, #0a58ca); color: #ffffff; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(13, 110, 253, 0.25); } .btn-secondary { background-color: #6c757d; color: #fff; } .btn-secondary:hover { background-color: #5a6268; } .btn-success { background-color: #198754; color: white; } .btn-danger { background-color: #dc3545; color: white; } /* Forms */ .form-container { max-width: 500px; margin: 2rem auto; padding: 2.5rem; background-color: #ffffff; border-radius: 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .form-container h1 { text-align: center; margin-bottom: 2rem; font-size: 2.25rem; color: #0d6efd; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: #495057; } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem; border: 1px solid #ced4da; border-radius: 0.5rem; font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); } /* Search Form */ .search-form { display: flex; gap: 1rem; margin: 2rem 0; padding: 1.5rem; background-color: #fff; border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .search-form input { flex-grow: 1; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 0.5rem; } /* Task Cards */ .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; } .task-card { background-color: #ffffff; border-radius: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); padding: 1.75rem; transition: all 0.3s ease; display: flex; flex-direction: column; border: 1px solid transparent; } .task-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); border-color: #0d6efd; } .task-card h3 { margin-top: 0; font-size: 1.35rem; color: #0d6efd; } .task-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; color: #6c757d; font-size: 0.9rem; } .task-meta a { color: #0d6efd; text-decoration: none; font-weight: 600; } .task-payout { font-size: 1.75rem; font-weight: 700; color: #198754; margin-top: auto; padding-top: 1rem; } /* Page Headers */ .page-header { margin-bottom: 2rem; border-bottom: 1px solid #dee2e6; padding-bottom: 1rem; } .page-header h1 { font-size: 2.75rem; color: #0d6efd; } /* Alerts & Status Badges */ .alert { padding: 1rem; margin-bottom: 1rem; border-radius: 0.5rem; border: 1px solid transparent; } .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; } .alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; } .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; } .status-badge { padding: 0.3em 0.7em; font-size: 0.85em; font-weight: 700; border-radius: 0.5rem; text-transform: capitalize; } .status-open { background-color: #cfe2ff; color: #052c65; } .status-pending { background-color: #fff3cd; color: #664d03; } .status-assigned, .status-accepted { background-color: #d1e7dd; color: #0f5132; } .status-rejected { background-color: #f8d7da; color: #842029; } /* Management & Profile Pages */ .task-manage-card, .application-card, .applicant-card, .task-card-profile { background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .applicant-card { display: flex; justify-content: space-between; align-items: center; } .profile-page .page-header { text-align: center; } .profile-section { margin-top: 3rem; } .profile-section h2 { font-size: 1.75rem; margin-bottom: 1.5rem; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; color: #0d6efd; } /* Footer */ .footer { text-align: center; padding: 2rem; margin-top: 2rem; background-color: #e9ecef; border-top: 1px solid #dee2e6; color: #6c757d; } /* Manage Task Card Improvements */ .task-manage-card { display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s; } .task-manage-card:hover { background-color: #f8f9fa; } .task-info h2 { margin-top: 0; margin-bottom: 0.25rem; } .task-info h2 a { text-decoration: none; color: #0d6efd; } .task-info p { margin-bottom: 0; color: #6c757d; } .task-actions { display: flex; gap: 0.5rem; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.875rem; border-radius: 0.25rem; } .task-card h3 a { text-decoration: none; color: inherit; } /* Language Switcher */ .lang-switcher { margin-right: 1rem; } .lang-switcher a { color: #6c757d; text-decoration: none; font-weight: 500; } .lang-switcher a.active { color: #0d6efd; font-weight: 700; } /* RTL Support */ [dir="rtl"] { text-align: right; } [dir="rtl"] .header { flex-direction: row-reverse; } [dir="rtl"] .nav-buttons .btn { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .lang-switcher { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .task-meta { flex-direction: row-reverse; } [dir="rtl"] .search-form { flex-direction: row-reverse; } [dir="rtl"] .form-group label { text-align: right; } [dir="rtl"] .task-manage-card { flex-direction: row-reverse; } [dir="rtl"] .task-actions { flex-direction: row-reverse; } [dir="rtl"] .applicant-card { flex-direction: row-reverse; }