FRONTEND STYLES - NEW THEME
======================================== */
/* Reset and Base Styles */
.frontend-wrapper * {
box-sizing: border-box;
}
.frontend-wrapper {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #374151;
}
/* ====================
AUTHENTICATION HERO BACKGROUNDS
==================== */
/* Login Page - Employer Theme */
.frontend-wrapper .auth-hero-login {
background: url('../images/login-bg.svg') center center/cover no-repeat;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background-attachment: fixed;
}
/* Register Page - Employee Theme */
.frontend-wrapper .auth-hero-register {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.85) 100%),
url('https://d353y1iy70088h.cloudfront.net/Assets/Home/images/employee.jpg') center center/cover no-repeat;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background-attachment: fixed;
}
/* Registration Selection Page - Affiliate Theme */
.frontend-wrapper .auth-hero-registration {
background: url('../images/login-bg.svg') center center/cover no-repeat;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background-attachment: fixed;
}
/* ====================
LAYOUT CONTAINERS
==================== */
.frontend-wrapper .auth-container {
position: relative;
z-index: 10;
width: 100%;
padding: 2rem 0;
}
/* ====================
GLASS CARD DESIGN
==================== */
.frontend-wrapper .auth-card {
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 32px;
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.2),
0 16px 32px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.frontend-wrapper .auth-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #6152aa 0%, #7cdbe3 50%, #7cdbe3 100%);
z-index: 1;
}
/* ====================
CARD HEADER STYLES
==================== */
.frontend-wrapper .auth-card-header {
padding: 3.5rem 3rem 2.5rem;
text-align: center;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
position: relative;
}
.frontend-wrapper .auth-card-body {
padding: 3rem;
}
/* ====================
LOGO AND BRANDING
==================== */
.frontend-wrapper .auth-logo {
max-width: 220px;
height: auto;
margin-bottom: 1.25rem;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
transition: transform 0.3s ease;
}
.frontend-wrapper .auth-logo:hover {
transform: scale(1.05);
}
/* ====================
TYPOGRAPHY
==================== */
.frontend-wrapper .auth-title {
font-size: 2.75rem;
font-weight: 800;
color: #f1f5f9;
margin-bottom: 1rem;
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 50%, #7cdbe3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
letter-spacing: -0.025em;
}
.frontend-wrapper .auth-subtitle {
color: #94a3b8;
font-size: 1.2rem;
margin-bottom: 0;
line-height: 1.7;
font-weight: 500;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.frontend-wrapper .auth-section-title {
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 2rem;
text-align: center;
}
/* ====================
FORM ELEMENTS
==================== */
.frontend-wrapper .auth-form-group {
margin-bottom: 2rem;
padding-top: 20px;
}
.frontend-wrapper .auth-form-label {
font-weight: 700;
color: #374151;
margin-bottom: 0.75rem;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
.frontend-wrapper .auth-form-control {
height: 4rem;
border-color: #334155;
border-radius: 20px;
font-size: 1.125rem;
padding: 1.25rem 1.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
width: 100%;
color: #f1f5f9;
}
.frontend-wrapper .auth-form-control:focus {
border-color: #6152aa;
box-shadow:
0 0 0 6px rgba(59, 130, 246, 0.15),
0 8px 24px rgba(59, 130, 246, 0.1);
background: rgba(255, 255, 255, 1);
outline: none;
transform: translateY(-2px);
}
.frontend-wrapper .auth-form-control::placeholder {
color: #9ca3af;
font-weight: 400;
}
/* File Input Styling */
.frontend-wrapper .auth-form-control[type="file"] {
padding: 1rem 1.75rem;
border: 2px dashed #e2e8f0;
cursor: pointer;
}
.frontend-wrapper .auth-form-control[type="file"]:hover {
border-color: #6152aa;
background: rgba(59, 130, 246, 0.05);
}
/* ====================
PASSWORD TOGGLE
==================== */
.frontend-wrapper .auth-password-toggle {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #64748b;
cursor: pointer;
z-index: 3;
padding: 10px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: all 0.3s ease;
}
.frontend-wrapper .auth-password-toggle:hover {
color: #6152aa;
background: rgba(59, 130, 246, 0.1);
}
/* ====================
BUTTONS
==================== */
.frontend-wrapper .auth-btn-primary {
background: #6152aa;
border: none;
border-radius: 20px;
height: 4rem;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
position: relative;
overflow: hidden;
color: white;
width: 100%;
}
.frontend-wrapper .auth-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.5);
background: #6152aa;
}
.frontend-wrapper .auth-btn-primary:active {
transform: translateY(-1px);
}
.frontend-wrapper .auth-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.frontend-wrapper .auth-btn-primary:hover::before {
left: 100%;
}
/* ====================
FORM CONTROLS
==================== */
.frontend-wrapper .auth-checkbox {
width: 1.375rem;
height: 1.375rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
background: white;
}
.frontend-wrapper .auth-checkbox:checked {
background-color: #6152aa;
border-color: #6152aa;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.frontend-wrapper .auth-checkbox:focus {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.frontend-wrapper .form-check {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding-left: 0;
}
.frontend-wrapper .form-check .form-check-input {
flex-shrink: 0;
margin-top: 0.2rem;
margin-left: 0;
}
.frontend-wrapper .form-check .form-check-label {
font-size: 0.875rem;
line-height: 1.6;
cursor: pointer;
word-break: break-word;
}
/* ====================
LINKS
==================== */
.frontend-wrapper .auth-link {
color: #6152aa;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.frontend-wrapper .auth-link:hover {
color: #4c39a8;
text-decoration: none;
transform: translateY(-1px);
}
.frontend-wrapper .auth-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -3px;
left: 0;
background: #6152aa;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.frontend-wrapper .auth-link:hover::after {
width: calc(100% - 1.5rem);
}
/* ====================
DIVIDERS
==================== */
.frontend-wrapper .auth-divider {
margin: 3rem 0;
position: relative;
text-align: center;
}
.frontend-wrapper .auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
/*background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);*/
}
.frontend-wrapper .auth-divider span {
padding: 0 2rem;
color: #64748b;
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ====================
USER TYPE SELECTION
==================== */
.frontend-wrapper .user-type-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.frontend-wrapper .user-type-option {
background: rgba(30, 41, 59, 0.9);
border-color: #334155;
border-radius: 24px;
padding: 3rem 2.5rem;
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(15px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .user-type-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.frontend-wrapper .user-type-option:hover::before {
opacity: 1;
}
.frontend-wrapper .user-type-option:hover {
border-color: #6152aa;
transform: translateY(-12px);
box-shadow: 0 24px 48px rgba(59, 130, 246, 0.25);
}
.frontend-wrapper .user-type-icon-wrapper i {
font-size: 100px;
color: #ffffff;
z-index: 3;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 140px;
height: 140px;
margin: 0 auto 2rem;
background: #6152aa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
overflow: hidden;
}
.frontend-wrapper .user-type-icon-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.frontend-wrapper .user-type-option:hover .user-type-icon-wrapper {
transform: scale(1.1);
box-shadow: 0 20px 50px rgba(59, 130, 246, 0.5);
}
.frontend-wrapper .user-type-title {
font-size: 2rem;
font-weight: 800;
color: #f1f5f9;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.frontend-wrapper .user-type-description {
color: #fff;
font-size: 1.125rem;
margin-bottom: 2rem;
line-height: 1.7;
position: relative;
z-index: 2;
font-weight: 500;
}
.frontend-wrapper .user-type-action {
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-weight: 700;
font-size: 1.125rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 2;
gap: 0.75rem;
}
.frontend-wrapper .user-type-action i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.frontend-wrapper .user-type-option:hover .user-type-action i {
transform: translateX(8px);
}
/* ====================
ALERTS
==================== */
.frontend-wrapper .auth-alert {
border: none;
border-radius: 20px;
padding: 1.5rem 2rem;
margin-bottom: 2rem;
backdrop-filter: blur(15px);
border-left: 5px solid;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.frontend-wrapper .auth-alert-success {
background: rgba(34, 197, 94, 0.15);
border-left-color: #22c55e;
color: #065f46;
}
.frontend-wrapper .auth-alert-error {
background: rgba(239, 68, 68, 0.15);
border-left-color: #ef4444;
color: #991b1b;
}
.frontend-wrapper .auth-alert-info {
background: rgb(127 208 222);
border-left-color: rgb(127 208 222);
color: white;
}
/* ====================
BADGES
==================== */
.frontend-wrapper .user-type-badge-modern {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: #6152aa;
color: white;
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1.5rem;
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ====================
INPUT GROUPS
==================== */
.frontend-wrapper .input-group .input-group-text {
background: rgba(248, 250, 252, 0.95);
border: 2px solid #e2e8f0;
border-right: none;
border-radius: 20px 0 0 20px;
color: #64748b;
font-weight: 600;
padding: 1.25rem 1.75rem;
backdrop-filter: blur(10px);
}
.frontend-wrapper .input-group .auth-form-control {
border-left: none;
border-radius: 0 20px 20px 0;
}
/* ====================
SELECT2 INTEGRATION
==================== */
.frontend-wrapper .select2-container--default .select2-selection--single {
height: 4rem !important;
border: 2px solid #e2e8f0 !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
}
.frontend-wrapper .select2-container--default .select2-selection--multiple {
min-height: 4rem !important;
border: 2px solid #e2e8f0 !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
padding: 0.5rem 1rem;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 2.2rem !important;
font-weight: 500 !important;
color: #374151 !important;
font-size: 12px !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder{
font-size: 12px !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 4rem !important;
right: 1.75rem !important;
}
.frontend-wrapper .select2-dropdown {
border: 2px solid #e2e8f0 !important;
border-radius: 20px !important;
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
}
.frontend-wrapper .select2-container--default .select2-results__option {
padding: 1rem 1.75rem !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
}
.frontend-wrapper .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #6152aa !important;
}
.frontend-wrapper .select2-container--default .select2-results__option[aria-selected=true] {
background-color: #6152aa !important;
color: white !important;
}
.filter-search-form .icons {
top: 53%;
}
.filter-search-form .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 2rem !important;
}
/* =============================================
HERO SEARCH FORM — MOBILE ONLY
============================================= */
@media (max-width: 767px) {
/* Each filter block: card-like appearance when stacked */
.registration-form .filter-search-form {
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden !important;
}
/* Icon vertical center */
.registration-form .filter-search-form .icons {
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Select2 — fix height, strip border (wrapper card provides the border) */
.registration-form .select2-container--default .select2-selection--single {
height: 52px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
}
.registration-form .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 52px !important;
font-size: 0.9rem !important;
padding-left: 2.25rem !important;
}
.registration-form .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 52px !important;
}
.registration-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #8492a6 !important;
}
/* Button — match dropdown height */
.registration-form .btn.searchbtn {
height: 52px !important;
border-radius: 10px !important;
font-size: 1rem !important;
font-weight: 600 !important;
}
/* Spacing between stacked filter items */
.registration-form .col-12 {
margin-bottom: 0.5rem;
}
.registration-form .col-12:last-child {
margin-bottom: 0;
}
/* Remove right margin on mobile */
.registration-form .mb-3.mb-sm-0.me-1 {
margin-right: 0 !important;
margin-bottom: 0 !important;
}
/* Shrink card-body padding on mobile */
.title-heading form.card-body {
padding: 0.75rem !important;
}
}
@media (max-width: 575px) {
.registration-form .select2-container--default .select2-selection--single {
height: 48px !important;
border-radius: 8px !important;
}
.registration-form .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 48px !important;
font-size: 0.85rem !important;
}
.registration-form .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 48px !important;
}
.registration-form .btn.searchbtn {
height: 48px !important;
font-size: 0.9rem !important;
border-radius: 8px !important;
}
.registration-form .filter-search-form {
border-radius: 8px !important;
}
.title-heading form.card-body {
padding: 0.5rem !important;
}
}
/* ====================
ANIMATIONS
==================== */
@keyframes slideInUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* ====================
LOADING STATES
==================== */
.frontend-wrapper .auth-btn-loading {
pointer-events: none;
opacity: 0.8;
}
.frontend-wrapper .auth-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 0.75rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ====================
RESPONSIVE DESIGN - ENHANCED FOR ALL SCREEN SIZES
==================== */
/* Extra Large Screens - 1400px and up */
@media (min-width: 1400px) {
.frontend-wrapper .auth-container {
padding: 3rem 0;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
margin: 4rem 0;
}
.frontend-wrapper .user-type-option {
padding: 4rem 3rem;
}
.frontend-wrapper .auth-card-header {
padding: 4rem 3rem 3rem;
}
.frontend-wrapper .auth-card-body {
padding: 0 3rem 4rem;
}
}
/* Large Screens - 1200px to 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
.frontend-wrapper .user-type-selection {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin: 3.5rem 0;
}
.frontend-wrapper .user-type-option {
padding: 3.5rem 2.75rem;
}
}
/* Medium Large Screens - 1024px to 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
.frontend-wrapper .auth-card {
margin: 1rem;
border-radius: 24px;
}
.frontend-wrapper .auth-title {
font-size: 2.25rem;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 3rem 0;
}
.frontend-wrapper .user-type-option {
padding: 3rem 2.5rem;
}
}
/* Tablets Portrait - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.frontend-wrapper .auth-card {
margin: 1rem;
border-radius: 20px;
}
.frontend-wrapper .auth-card-header,
.frontend-wrapper .auth-card-body {
padding: 2.5rem 2rem;
}
.frontend-wrapper .auth-title {
font-size: 2rem;
}
.frontend-wrapper .auth-subtitle {
font-size: 1.125rem;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 2.5rem 0;
}
.frontend-wrapper .user-type-option {
padding: 2.75rem 2.25rem;
border-radius: 20px;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 110px;
height: 110px;
margin-bottom: 1.5rem;
}
.frontend-wrapper .user-type-icon-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.frontend-wrapper .user-type-title {
font-size: 1.5rem;
}
.frontend-wrapper .user-type-description {
font-size: 1rem;
line-height: 1.6;
}
.frontend-wrapper .auth-form-control {
height: 3.5rem;
font-size: 1rem;
padding: 1rem 1.5rem;
}
.frontend-wrapper .auth-btn-primary {
height: 3.5rem;
font-size: 1rem;
}
.frontend-wrapper .select2-container--default .select2-selection--single {
height: 3.5rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 3.5rem !important;
font-size: 1rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 3.5rem !important;
}
}
/* Mobile Landscape - 576px to 767px */
@media (min-width: 576px) and (max-width: 767px) {
.frontend-wrapper .auth-card {
margin: 0.75rem;
border-radius: 18px;
}
.frontend-wrapper .auth-card-header,
.frontend-wrapper .auth-card-body {
padding: 2rem 1.75rem;
}
.frontend-wrapper .auth-title {
font-size: 1.875rem;
}
.frontend-wrapper .auth-subtitle {
font-size: 1.075rem;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.frontend-wrapper .user-type-option {
padding: 2.5rem 2rem;
border-radius: 18px;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 100px;
height: 100px;
margin-bottom: 1.5rem;
}
.frontend-wrapper .user-type-icon-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.frontend-wrapper .user-type-title {
font-size: 1.375rem;
margin-bottom: 1rem;
}
.frontend-wrapper .user-type-description {
font-size: 0.975rem;
line-height: 1.55;
margin-bottom: 1.5rem;
}
.frontend-wrapper .user-type-action {
font-size: 0.95rem;
}
.frontend-wrapper .auth-form-control {
height: 3.25rem;
font-size: 0.975rem;
padding: 0.875rem 1.25rem;
}
.frontend-wrapper .auth-btn-primary {
height: 3.25rem;
font-size: 0.975rem;
}
}
/* Mobile Portrait - 480px to 575px */
@media (min-width: 480px) and (max-width: 575px) {
.frontend-wrapper .auth-card {
margin: 0.5rem;
border-radius: 16px;
}
.frontend-wrapper .auth-card-header,
.frontend-wrapper .auth-card-body {
padding: 1.75rem 1.5rem;
}
.frontend-wrapper .auth-title {
font-size: 1.75rem;
}
.frontend-wrapper .auth-subtitle {
font-size: 1rem;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.75rem 0;
}
.frontend-wrapper .user-type-option {
padding: 2.25rem 1.75rem;
border-radius: 16px;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 90px;
height: 90px;
margin-bottom: 1.25rem;
}
.frontend-wrapper .user-type-icon-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.frontend-wrapper .user-type-title {
font-size: 1.25rem;
margin-bottom: 0.875rem;
}
.frontend-wrapper .user-type-description {
font-size: 0.925rem;
line-height: 1.5;
margin-bottom: 1.375rem;
}
.frontend-wrapper .user-type-action {
font-size: 0.9rem;
}
.frontend-wrapper .auth-form-control {
height: 3rem;
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
.frontend-wrapper .auth-btn-primary {
height: 3rem;
font-size: 0.9rem;
}
.frontend-wrapper .auth-alert {
padding: 0.75rem 1rem;
border-radius: 12px;
font-size: 0.8rem;
line-height: 1.5;
gap: 0.3rem 0.5rem;
flex-wrap: wrap;
align-items: flex-start;
border-left-width: 3px;
margin-bottom: 1.25rem;
}
.frontend-wrapper .auth-alert svg {
flex-shrink: 0;
align-self: center;
width: 14px;
height: 14px;
}
.frontend-wrapper .auth-alert .auth-link {
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
}
/* Small Mobile - 320px to 479px */
@media (max-width: 479px) {
.frontend-wrapper .auth-hero-registration {
background-attachment: scroll; /* Fix mobile background issues */
}
.frontend-wrapper .auth-container {
padding: 1rem 0;
}
.frontend-wrapper .auth-card {
margin: 0.25rem;
border-radius: 14px;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}
.frontend-wrapper .auth-card-header,
.frontend-wrapper .auth-card-body {
padding: 1.5rem 1.25rem;
}
.frontend-wrapper .auth-logo {
max-height: 40px;
margin-bottom: 1.25rem;
}
.frontend-wrapper .auth-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.frontend-wrapper .auth-subtitle {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.frontend-wrapper .user-type-selection {
grid-template-columns: 1fr;
gap: 1rem;
margin: 1.5rem 0;
}
.frontend-wrapper .user-type-option {
padding: 2rem 1.5rem;
border-radius: 14px;
min-height: auto;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.frontend-wrapper .user-type-icon-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.frontend-wrapper .user-type-title {
font-size: 1.125rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.frontend-wrapper .user-type-description {
font-size: 0.875rem;
line-height: 1.4;
margin-bottom: 1.25rem;
}
.frontend-wrapper .user-type-action {
font-size: 0.85rem;
font-weight: 500;
}
.frontend-wrapper .auth-divider {
margin: 1.5rem 0;
}
.frontend-wrapper .auth-divider span {
font-size: 0.75rem;
padding: 0 1rem;
}
.frontend-wrapper .user-type-badge-modern {
font-size: 0.72rem;
padding: 0.6rem 1.2rem;
gap: 0.4rem;
margin-bottom: 1rem;
}
.frontend-wrapper .user-type-badge-modern svg {
width: 14px;
height: 14px;
}
.frontend-wrapper .auth-alert {
flex-wrap: wrap;
align-items: flex-start;
gap: 0.25rem 0.4rem;
padding: 0.7rem 0.875rem;
border-radius: 10px;
font-size: 0.75rem;
line-height: 1.5;
margin-bottom: 1rem;
border-left-width: 3px;
}
.frontend-wrapper .auth-alert svg {
width: 13px;
height: 13px;
flex-shrink: 0;
align-self: center;
margin-bottom: 0;
}
.frontend-wrapper .auth-alert .auth-link {
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
display: inline;
}
.frontend-wrapper .auth-link {
font-size: 0.925rem;
}
.frontend-wrapper .auth-form-control {
height: 2.75rem;
font-size: 0.875rem;
padding: 0.625rem 0.875rem;
}
.frontend-wrapper .auth-btn-primary {
height: 2.75rem;
font-size: 0.875rem;
}
}
/* Extra Small Mobile - Below 360px */
@media (max-width: 359px) {
.frontend-wrapper .auth-card-header,
.frontend-wrapper .auth-card-body {
padding: 1.25rem 1rem;
}
.frontend-wrapper .auth-title {
font-size: 1.375rem;
}
.frontend-wrapper .auth-subtitle {
font-size: 0.85rem;
}
.frontend-wrapper .user-type-option {
padding: 1.75rem 1.25rem;
}
.frontend-wrapper .user-type-icon-wrapper {
width: 70px;
height: 70px;
}
.frontend-wrapper .user-type-title {
font-size: 1rem;
}
.frontend-wrapper .user-type-description {
font-size: 0.8rem;
}
.frontend-wrapper .user-type-action {
font-size: 0.8rem;
}
.frontend-wrapper .auth-form-control {
height: 2.5rem;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
}
.frontend-wrapper .auth-btn-primary {
height: 2.5rem;
font-size: 0.8rem;
}
}
/* ====================
ACCESSIBILITY
==================== */
@media (prefers-reduced-motion: reduce) {
.frontend-wrapper .auth-card,
.frontend-wrapper .user-type-option,
.frontend-wrapper .auth-form-control,
.frontend-wrapper .auth-btn-primary,
.frontend-wrapper .auth-link {
animation: none;
transition: none;
}
.frontend-wrapper .auth-btn-primary::before {
transition: none;
}
}
@media (prefers-contrast: high) {
.frontend-wrapper .auth-card {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(15, 23, 42, 0.95);
}
.frontend-wrapper .auth-form-control {
border: 3px solid #000;
}
.frontend-wrapper .auth-btn-primary {
background: #000;
border: 3px solid #000;
}
}
/* ====================
AJAX LOADING AND ANIMATIONS
==================== */
.loading-overlay {
position: relative;
opacity: 0.6;
pointer-events: none;
}
.loading-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 100;
}
.loading-overlay::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #6152aa;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 101;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fade-in-up {
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.job-item {
transition: all 0.3s ease;
}
.job-item:hover {
transform: translateY(-2px);
}
#jobsLoading {
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#noResultsMessage {
min-height: 400px;
}
.job-view-toggle .btn {
border-radius: 6px;
}
.job-view-toggle .btn.active {
background-color: #6152aa;
border-color: #6152aa;
color: white;
}
/* Load more button */
#loadMoreBtn {
border-radius: 8px;
padding: 12px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
#loadMoreBtn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* ====================
DARK MODE SUPPORT
==================== */
@media (prefers-color-scheme: dark) {
.frontend-wrapper .auth-card {
background: rgba(15, 23, 42, 0.95);
border-color: rgba(255, 255, 255, 0.1);
}
.frontend-wrapper .auth-title {
color: #f1f5f9;
}
.frontend-wrapper .auth-subtitle {
color: #94a3b8;
}
.frontend-wrapper .auth-form-control {
background: rgba(30, 41, 59, 0.8);
border-color: #334155;
color: #f1f5f9;
}
.frontend-wrapper .user-type-option {
background: rgba(30, 41, 59, 0.9);
border-color: #334155;
}
.frontend-wrapper .user-type-title {
color: #f1f5f9;
}
.frontend-wrapper .user-type-description {
color: #fff;
}
}
.job-data{
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 20px;
font-weight:700;
}
#employee-card-slider .owl-item img.employees-hungry-for-jobs-image {
display: inline-block !important;
width: 120px !important;
}
#employee-card-slider .owl-item .country_image {
display: inline-block !important;
width: auto !important;
}
#employee-card-slider .slide {
text-align: left !important;
}
.employee-slider-item{
padding: 20px;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.employees-hungry-for-jobs-name {
font-size: 13px;
}
#employee-card-slider .owl-item img.employees-hungry-for-jobs-image {
width: 80px !important;
height: 80px;
display: block;
margin: 0 auto;
}
}
.employees-hungry-for-jobs-image {
display: inline-block !important;
width: 120px !important;
}
.employee-card,
.candidate-card {
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.employee-card:hover,
.candidate-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
/*border-color: #6366f1;*/
}
.search-results-header {
background: #6152aa;
color: white;
border-radius: 10px;
}
.skill-tag {
font-size: 11px;
padding: 4px 8px;
margin: 2px;
display: inline-block;
}
.employee-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.emp-verified-badge {
position: absolute;
bottom: 4px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.country-flag {
width: 20px;
height: 15px;
margin-left: 5px;
}
.verified-badge {
position: absolute;
top: -5px;
right: -5px;
background: #6152aa;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.employee-stats {
background: #f8fafc;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}
/* ═══════════════════════════════════════════════════════
FEATURED EMPLOYEE — Search & Homepage Cards
(mirrors the premium applicant kanban card treatment)
═══════════════════════════════════════════════════════ */
/* ── Card shell ── */
.employee-card-featured,
.candidate-card-featured {
border: 2.5px solid #fbbf24 !important;
background: linear-gradient(180deg, #fffbeb 0%, #fffdf5 45%, #fff 75%) !important;
box-shadow:
0 0 0 5px rgba(251,191,36,0.16),
0 8px 36px rgba(245,158,11,0.30),
0 2px 12px rgba(97,82,170,0.10) !important;
overflow: hidden !important;
padding: 0 !important;
animation: emp-feat-pulse 3s ease-in-out infinite;
position: relative;
}
.employee-card-featured:hover,
.candidate-card-featured:hover {
border-color: #f59e0b !important;
box-shadow:
0 0 0 8px rgba(251,191,36,0.22),
0 22px 54px rgba(245,158,11,0.46),
0 8px 24px rgba(97,82,170,0.16) !important;
transform: translateY(-8px) scale(1.014) !important;
}
@keyframes emp-feat-pulse {
0%,100% {
box-shadow:
0 0 0 5px rgba(251,191,36,0.16),
0 8px 36px rgba(245,158,11,0.28),
0 2px 12px rgba(97,82,170,0.08);
}
50% {
box-shadow:
0 0 0 9px rgba(251,191,36,0.26),
0 12px 48px rgba(245,158,11,0.46),
0 2px 12px rgba(97,82,170,0.08);
}
}
/* ── Animated shimmer top strip (same as applicant card) ── */
.emp-feat-strip {
height: 6px;
width: 100%;
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
background-size: 200% auto;
animation: emp-feat-strip-move 2.4s linear infinite;
flex-shrink: 0;
}
@keyframes emp-feat-strip-move {
from { background-position: 0% center; }
to { background-position: 200% center; }
}
/* ── Crown header bar ── */
.emp-feat-header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
margin: 0;
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
background-size: 200% auto;
animation: emp-feat-shimmer 3s linear infinite;
color: #fff;
font-size: 0.67rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.emp-feat-header i {
font-size: 0.76rem;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}
@keyframes emp-feat-shimmer {
from { background-position: 0% center; }
to { background-position: 200% center; }
}
/* ── Inner padding wrapper ── */
.emp-feat-body {
padding: 16px;
}
/* ── Golden avatar ring + pulse ── */
.employee-card-featured .employee-avatar,
.candidate-card-featured img.employees-hungry-for-jobs-image {
border: 3.5px solid #fbbf24 !important;
box-shadow:
0 0 0 4px rgba(251,191,36,0.30),
0 4px 20px rgba(245,158,11,0.40) !important;
animation: emp-feat-avatar-ring 2.5s ease-in-out infinite;
}
@keyframes emp-feat-avatar-ring {
0%,100% {
box-shadow: 0 0 0 3px rgba(251,191,36,0.28), 0 4px 18px rgba(245,158,11,0.34);
}
50% {
box-shadow: 0 0 0 7px rgba(251,191,36,0.44), 0 6px 28px rgba(245,158,11,0.54);
}
}
/* ── Featured name color ── */
.employee-card-featured .emp-feat-name,
.candidate-card-featured .emp-feat-name {
color: #92400e !important;
font-weight: 800 !important;
}
/* ── Stats block when featured ── */
.emp-feat-body .employee-stats {
background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
border: 1.5px solid #fde68a !important;
border-radius: 8px;
padding: 12px;
margin-top: 12px;
}
/* ── Featured badge pill ── */
.emp-feat-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
background-size: 200% auto;
animation: emp-feat-shimmer 2s linear infinite;
color: #fff;
font-size: 0.63rem;
font-weight: 800;
padding: 3px 11px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 2px 10px rgba(245,158,11,0.52);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
/* ── "View Profile" button gold override ── */
.emp-feat-view-btn {
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b) !important;
border-color: #f59e0b !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 3px 12px rgba(245,158,11,0.44) !important;
transition: all 0.22s !important;
}
.emp-feat-view-btn:hover {
background: linear-gradient(135deg, #b45309, #d97706) !important;
box-shadow: 0 6px 20px rgba(245,158,11,0.60) !important;
transform: translateY(-1px) !important;
color: #fff !important;
}
.card .card-img .card-overlay,
.card .image .card-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 25%,
transparent 35%,
rgba(22, 28, 45, 0.9) 100%
);
transition: all .5s ease;
}
/* Show overlay on hover */
.card .image:hover .card-overlay {
opacity: 1;
}
.country_image {
display: inline-block !important;
width: auto !important;
}
/* Featured Jobs Section Styles */
.featured-jobs-section {
padding: 60px 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
position: relative;
overflow: hidden;
}
.featured-jobs-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.featured-jobs-container {
position: relative;
z-index: 2;
}
.featured-job-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
margin: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
}
.featured-job-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(45deg, #6152aa 0%, #7cdbe3 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.featured-job-card:hover::before {
transform: scaleX(1);
}
.featured-job-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.featured-badge {
position: absolute;
top: 20px;
right: 20px;
background: #6152aa;
color: #333;
padding: 8px 16px;
border-radius: 25px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.job-header {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
gap: 20px;
}
.company-logo {
width: 80px;
height: 80px;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
position: relative;
}
.company-logo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.company-logo:hover img {
transform: scale(1.1);
}
.company-logo::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.company-logo:hover::after {
opacity: 1;
}
.job-info {
flex: 1;
min-width: 0;
}
.job-title {
font-size: 24px;
font-weight: 700;
color: white;
margin: 0 0 8px 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.company-name {
font-size: 16px;
color: #6152aa;
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.company-name::before {
font-size: 14px;
}
.job-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #718096;
/*background: rgba(102, 126, 234, 0.1);*/
padding: 6px 12px;
border-radius: 20px;
transition: all 0.3s ease;
}
.meta-item:hover {
background: rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
.meta-item i {
font-size: 12px;
color: #6152aa;
}
.job-description {
font-size: 15px;
line-height: 1.6;
color: #4a5568;
margin-bottom: 25px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.job-benefits {
margin-bottom: 25px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: 15px;
}
.benefit-item {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
padding: 12px 16px;
border-radius: 12px;
font-size: 13px;
color: #4a5568;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateX(5px);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
}
.benefit-item::before {
content: '✓';
color: #6152aa;
font-weight: bold;
}
.job-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 20px;
}
/* Share Job Button */
.share-job-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 20px;
background: #f0eeff;
color: #6152aa;
border: 1.5px solid #d4ccf7;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.share-job-btn i {
font-size: 0.9rem;
}
.share-job-btn:hover {
background: #6152aa;
color: #fff;
border-color: #6152aa;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(97, 82, 170, 0.3);
text-decoration: none;
}
.apply-btn {
background: #6152aa;
color: white;
padding: 14px 28px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.apply-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.apply-btn:hover::before {
left: 100%;
}
.apply-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.apply-btn:active {
transform: translateY(-1px);
}
.job-salary {
font-size: 18px;
font-weight: 700;
color: #2d3748;
background: #6152aa;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.job-posted-date {
font-size: 12px;
color: #a0aec0;
font-style: italic;
}
/* Empty state */
.no-featured-jobs {
text-align: center;
padding: 80px 20px;
color: #718096;
}
.no-featured-jobs i {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}
.no-featured-jobs h3 {
font-size: 24px;
margin-bottom: 10px;
color: #4a5568;
}
.no-featured-jobs p {
font-size: 16px;
opacity: 0.8;
}
/* Owl Carousel Custom Styles for Featured Jobs */
.featured-jobs-carousel.owl-carousel {
margin-bottom: 0;
}
.featured-jobs-carousel .owl-nav {
margin-top: 30px;
text-align: center;
}
.featured-jobs-carousel .owl-nav button {
background: #6152aa;
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 10px;
font-size: 18px;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.featured-jobs-carousel .owl-nav button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.featured-jobs-carousel .owl-dots {
text-align: center;
margin-top: 20px;
}
.featured-jobs-carousel .owl-dots .owl-dot {
display: inline-block;
margin: 0 5px;
}
.featured-jobs-carousel .owl-dots .owl-dot span {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(102, 126, 234, 0.3);
display: block;
transition: all 0.3s ease;
}
.featured-jobs-carousel .owl-dots .owl-dot.active span,
.featured-jobs-carousel .owl-dots .owl-dot:hover span {
background: #6152aa;
transform: scale(1.3);
}
/* Responsive Design for Featured Jobs */
@media (max-width: 768px) {
.featured-jobs-section {
padding: 40px 0;
}
.featured-job-card {
margin: 10px;
padding: 20px;
}
.job-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.company-logo {
width: 60px;
height: 60px;
margin: 0 auto;
}
.job-title {
font-size: 20px;
}
.job-meta {
justify-content: center;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.job-actions {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.apply-btn {
text-align: center;
}
}
@media (max-width: 480px) {
.featured-job-card {
padding: 15px;
margin: 8px;
}
.job-title {
font-size: 18px;
}
.company-name {
font-size: 14px;
}
.meta-item {
font-size: 12px;
padding: 4px 8px;
}
.featured-jobs-carousel .owl-nav button {
width: 40px;
height: 40px;
font-size: 14px;
}
}
/* Mobile fixes for featured-jobs-safe.blade.php */
@media (max-width: 575px) {
/* Tighter card spacing on small screens */
.job-post-list {
margin: 4px 2px !important;
padding: 12px !important;
}
/* Smaller, more readable title */
.job-post-list h5.title {
font-size: 14px;
line-height: 1.4;
}
/* Detail rows: smaller font, wrap long text */
.job-post-list .detail-item {
font-size: 12.5px;
word-break: break-word;
}
.job-post-list .detail-value {
word-break: break-word;
overflow-wrap: break-word;
}
/* Description snippet */
.job-post-list .job-description p {
font-size: 12px;
}
/* Bottom bar: stack on very small screens */
.job-post-list .job-actions {
gap: 6px;
}
/* Ensure featured ribbon doesn't overlap content */
.job-post-list .ribbon {
font-size: 11px;
}
}
.owl-nav{
display: none;
}
/* Companies Section Styles */
.companies-section {
padding: 80px 0;
background: white;
position: relative;
overflow: hidden;
}
.companies-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
/* Glass Card Base Style */
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card-subtle {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Background Animation */
.card-bg-animation {
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 30%,
rgba(102, 126, 234, 0.05) 50%,
transparent 70%);
animation: cardShimmer 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes cardShimmer {
0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
50% { transform: translateX(0%) translateY(0%) rotate(180deg); }
}
/* Company Logo */
.company-logo-wrapper {
position: relative;
}
.company-logo-container {
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.company-logo {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 50%;
transition: all 0.3s ease;
}
.company-logo-placeholder {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: #6152aa;
border-radius: 50%;
color: white;
}
/* Company Info */
.company-info {
position: relative;
z-index: 2;
}
.company-name {
font-size: 18px;
line-height: 1.3;
margin-bottom: 12px;
}
.company-meta .badge {
font-size: 12px;
padding: 6px 12px;
font-weight: 600;
}
/* Company Button */
.company-btn {
background: #6152aa;
color: white;
border: none;
padding: 12px 28px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.company-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.company-btn:hover::before {
left: 100%;
}
.company-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
color: white;
}
.company-card {
cursor: pointer;
min-height: 320px;
height: 100%;
border-radius: 20px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.company-card .card-body {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.company-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 60px rgba(102, 126, 234, 0.2);
}
/* Hover Overlay */
.company-hover-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: inherit;
overflow: hidden;
}
.company-card:hover .company-hover-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
color: white;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.company-card:hover .overlay-content {
transform: translateY(0);
}
.stat-item {
margin-bottom: 15px;
}
.stat-item i {
font-size: 2.5rem;
margin-bottom: 8px;
display: block;
padding-top: 10px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
font-weight: 600;
}
/* Trust Section */
.trust-section {
background: #7cdbe3;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.trust-bg-animation {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: rotate 25s linear infinite reverse;
}
.trust-icon .icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
backdrop-filter: blur(10px);
animation: pulse 2s infinite;
}
.text-white-75 {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Stats Cards */
.stat-card {
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-card:hover {
transform: translateY(-5px);
}
/* Trust Buttons */
.trust-btn {
background: white;
color: #6152aa;
border: none;
font-weight: 600;
transition: all 0.3s ease;
}
.trust-btn:hover {
background: #f8fafc;
color: #6152aa;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.trust-btn-outline {
border: 2px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: white;
font-weight: 600;
transition: all 0.3s ease;
}
.trust-btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
color: white;
transform: translateY(-2px);
}
/* Empty State */
.empty-state {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.empty-icon {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Companies Carousel Responsive */
@media (max-width: 1199px) {
.company-card {
min-height: 260px;
}
.company-logo-container {
width: 80px;
height: 80px;
}
.company-logo {
width: 60px;
height: 60px;
}
}
@media (max-width: 991px) {
.companies-section {
padding: 60px 0;
}
.company-card {
min-height: 240px;
margin-bottom: 20px;
}
.trust-section {
min-height: 350px;
}
.trust-btn,
.trust-btn-outline {
padding: 12px 20px;
font-size: 14px;
}
}
@media (max-width: 767px) {
.company-name {
font-size: 16px;
}
.company-logo-container {
width: 70px;
height: 70px;
}
.company-logo {
width: 50px;
height: 50px;
}
.company-btn {
padding: 10px 20px;
font-size: 13px;
}
.trust-section .card-content {
padding: 3rem 2rem;
}
.stat-card {
margin-bottom: 15px;
}
}
@media (max-width: 575px) {
.company-card {
min-height: 220px;
}
.trust-btn,
.trust-btn-outline {
width: 100%;
margin-bottom: 10px;
}
.d-flex.gap-3 {
flex-direction: column;
gap: 0 !important;
}
}
/* Modern Contact Page Styles */
.contact-hero-section {
min-height: 80vh;
background: #6152aa;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-bg-animation {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%);
animation: rotate 30s linear infinite;
}
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2), transparent),
radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.2), transparent);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
animation: sparkle 3s linear infinite;
}
@keyframes sparkle {
0% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0.8; transform: scale(1); }
}
/* Hero Content */
.hero-content {
position: relative;
z-index: 2;
}
.hero-icon-wrapper {
display: flex;
justify-content: center;
}
.glass-circle {
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
animation: float 3s ease-in-out infinite;
}
.glass-circle i {
font-size: 3.5rem;
color: white;
}
.hero-title {
font-size: 4rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.title-accent {
background: #7acedd;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
}
.hero-description {
font-size: 1.3rem;
line-height: 1.6;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 2rem;
}
.stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 1.5rem 2rem;
min-width: 120px;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #7cdbe3;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
margin-top: 0.5rem;
}
/* Main Contact Section */
.main-contact-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
margin-top: -80px;
position: relative;
z-index: 10;
}
.modern-glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.modern-glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #6152aa 0%, #7cdbe3 100%);
}
.card-header-modern {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.header-icon {
width: 80px;
height: 80px;
background: #6152aa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}
.header-icon i {
font-size: 2.5rem;
color: white;
}
.card-title {
font-size: 2.2rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 0.5rem;
}
.card-subtitle {
font-size: 1.1rem;
color: #718096;
margin: 0;
}
/* Modern Form Styles */
.card-body-modern {
padding: 2.5rem;
}
.alert-modern {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
border-radius: 15px;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.alert-modern.success {
background: linear-gradient(135deg, rgba(72, 187, 120, 0.9) 0%, rgba(56, 161, 105, 0.9) 100%);
color: white;
}
.alert-modern.error {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.9) 0%, rgba(229, 62, 62, 0.9) 100%);
color: white;
}
.alert-icon {
margin-right: 1rem;
font-size: 1.5rem;
}
.alert-content {
flex: 1;
}
.alert-close {
background: none;
border: none;
color: inherit;
font-size: 1.2rem;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.alert-close:hover {
opacity: 1;
}
.form-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-field {
position: relative;
}
.form-field.full-width {
grid-column: 1 / -1;
}
/* Floating Label Inputs */
.floating-input {
position: relative;
margin-bottom: 1rem;
}
.form-input {
width: 100%;
padding: 1.2rem 1rem 0.8rem 3rem;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 2px solid rgba(102, 126, 234, 0.1);
border-radius: 15px;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.form-input:focus {
outline: none;
border-color: #6152aa;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
.form-input.error {
border-color: #e53e3e;
box-shadow: 0 8px 25px rgba(229, 62, 62, 0.15);
}
.floating-label {
position: absolute;
left: 3rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
color: #a0aec0;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.floating-label i {
font-size: 1.1rem;
color: #6152aa;
}
.form-input:focus + .floating-label,
.form-input:not(:placeholder-shown) + .floating-label {
top: 0;
left: 1rem;
transform: translateY(-50%);
font-size: 0.85rem;
color: #6152aa;
background: white;
padding: 0 0.5rem;
border-radius: 8px;
}
.textarea-input {
padding: 1.5rem 1rem 1rem 3rem;
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.textarea-input + .floating-label {
top: 1.5rem;
}
.textarea-input:focus + .floating-label,
.textarea-input:not(:placeholder-shown) + .floating-label {
top: 0;
}
.char-counter {
position: absolute;
bottom: 0.5rem;
right: 1rem;
font-size: 0.85rem;
color: #a0aec0;
background: white;
padding: 0.2rem 0.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.error-message {
position: absolute;
bottom: -1.5rem;
left: 1rem;
color: #e53e3e;
font-size: 0.85rem;
font-weight: 500;
}
/* Phone Field */
.phone-field {
display: flex;
align-items: center;
}
.phone-prefix {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
background: rgba(102, 126, 234, 0.1);
color: #6152aa;
padding: 0.3rem 0.6rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
z-index: 2;
}
.phone-input {
padding-left: 5rem;
}
.phone-label {
left: 5.5rem;
}
.phone-input:focus + .phone-label,
.phone-input:not(:placeholder-shown) + .phone-label {
left: 1rem;
}
/* Section Labels */
.section-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
}
.section-label i {
color: #6152aa;
font-size: 1.2rem;
}
/* Radio Group */
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.radio-option {
flex: 1;
min-width: 180px;
}
.radio-option input[type="radio"] {
opacity: 0;
pointer-events: none;
}
.radio-label {
cursor: pointer;
transition: all 0.3s ease;
display: block;
height: 100%;
}
.radio-card {
width: 100%;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 2px solid rgba(102, 126, 234, 0.1);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.radio-card:hover {
border-color: #6152aa;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}
.radio-option input[type="radio"]:checked + .radio-label .radio-card {
border-color: #6152aa;
background: #6152aa;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(97, 82, 170, 0.35);
}
.radio-option input[type="radio"]:checked + .radio-label .radio-card .radio-title {
color: #ffffff;
}
.radio-option input[type="radio"]:checked + .radio-label .radio-card .radio-desc {
color: rgba(255, 255, 255, 0.8);
}
.radio-option input[type="radio"]:checked + .radio-label .radio-card .radio-icon i {
color: #ffffff;
}
.radio-icon {
margin-bottom: 0.8rem;
}
.radio-icon i {
font-size: 2.5rem;
color: #6152aa;
}
.radio-title {
display: block;
font-weight: 700;
color: #2d3748;
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.radio-desc {
color: #718096;
font-size: 0.9rem;
}
/* Submit Button */
.submit-button {
width: 100%;
position: relative;
background: #6152aa;
color: white;
border: none;
padding: 1.2rem 2rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.submit-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.button-content,
.button-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
z-index: 2;
}
.button-loading {
display: none;
}
.button-bg {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.submit-button:hover .button-bg {
left: 100%;
}
/* Captcha Wrapper */
.captcha-wrapper {
display: flex;
justify-content: center;
padding: 1rem 0;
}
/* Contact Sidebar */
.contact-sidebar {
position: sticky;
top: 2rem;
}
.contact-methods {
padding: 1.5rem;
}
.contact-method {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-method:last-child {
border-bottom: none;
}
.method-icon {
width: 50px;
height: 50px;
background: #6152aa;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-icon i {
font-size: 1.5rem;
color: white;
}
.method-content {
flex: 1;
}
.method-title {
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.3rem;
}
.method-desc {
color: #718096;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.method-link {
color: #6152aa;
font-weight: 600;
text-decoration: none;
font-size: 0.95rem;
}
.method-link:hover {
color: #5a67d8;
text-decoration: underline;
}
/* Quick Links */
.quick-links {
padding: 1.5rem;
}
.quick-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
color: #4a5568;
text-decoration: none;
border-radius: 12px;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
}
.quick-link:hover {
background: rgba(102, 126, 234, 0.1);
color: #6152aa;
transform: translateX(5px);
}
.quick-link i:first-child {
color: #6152aa;
font-size: 1.2rem;
}
.quick-link span {
flex: 1;
font-weight: 500;
}
.quick-link i:last-child {
color: #a0aec0;
transition: transform 0.3s ease;
}
.quick-link:hover i:last-child {
transform: translateX(3px);
}
/* Features Section */
.contact-features-section {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-item {
text-align: center;
padding: 2rem 1.5rem;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.1);
}
.feature-icon {
width: 70px;
height: 70px;
background: #6152aa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.feature-icon i {
font-size: 2rem;
color: white;
}
.feature-title {
font-size: 1.3rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 0.8rem;
}
.feature-desc {
color: #718096;
line-height: 1.6;
font-size: 12px;
}
/* Responsive Design */
@media (max-width: 991px) {
.hero-title {
font-size: 3rem;
}
.hero-stats {
gap: 2rem;
}
.main-contact-section {
padding: 80px 0;
margin-top: -60px;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-sidebar {
margin-top: 3rem;
position: static;
}
.features-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 767px) {
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1.1rem;
}
.hero-stats {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.stat-item {
min-width: 100px;
width: 100%;
box-sizing: border-box;
}
.card-header-modern,
.card-body-modern {
padding: 2rem 1.5rem;
}
.radio-group {
flex-direction: column;
}
.radio-option {
flex: none;
min-width: unset;
width: 100%;
}
.radio-card {
display: flex;
align-items: center;
text-align: left;
padding: 1rem 1.25rem;
gap: 1rem;
}
.radio-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.radio-icon i {
font-size: 1.8rem;
}
.radio-content {
flex: 1;
}
.radio-title {
font-size: 1rem;
margin-bottom: 0.15rem;
}
.radio-desc {
font-size: 0.8rem;
}
.contact-features-section {
padding: 60px 0;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 575px) {
.hero-title {
font-size: 2rem;
}
.glass-circle {
width: 100px;
height: 100px;
}
.glass-circle i {
font-size: 3rem;
}
.card-header-modern,
.card-body-modern {
padding: 1.5rem 1rem;
}
.form-input {
padding: 1rem 0.8rem 0.6rem 2.5rem;
}
.floating-label {
left: 2.5rem;
}
.phone-prefix {
left: 0.8rem;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
}
.phone-input {
padding-left: 4rem;
}
.phone-label {
left: 4.5rem;
}
}
/* ==========================================
AFFILIATE PROGRAM PAGE STYLES
========================================== */
/* Affiliate Hero Section */
.affiliate-hero-section {
position: relative;
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 50%, #f093fb 100%);
overflow: hidden;
min-height: 100vh;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.hero-circles {
position: absolute;
width: 100%;
height: 100%;
}
.hero-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
animation: float 20s infinite linear;
}
.hero-circle-1 {
width: 300px;
height: 300px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.hero-circle-2 {
width: 200px;
height: 200px;
top: 60%;
right: 15%;
animation-delay: -7s;
}
.hero-circle-3 {
width: 150px;
height: 150px;
bottom: 20%;
left: 60%;
animation-delay: -14s;
}
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: particleFloat 15s infinite linear;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-30px) rotate(120deg); }
66% { transform: translateY(30px) rotate(240deg); }
}
@keyframes particleFloat {
0% { transform: translateY(100vh) scale(0); }
10% { transform: translateY(90vh) scale(1); }
90% { transform: translateY(-10vh) scale(1); }
100% { transform: translateY(-20vh) scale(0); }
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2rem;
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
}
.badge-icon {
font-size: 1.2rem;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.text-gradient {
background: linear-gradient(45deg, #fff, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 300;
opacity: 0.9;
}
.hero-description {
font-size: 14px;
line-height: 1.6;
opacity: 0.8;
}
.hero-stats {
display: flex;
gap: 2rem;
margin-top: 2rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 14px;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 14px;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-visual {
position: relative;
z-index: 2;
}
.visual-card {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2rem;
padding: 2rem;
overflow: hidden;
}
.visual-image img {
width: 100%;
border-radius: 1rem;
}
.visual-overlay {
position: absolute;
bottom: 2rem;
left: 2rem;
right: 2rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 1.5rem;
text-align: center;
}
.earning-label {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
}
.earning-amount {
font-size: 2rem;
font-weight: 700;
color: #6152aa;
}
/* Modern Buttons */
.btn-modern {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-radius: 3rem;
border: none;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
}
.btn-primary-modern {
background: #6152aa;
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.btn-light-modern {
background: rgba(255, 255, 255, 0.9);
color: #6152aa;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-content {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 2;
}
.btn-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
border-radius: inherit;
opacity: 0;
transition: all 0.3s ease;
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}
.btn-modern:hover .btn-glow {
opacity: 1;
}
.btn-modern.loading {
pointer-events: none;
opacity: 0.7;
}
/* Section Styling */
.affiliate-process-section,
.commission-section,
.support-section,
.faq-section {
padding: 6rem 0;
}
.commission-section {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.faq-section {
background: linear-gradient(135deg, #e3ffe7 0%, #d9e7ff 100%);
}
.section-header {
margin-bottom: 4rem;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(102, 126, 234, 0.1);
color: #6152aa;
border-radius: 2rem;
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.section-title {
/*font-size: 2.5rem;*/
font-weight: 700;
line-height: 1.3;
color: #2d3748;
margin-bottom: 1rem;
}
.section-description {
font-size: 1.1rem;
color: #718096;
line-height: 1.6;
}
/* Process Cards */
.process-card {
position: relative;
background: white;
border-radius: 1.5rem;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
height: 100%;
overflow: hidden;
}
.process-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #6152aa;
}
.process-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.process-number {
position: absolute;
right: 2rem;
background: #6152aa;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
}
.process-icon {
margin-bottom: 1.5rem;
}
.process-icon img {
width: 60px;
height: auto;
}
.process-title {
font-size: 1.5rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
}
.process-description {
color: #718096;
line-height: 1.6;
}
.process-links {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.process-links li {
margin-bottom: 0.5rem;
}
.link-modern {
color: #6152aa;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.link-modern:hover {
color: #7cdbe3;
text-decoration: underline;
}
.earning-highlights,
.tracking-features {
margin-top: 1.5rem;
}
.highlight-item,
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: rgba(102, 126, 234, 0.05);
border-radius: 0.5rem;
}
.highlight-item i,
.feature-item i {
color: white;
font-size: 1.2rem;
}
.process-arrow {
position: absolute;
bottom: 2rem;
right: 2rem;
color: #6152aa;
font-size: 1.5rem;
opacity: 0.5;
}
/* Commission Tiers */
.commission-tier {
background: white;
border-radius: 1.5rem;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.commission-tier.popular {
border-color: #6152aa;
transform: scale(1.05);
}
.commission-tier:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.commission-tier.popular:hover {
transform: translateY(-5px) scale(1.07);
}
.tier-badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: #6152aa;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 0 0 1rem 1rem;
font-size: 0.8rem;
font-weight: 600;
}
.tier-icon {
font-size: 2rem;
color: #6152aa;
margin-bottom: 1rem;
}
.tier-percentage {
font-size: 3rem;
font-weight: 800;
color: #2d3748;
line-height: 1;
margin-bottom: 1rem;
}
.tier-title {
font-size: 1.5rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
}
.tier-description {
color: #718096;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.tier-features {
text-align: left;
}
.tier-features .feature {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
color: #4a5568;
font-size: 0.9rem;
}
/* Commission Info Card */
.commission-info {
margin-top: 3rem;
}
.info-card {
background: white;
border-radius: 1.5rem;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.info-title {
font-size: 1.8rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 1.5rem;
}
.info-description {
color: #718096;
line-height: 1.7;
margin-bottom: 2rem;
}
.info-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.info-stats .stat-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(102, 126, 234, 0.05);
border-radius: 1rem;
}
.stat-icon {
background: #6152aa;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px; /* icon size */
margin: 0 auto; /* center the circle itself */
}
.stat-text .stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #2d3748;
line-height: 1;
}
.stat-text .stat-label {
font-size: 0.9rem;
color: #718096;
margin-top: 0.25rem;
}
/* Support Section */
.support-content {
padding-right: 2rem;
}
.support-features {
margin-top: 2rem;
}
.support-features .feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-radius: 1rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.support-features .feature-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.support-features .feature-icon {
background: #6152aa;
color: white;
width: 50px;
height: 50px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.feature-title {
font-size: 18px !important;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
.feature-description {
color: #718096;
line-height: 1.5;
}
/* Support Visual Stats Grid */
.support-visual {
padding-left: 2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.stat-card {
background: white;
border-radius: 1.5rem;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.stat-card.primary::before {
background: #6152aa;
}
.stat-card.success::before {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
.stat-card.info::before {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}
.stat-card.warning::before {
background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.stat-card .stat-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.stat-card.primary .stat-icon {
color: #6152aa;
}
.stat-card.success .stat-icon {
color: #48bb78;
}
.stat-card.info .stat-icon {
color: #4299e1;
}
.stat-card.warning .stat-icon {
color: #ed8936;
}
.stat-card .stat-number {
font-size: 2rem;
font-weight: 700;
color: #2d3748;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-card .stat-label {
font-size: 0.9rem;
color: #718096;
font-weight: 500;
}
/* FAQ Section */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: white;
border-radius: 1rem;
margin-bottom: 1rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
cursor: pointer;
transition: all 0.3s ease;
background: white;
}
.faq-question:hover {
background: rgba(102, 126, 234, 0.02);
}
.question-text {
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
margin: 0;
flex: 1;
padding-right: 1rem;
}
.question-icon {
background: #6152aa;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.question-icon i {
font-size: 1rem;
transition: all 0.3s ease;
}
.faq-answer {
overflow: hidden;
transition: all 0.3s ease;
}
.answer-content {
padding: 0 2rem 1.5rem 2rem;
color: #718096;
line-height: 1.6;
border-top: 1px solid rgba(102, 126, 234, 0.1);
}
/* Final CTA Section */
.affiliate-cta-section {
position: relative;
background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #6152aa 100%);
padding: 6rem 0;
overflow: hidden;
}
.cta-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.cta-circles {
position: absolute;
width: 100%;
height: 100%;
}
.cta-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
animation: float 25s infinite linear;
}
.cta-circle-1 {
width: 200px;
height: 200px;
top: 20%;
right: 10%;
animation-delay: 0s;
}
.cta-circle-2 {
width: 150px;
height: 150px;
bottom: 20%;
left: 15%;
animation-delay: -12s;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2rem;
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
color: white;
}
.cta-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.cta-description {
font-size: 1.2rem;
line-height: 1.6;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.cta-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.cta-stats .stat-item {
text-align: center;
}
.cta-stats .stat-number {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
}
.cta-stats .stat-label {
font-size: 1rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.hero-stats {
gap: 1rem;
}
.stat-number {
font-size: 1.5rem;
}
.section-title {
font-size: 2rem;
}
.process-card,
.commission-tier {
margin-bottom: 2rem;
}
.support-content,
.support-visual {
padding: 0;
margin-bottom: 3rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.cta-title {
font-size: 2rem;
}
.cta-stats {
gap: 2rem;
}
.cta-stats .stat-number {
font-size: 2rem;
}
.info-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.hero-stats {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.tier-percentage {
font-size: 2.5rem;
}
.cta-stats {
flex-direction: column;
gap: 1.5rem;
}
.faq-question {
padding: 1rem 1.5rem;
}
.answer-content {
padding: 0 1.5rem 1rem 1.5rem;
}
.question-text {
font-size: 1rem;
}
.info-card {
padding: 2rem 1.5rem;
}
.process-card {
padding: 2rem 1.5rem;
}
.commission-tier {
padding: 2rem 1.5rem;
}
}
/* ===================================== */
/* REGISTRATION FORMS STYLES */
/* ===================================== */
/* Modern Background Design for Registration Forms */
.auth-hero-register {
min-height: 100vh;
position: relative;
overflow: hidden;
}
/* Affiliate Theme */
.auth-hero-register.affiliate-theme {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}
.auth-hero-register.affiliate-theme::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('{{ asset('public/assets/images/affiliate.jpg') }}') center/cover;
opacity: 0.1;
z-index: 1;
}
.auth-hero-register.affiliate-theme::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 154, 158, 0.9), rgba(254, 207, 239, 0.8), rgba(255, 154, 158, 0.7));
z-index: 2;
}
/* Employee Theme */
.auth-hero-register.employee-theme {
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 50%, #f093fb 100%);
}
.auth-hero-register.employee-theme::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('{{ asset('public/assets/images/employee.jpg') }}') center/cover;
opacity: 0.1;
z-index: 1;
}
.auth-hero-register.employee-theme::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.8), rgba(240, 147, 251, 0.7));
z-index: 2;
}
/* Employer Theme */
.auth-hero-register.employer-theme {
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 50%, #f093fb 100%);
}
.auth-hero-register.employer-theme::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('{{ asset('public/assets/images/employer.jpg') }}') center/cover;
opacity: 0.1;
z-index: 1;
}
.auth-hero-register.employer-theme::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(29, 78, 216, 0.9), rgba(59, 130, 246, 0.8), rgba(147, 197, 253, 0.7));
z-index: 2;
}
/* Auth Container and Card */
.auth-container {
position: relative;
z-index: 3;
}
.auth-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
border-radius: 20px;
padding: 30px;
margin: 20px 0;
}
/* Enhanced Form Field Styling */
.auth-form-control {
background: #ffffff !important;
border: 2px solid #d1d5db !important;
border-radius: 12px !important;
padding: 14px 18px !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
color: #111827 !important;
min-height: 56px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
width: 100% !important;
display: block !important;
}
/* Focus states for different themes */
.auth-form-control:focus {
background: #ffffff !important;
outline: none !important;
transform: none !important;
color: #111827 !important;
}
/* Affiliate theme focus */
.affiliate-theme .auth-form-control:focus {
border-color: #ff9a9e !important;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Employee theme focus */
.employee-theme .auth-form-control:focus {
border-color: #6152aa !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Employer theme focus */
.employer-theme .auth-form-control:focus {
border-color: #6152aa !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.auth-form-control:hover:not(:focus) {
border-color: #9ca3af !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.auth-form-control::placeholder {
color: #9ca3af !important;
opacity: 1 !important;
font-weight: 400 !important;
font-size: 1rem !important;
}
.auth-form-control:focus::placeholder {
color: #c4cdd9 !important;
opacity: 1 !important;
}
/* Cross-browser placeholder styling */
.auth-form-control::-webkit-input-placeholder { color: #9ca3af !important; opacity: 1 !important; font-weight: 400 !important; }
.auth-form-control::-moz-placeholder { color: #9ca3af !important; opacity: 1 !important; font-weight: 400 !important; }
.auth-form-control:-ms-input-placeholder { color: #9ca3af !important; font-weight: 400 !important; }
.auth-form-control:-moz-placeholder { color: #9ca3af !important; opacity: 1 !important; font-weight: 400 !important; }
.auth-form-label {
font-weight: 600 !important;
color: #8c9aaf !important;
margin-bottom: 10px !important;
font-size: 15px !important;
display: block !important;
letter-spacing: 0.025em !important;
}
.auth-form-group {
margin-bottom: 24px !important;
}
/* Input Group Styling */
.input-group-text {
background: #f9fafb !important;
border: 2px solid #d1d5db !important;
border-right: none !important;
border-radius: 12px 0 0 12px !important;
padding: 14px 18px !important;
font-weight: 600 !important;
color: #374151 !important;
font-size: 16px !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
}
.input-group .auth-form-control {
border-left: none !important;
border-radius: 0 12px 12px 0 !important;
}
/* Input group focus states */
.input-group:focus-within .input-group-text {
background: #f3f4f6 !important;
color: #111827 !important;
}
.affiliate-theme .input-group:focus-within .input-group-text {
border-color: #ff9a9e !important;
}
.employee-theme .input-group:focus-within .input-group-text {
border-color: #6152aa !important;
}
.employer-theme .input-group:focus-within .input-group-text {
border-color: #6152aa !important;
}
/* Textarea Styling */
textarea.auth-form-control {
min-height: 120px !important;
resize: vertical !important;
font-family: inherit !important;
line-height: 1.6 !important;
}
/* File Input Styling */
input[type="file"].auth-form-control {
padding: 12px 16px !important;
cursor: pointer !important;
font-size: 15px !important;
}
/* File upload button styling for different themes */
.affiliate-theme input[type="file"].auth-form-control::-webkit-file-upload-button {
background: linear-gradient(135deg, #ff9a9e, #fecfef);
border: none;
border-radius: 8px;
color: white;
padding: 8px 16px;
margin-right: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.employee-theme input[type="file"].auth-form-control::-webkit-file-upload-button {
background: linear-gradient(135deg, #6152aa, #7cdbe3);
border: none;
border-radius: 8px;
color: white;
padding: 8px 16px;
margin-right: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.employer-theme input[type="file"].auth-form-control::-webkit-file-upload-button {
background: linear-gradient(135deg, #6152aa, #6152aa);
border: none;
border-radius: 8px;
color: white;
padding: 10px 18px;
margin-right: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
}
/* File upload button hover effects */
.affiliate-theme input[type="file"].auth-form-control::-webkit-file-upload-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 154, 158, 0.3);
}
.employee-theme input[type="file"].auth-form-control::-webkit-file-upload-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.employer-theme input[type="file"].auth-form-control::-webkit-file-upload-button:hover {
background: linear-gradient(135deg, #6152aa, #1e40af);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* Password Toggle Button */
.auth-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #a0aec0;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
z-index: 5;
}
/* Password toggle hover for different themes */
.affiliate-theme .auth-password-toggle:hover {
color: #ff9a9e;
background: rgba(255, 154, 158, 0.1);
}
.employee-theme .auth-password-toggle:hover {
color: #6152aa;
background: rgba(102, 126, 234, 0.1);
}
.employer-theme .auth-password-toggle:hover {
color: #6152aa;
background: rgba(59, 130, 246, 0.1);
}
/* Floating particles animation */
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
/* Money/dollar floating particles */
.money-particle {
position: absolute;
color: rgba(255, 215, 0, 0.3);
font-size: 50px;
animation: floatMoney 8s ease-in-out infinite;
}
@keyframes floatMoney {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.5; }
25% { transform: translateY(-30px) translateX(10px) rotate(90deg); opacity: 1; }
50% { transform: translateY(-15px) translateX(-10px) rotate(180deg); opacity: 0.8; }
75% { transform: translateY(-25px) translateX(15px) rotate(270deg); opacity: 0.6; }
}
/* Business/office floating particles */
.business-particle {
position: absolute;
color: rgba(255, 255, 255, 0.2);
font-size: 56px;
animation: floatBusiness 7s ease-in-out infinite;
}
@keyframes floatBusiness {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.4; }
25% { transform: translateY(-25px) translateX(8px) rotate(45deg); opacity: 0.8; }
50% { transform: translateY(-10px) translateX(-8px) rotate(90deg); opacity: 0.6; }
75% { transform: translateY(-20px) translateX(12px) rotate(135deg); opacity: 0.7; }
}
/* Select2 Modern Styling */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border: 2px solid #d1d5db !important;
border-radius: 12px !important;
min-height: 56px !important;
background: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
transition: all 0.2s ease !important;
}
/* Select2 focus states for different themes */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
background: #ffffff !important;
}
.affiliate-theme .select2-container--default.select2-container--focus .select2-selection--single,
.affiliate-theme .select2-container--default.select2-container--focus .select2-selection--multiple,
.affiliate-theme .select2-container--default.select2-container--open .select2-selection--single,
.affiliate-theme .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #ff9a9e !important;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.employee-theme .select2-container--default.select2-container--focus .select2-selection--single,
.employee-theme .select2-container--default.select2-container--focus .select2-selection--multiple,
.employee-theme .select2-container--default.select2-container--open .select2-selection--single,
.employee-theme .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #6152aa !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.employer-theme .select2-container--default.select2-container--focus .select2-selection--single,
.employer-theme .select2-container--default.select2-container--focus .select2-selection--multiple,
.employer-theme .select2-container--default.select2-container--open .select2-selection--single,
.employer-theme .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #6152aa !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 52px !important;
padding-left: 18px !important;
color: #111827 !important;
font-size: 16px !important;
font-weight: 500 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #9ca3af !important;
opacity: 1 !important;
font-weight: 400 !important;
font-size: 1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 52px !important;
right: 15px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex !important;
align-items: center !important;
padding: 0.5rem 0 !important;
margin: 0 !important;
gap: 0.5rem;
}
.select2-dropdown {
border: 2px solid #d1d5db !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
margin-top: 4px !important;
}
.select2-container--default .select2-results__option {
padding: 12px 18px !important;
font-size: 16px !important;
color: #111827 !important;
font-weight: 500 !important;
}
/* Select2 option highlighting for different themes */
.affiliate-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #ff9a9e !important;
color: white !important;
}
.employee-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #6152aa !important;
color: white !important;
}
.employer-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #6152aa !important;
color: white !important;
}
.select2-search--dropdown .select2-search__field {
border: 2px solid #d1d5db !important;
border-radius: 8px !important;
padding: 12px 16px !important;
margin: 12px !important;
width: calc(100% - 24px) !important;
font-size: 16px !important;
background: #ffffff !important;
color: #111827 !important;
font-weight: 500 !important;
}
/* Search field focus for different themes */
.affiliate-theme .select2-search--dropdown .select2-search__field:focus {
border-color: #ff9a9e !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1) !important;
}
.employee-theme .select2-search--dropdown .select2-search__field:focus {
border-color: #6152aa !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}
.employer-theme .select2-search--dropdown .select2-search__field:focus {
border-color: #6152aa !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
/* Multi-select choice styling for different themes */
.affiliate-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #ff9a9e !important;
border: 1px solid #ff6b9d !important;
border-radius: 8px !important;
color: white !important;
padding: 4px 8px !important;
margin: 2px !important;
font-size: 14px !important;
}
.employee-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #6152aa !important;
border: 1px solid #5a67d8 !important;
border-radius: 8px !important;
color: white !important;
padding: 4px 8px !important;
margin: 2px !important;
font-size: 14px !important;
}
.employer-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #6152aa !important;
border: 1px solid #6152aa !important;
border-radius: 8px !important;
color: white !important;
padding: 4px 8px !important;
margin: 2px !important;
font-size: 14px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: white !important;
margin-right: 6px !important;
font-size: 16px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #fed7d7 !important;
}
/* Form validation styles */
.auth-form-control.is-invalid {
border-color: #e53e3e !important;
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1) !important;
}
.auth-form-control.is-valid {
border-color: #38a169 !important;
box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1) !important;
}
/* Custom class for phone input groups */
.custom {
background: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-size: 16px !important;
line-height: 1.5 !important;
color: #2d3748 !important;
min-height: 50px !important;
transition: all 0.3s ease !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
/* Phone wrapper div — transparent flex container, no double border */
div.custom {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
min-height: unset !important;
height: auto !important;
align-items: stretch !important;
gap: 8px !important;
}
/* Phone prefix span — styled badge */
span.custom.input-group-text {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 1.1rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #fff !important;
background: #6152aa !important;
border: 2px solid #6152aa !important;
border-radius: 16px !important;
white-space: nowrap !important;
letter-spacing: 0.02em !important;
box-shadow: none !important;
height: auto !important;
min-height: unset !important;
}
/* Phone input inside the div.custom wrapper */
div.custom .auth-form-control {
flex: 1 !important;
height: auto !important;
min-height: 3.25rem !important;
border-radius: 16px !important;
}
/* Mobile: ≤767px */
@media (max-width: 767px) {
div.custom {
gap: 6px !important;
}
span.custom.input-group-text {
padding: 0 0.875rem !important;
font-size: 0.85rem !important;
border-radius: 12px !important;
}
div.custom .auth-form-control {
min-height: 50px !important;
font-size: 0.85rem !important;
border-radius: 12px !important;
}
}
/* Mobile: ≤575px */
@media (max-width: 575px) {
div.custom {
gap: 5px !important;
}
span.custom.input-group-text {
padding: 0 0.75rem !important;
font-size: 0.8rem !important;
border-radius: 10px !important;
letter-spacing: 0 !important;
}
div.custom .auth-form-control {
min-height: 46px !important;
font-size: 0.8rem !important;
border-radius: 10px !important;
}
}
/* ===================================== */
/* FULL PAGE LOADER STYLES */
/* ===================================== */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #6152aa;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.page-loader.fade-out {
opacity: 0;
visibility: hidden;
}
.loader-container {
position: relative;
text-align: center;
z-index: 2;
}
.loader-content {
position: relative;
z-index: 3;
}
/* Logo Styling */
.loader-logo {
margin-bottom: 30px;
animation: logoFloat 3s ease-in-out infinite;
}
.loader-logo-img {
max-width: 200px;
height: auto;
filter: brightness(1.1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Loading Animation */
.loader-animation {
margin-bottom: 30px;
display: flex;
justify-content: center;
}
.loader-spinner {
position: relative;
width: 80px;
height: 80px;
}
.spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid transparent;
border-radius: 50%;
animation: spinRing 2s linear infinite;
}
.spinner-ring:nth-child(1) {
border-top-color: rgba(127, 208, 222, 0.9);
animation-delay: 0s;
}
.spinner-ring:nth-child(2) {
border-right-color: rgba(127, 208, 222, 0.9);
animation-delay: 0.5s;
width: 85%;
height: 85%;
top: 7.5%;
left: 7.5%;
}
.spinner-ring:nth-child(3) {
border-bottom-color: rgba(127, 208, 222, 0.9);
animation-delay: 1s;
width: 70%;
height: 70%;
top: 15%;
left: 15%;
}
.spinner-ring:nth-child(4) {
border-left-color: rgba(127, 208, 222, 0.9);
animation-delay: 1.5s;
width: 55%;
height: 55%;
top: 22.5%;
left: 22.5%;
}
@keyframes spinRing {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Loading Text */
.loader-text {
margin-bottom: 40px;
color: white;
}
.loading-title {
font-size: 2rem;
font-weight: 600;
margin: 0;
margin-bottom: 10px;
letter-spacing: 0.5px;
animation: textPulse 2s ease-in-out infinite;
}
.loading-subtitle {
font-size: 1.1rem;
font-weight: 400;
margin: 0;
opacity: 0.9;
animation: textFade 3s ease-in-out infinite;
}
@keyframes textPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes textFade {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.6; }
}
/* Progress Bar */
.loader-progress {
width: 300px;
margin: 0 auto;
}
.progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
overflow: hidden;
position: relative;
margin-bottom: 15px;
}
.progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, rgba(127, 208, 222, 0.8), rgba(127, 208, 222, 1));
border-radius: 10px;
position: relative;
animation: progressGlow 2s ease-in-out infinite;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(127, 208, 222, 0.8));
animation: progressShine 2s linear infinite;
}
@keyframes progressGlow {
0%, 100% { box-shadow: 0 0 10px rgba(127, 208, 222, 0.5); }
50% { box-shadow: 0 0 20px rgba(127, 208, 222, 0.8); }
}
@keyframes progressShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.progress-percentage {
color: white;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
}
/* Background Particles */
.loader-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.loader-particles .particle {
position: absolute;
background: rgba(127, 208, 222, 0.15);
border-radius: 50%;
animation: particleFloat 8s ease-in-out infinite;
}
.loader-particles .particle:nth-child(1) {
width: 20px;
height: 20px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.loader-particles .particle:nth-child(2) {
width: 15px;
height: 15px;
left: 20%;
top: 80%;
animation-delay: 1s;
}
.loader-particles .particle:nth-child(3) {
width: 25px;
height: 25px;
left: 80%;
top: 30%;
animation-delay: 2s;
}
.loader-particles .particle:nth-child(4) {
width: 18px;
height: 18px;
left: 90%;
top: 70%;
animation-delay: 3s;
}
.loader-particles .particle:nth-child(5) {
width: 12px;
height: 12px;
left: 30%;
top: 10%;
animation-delay: 4s;
}
.loader-particles .particle:nth-child(6) {
width: 22px;
height: 22px;
left: 70%;
top: 85%;
animation-delay: 5s;
}
.loader-particles .particle:nth-child(7) {
width: 16px;
height: 16px;
left: 5%;
top: 50%;
animation-delay: 6s;
}
.loader-particles .particle:nth-child(8) {
width: 20px;
height: 20px;
left: 85%;
top: 15%;
animation-delay: 7s;
}
@keyframes particleFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.4;
}
25% {
transform: translateY(-20px) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translateY(-10px) rotate(180deg);
opacity: 1;
}
75% {
transform: translateY(-25px) rotate(270deg);
opacity: 0.6;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.loader-logo-img {
max-width: 150px;
}
.loading-title {
font-size: 1.5rem;
}
.loading-subtitle {
font-size: 1rem;
}
.loader-progress {
width: 250px;
}
.loader-spinner {
width: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.loader-logo-img {
max-width: 120px;
}
.loading-title {
font-size: 1.3rem;
}
.loading-subtitle {
font-size: 0.9rem;
}
.loader-progress {
width: 200px;
}
.loader-spinner {
width: 50px;
height: 50px;
}
}
/* Hide body scroll when loader is active */
body.loader-active {
overflow: hidden;
}
/* ====================
JOB DETAILS PAGE STYLES
==================== */
/* Hero Section */
.frontend-wrapper .job-hero-section {
background: #6152aa;
background-size: 400% 400%;
position: relative;
overflow: hidden;
padding: 4rem 0 3rem;
color: white;
}
.frontend-wrapper .job-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') center/60px;
z-index: 1;
}
.frontend-wrapper .job-hero-section .container {
position: relative;
z-index: 2;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Breadcrumb Styles */
.frontend-wrapper .job-breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 2rem;
}
.frontend-wrapper .job-breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.875rem;
}
.frontend-wrapper .job-breadcrumb li {
display: flex;
align-items: center;
}
.frontend-wrapper .job-breadcrumb li:not(:last-child)::after {
content: '/';
margin: 0 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
.frontend-wrapper .job-breadcrumb a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
.frontend-wrapper .job-breadcrumb a:hover {
color: rgba(255, 255, 255, 0.8);
}
/* Job Header */
.frontend-wrapper .job-header {
margin-bottom: 2rem;
}
.frontend-wrapper .job-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .job-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 1rem;
opacity: 0.95;
}
.frontend-wrapper .job-meta-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 25px;
backdrop-filter: blur(10px);
}
.frontend-wrapper .job-meta-item i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
/* Company Logo */
.frontend-wrapper .company-logo-hero {
text-align: center;
}
.frontend-wrapper .company-logo-hero .logo-container {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: inline-block;
transition: transform 0.3s ease;
}
.frontend-wrapper .company-logo-hero .logo-container:hover {
transform: translateY(-5px);
}
.frontend-wrapper .company-logo-hero img {
max-width: 150px;
max-height: 100px;
object-fit: contain;
}
/* Main Content Area */
.frontend-wrapper .job-content {
margin-top: -2rem;
position: relative;
z-index: 10;
padding-bottom: 4rem;
}
/* Job Details Card */
.frontend-wrapper .job-details-card {
background: white;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: none;
padding: 3rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.frontend-wrapper .job-details-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #6152aa;
}
/* Action Buttons */
.frontend-wrapper .job-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
padding-bottom: 2rem;
}
.frontend-wrapper .btn {
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
border-radius: 12px;
padding: 0.875rem 1.5rem;
position: relative;
overflow: hidden;
}
.frontend-wrapper .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.frontend-wrapper .btn:hover::before {
left: 100%;
}
.frontend-wrapper .btn-primary {
background: linear-gradient(135deg, #6152aa 0%, #6152aa 100%);
color: white !important;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.frontend-wrapper .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
color: white !important;
}
.frontend-wrapper .btn-outline-primary {
border: 2px solid #6152aa;
color: #6152aa !important;
background: transparent;
}
.frontend-wrapper .btn-outline-primary:hover {
background: #6152aa;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.frontend-wrapper .btn-success {
background: #6152aa;
color: white !important;
}
.frontend-wrapper .btn-success:hover {
transform: translateY(-2px);
color: white !important;
}
.frontend-wrapper .btn-white {
background: white;
color: #6152aa !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .btn-white:hover {
background: #f8fafc;
color: #6152aa !important;
transform: translateY(-2px);
}
/* Job Information Grid */
.frontend-wrapper .job-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 0.5rem;
margin-bottom: 3rem;
}
.frontend-wrapper .info-card {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.frontend-wrapper .info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #6152aa;
transition: width 0.3s ease;
}
.frontend-wrapper .info-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
.frontend-wrapper .info-card:hover::before {
width: 6px;
}
.frontend-wrapper .info-card-label {
color: #64748b;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.frontend-wrapper .info-card-value {
color: #1e293b;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
}
.frontend-wrapper .info-card-value a {
color: #6152aa;
text-decoration: none;
transition: color 0.3s ease;
}
.frontend-wrapper .info-card-value a:hover {
color: #6152aa;
}
/* Job Description */
.frontend-wrapper .job-description {
margin-bottom: 3rem;
}
.frontend-wrapper .job-description h3 {
color: #1e293b;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.75rem;
}
.frontend-wrapper .job-description h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: #6152aa;
border-radius: 2px;
}
.frontend-wrapper .job-description-content {
color: #475569;
font-size: 1.125rem;
line-height: 1.8;
max-width: none;
}
.frontend-wrapper .job-description-content p {
margin-bottom: 1.25rem;
}
/* Job Tags */
.frontend-wrapper .job-tags {
margin-top: 2rem;
}
.frontend-wrapper .job-tags h4 {
color: #1e293b;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.frontend-wrapper .tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.frontend-wrapper .job-tag {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e40af;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid #93c5fd;
transition: all 0.3s ease;
}
.frontend-wrapper .job-tag:hover {
background: linear-gradient(135deg, #6152aa 0%, #6152aa 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Sidebar Styles */
.frontend-wrapper .sidebar-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: none;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.frontend-wrapper .sidebar-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: #6152aa;
}
.frontend-wrapper .sidebar-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.frontend-wrapper .sidebar-card h3 {
color: #1e293b;
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
/* Company Info Sidebar */
.frontend-wrapper .company-info-sidebar {
text-align: center;
margin-bottom: 1.5rem;
}
.frontend-wrapper .company-info-sidebar img {
width: 230px;
height: 230px;
object-fit: contain;
margin: 0 auto 1rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .company-info-sidebar h4 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.frontend-wrapper .company-info-sidebar h4 a {
color: #6152aa;
text-decoration: none;
transition: color 0.3s ease;
}
.frontend-wrapper .company-info-sidebar h4 a:hover {
color: #6152aa;
}
.frontend-wrapper .company-description {
margin-top: 1rem;
}
.frontend-wrapper .company-description p {
color: #64748b;
font-size: 0.875rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
.frontend-wrapper .company-description a {
color: #6152aa;
font-size: 0.875rem;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.frontend-wrapper .company-description a:hover {
color: #6152aa;
}
/* Quick Facts */
.frontend-wrapper .quick-facts {
margin-top: 1rem;
}
.frontend-wrapper .fact-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem 0;
border-bottom: 1px solid #e5e7eb;
font-size: 0.875rem;
}
.frontend-wrapper .fact-item:last-child {
border-bottom: none;
}
.frontend-wrapper .fact-item .label {
color: #64748b;
font-weight: 500;
}
.frontend-wrapper .fact-item .value {
color: #1e293b;
font-weight: 600;
}
/* CTA Card */
.frontend-wrapper .cta-card {
background: #6152aa;
color: white;
text-align: center;
}
.frontend-wrapper .cta-card h3 {
color: white;
margin-bottom: 1rem;
}
.frontend-wrapper .cta-card p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Country Flag */
.frontend-wrapper .country-flag {
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
margin-left: 0.5rem;
vertical-align: middle;
}
/* Responsive Design */
@media (max-width: 768px) {
.frontend-wrapper .job-title {
font-size: 2rem;
}
.frontend-wrapper .job-meta {
flex-direction: column;
gap: 0.75rem;
}
.frontend-wrapper .job-info-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.frontend-wrapper .job-actions {
flex-direction: column;
}
.frontend-wrapper .btn {
width: 100%;
justify-content: center;
}
.frontend-wrapper .job-details-card {
padding: 2rem 1.5rem;
margin: 0 1rem 2rem;
}
.frontend-wrapper .sidebar-card {
margin: 0 1rem 2rem;
}
.frontend-wrapper .company-logo-hero img {
max-width: 120px;
max-height: 80px;
}
}
@media (max-width: 480px) {
.frontend-wrapper .job-hero-section {
padding: 2rem 0 1.5rem;
}
.frontend-wrapper .job-title {
font-size: 1.75rem;
}
.frontend-wrapper .job-details-card {
padding: 1.5rem 1rem;
}
.frontend-wrapper .company-logo-hero .logo-container {
padding: 1.5rem;
}
}
/* Animation for page load */
.frontend-wrapper .job-details-card,
.frontend-wrapper .sidebar-card {
animation: slideUpFade 0.6s ease-out forwards;
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Utility Classes */
.frontend-wrapper .text-gradient {
background: #6152aa;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.frontend-wrapper .shadow-custom {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .border-gradient {
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #6152aa, #7cdbe3) border-box;
}
/* ====================
ELEGANT COMPANY JOBS PAGE STYLES
==================== */
/* Hero Section with Sophisticated Design */
.frontend-wrapper .elegant-company-hero {
position: relative;
min-height: 70vh;
background: #6152aa;
overflow: hidden;
display: flex;
align-items: center;
padding: 2rem 0;
}
.frontend-wrapper .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.frontend-wrapper .hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
animation: float 20s ease-in-out infinite;
z-index: 2;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(1deg); }
66% { transform: translateY(-10px) rotate(-1deg); }
}
.frontend-wrapper .elegant-company-hero .container {
position: relative;
z-index: 3;
}
/* Elegant Breadcrumb */
.frontend-wrapper .elegant-breadcrumb {
margin-bottom: 3rem;
}
.frontend-wrapper .breadcrumb-container {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
width: fit-content;
}
.frontend-wrapper .breadcrumb-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 25px;
}
.frontend-wrapper .breadcrumb-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.frontend-wrapper .breadcrumb-item.current {
background: rgba(255, 255, 255, 0.2);
font-weight: 600;
}
.frontend-wrapper .breadcrumb-separator {
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
/* Hero Content */
.frontend-wrapper .hero-content {
display: flex;
flex-direction: column;
gap: 0rem;
}
.frontend-wrapper .company-header-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
padding: 3rem;
display: flex;
align-items: center;
gap: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.frontend-wrapper .company-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.frontend-wrapper .company-logo-elegant {
width: 120px;
height: 120px;
background: #f5f5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
}
.frontend-wrapper .company-logo-elegant::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg, #6152aa, #7cdbe3, #6152aa);
border-radius: 50%;
z-index: -1;
animation: gradientRotate 3s linear infinite;
}
@keyframes gradientRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.frontend-wrapper .company-logo-elegant img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.frontend-wrapper .company-badge {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
padding: 1rem 1.5rem;
text-align: center;
backdrop-filter: blur(10px);
}
.frontend-wrapper .job-count {
display: block;
font-size: 2rem;
font-weight: 700;
color: white;
line-height: 1;
}
.frontend-wrapper .job-label {
display: block;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
margin-top: 0.25rem;
}
.frontend-wrapper .company-info-elegant {
flex: 1;
}
.frontend-wrapper .company-name {
font-size: 2.75rem;
font-weight: 800;
color: white;
margin-bottom: 1.25rem;
line-height: 1.15;
text-align: center;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
word-break: break-word;
}
.frontend-wrapper .company-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*justify-content: center;*/
/*align-items: center;*/
gap: 0.6rem 1rem;
margin-bottom: 1.5rem;
}
.frontend-wrapper .meta-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.35rem 0.85rem;
border-radius: 20px;
backdrop-filter: blur(6px);
}
.frontend-wrapper .meta-item i {
width: 16px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
flex-shrink: 0;
}
.frontend-wrapper .meta-item a {
color: white;
text-decoration: none;
transition: opacity 0.3s ease;
word-break: break-all;
}
.frontend-wrapper .meta-item a:hover {
opacity: 0.8;
}
.frontend-wrapper .country-flag-elegant {
width: 18px;
height: 13px;
object-fit: cover;
border-radius: 2px;
margin-left: 0.25rem;
flex-shrink: 0;
}
.frontend-wrapper .company-description-preview {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
.frontend-wrapper .desc-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.5rem;
opacity: 0.85;
transition: opacity 0.2s;
}
.frontend-wrapper .desc-toggle-btn:hover {
opacity: 1;
}
/* Hero Actions */
.frontend-wrapper .hero-actions {
display: flex;
justify-content: center;
}
.frontend-wrapper .social-connect {
display: flex;
align-items: center;
gap: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 1rem 2rem;
}
.frontend-wrapper .social-label {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.875rem;
}
.frontend-wrapper .social-links-elegant {
display: flex;
gap: 1rem;
}
.frontend-wrapper .social-btn {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.125rem;
}
.frontend-wrapper .social-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: white;
}
.frontend-wrapper .social-btn.linkedin:hover { background: #0077b5; border-color: #0077b5; }
.frontend-wrapper .social-btn.facebook:hover { background: #1877f2; border-color: #1877f2; }
.frontend-wrapper .social-btn.twitter:hover { background: #1da1f2; border-color: #1da1f2; }
.frontend-wrapper .social-btn.pinterest:hover { background: #bd081c; border-color: #bd081c; }
/* Content Area */
.frontend-wrapper .elegant-content-area {
background: #f8fafc;
position: relative;
padding: 4rem 0;
margin-top: -2rem;
z-index: 10;
}
/* Search Section */
.frontend-wrapper .search-section {
margin-bottom: 3rem;
}
.frontend-wrapper .search-card {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.frontend-wrapper .search-header {
text-align: center;
margin-bottom: 2.5rem;
}
.frontend-wrapper .search-header h3 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
}
.frontend-wrapper .search-header p {
font-size: 1.125rem;
color: #64748b;
margin: 0;
}
.frontend-wrapper .elegant-search-form {
display: flex;
flex-direction: column;
gap: 2rem;
}
.frontend-wrapper .search-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.frontend-wrapper .search-field {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.frontend-wrapper .search-field label {
font-weight: 600;
color: #374151;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.frontend-wrapper .input-with-icon {
position: relative;
}
.frontend-wrapper .input-with-icon i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 1rem;
z-index: 2;
}
.frontend-wrapper .input-with-icon input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.frontend-wrapper .input-with-icon input:focus {
outline: none;
border-color: #6152aa;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.frontend-wrapper .select-wrapper {
position: relative;
}
.frontend-wrapper .select-wrapper select {
width: 100%;
padding: 1rem 3rem 1rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1rem;
background: white;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
}
.frontend-wrapper .select-wrapper select:focus {
outline: none;
border-color: #6152aa;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.frontend-wrapper .select-wrapper i {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
}
.frontend-wrapper .search-actions {
display: flex;
justify-content: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
.frontend-wrapper .btn-search-elegant,
.frontend-wrapper .btn-clear-elegant {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
min-width: 150px;
justify-content: center;
}
.frontend-wrapper .btn-search-elegant {
background: linear-gradient(135deg, #6152aa 0%, #6152aa 100%);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.frontend-wrapper .btn-search-elegant:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
color: white;
}
.frontend-wrapper .btn-clear-elegant {
background: transparent;
border: 2px solid #e5e7eb;
color: #64748b;
}
.frontend-wrapper .btn-clear-elegant:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #475569;
transform: translateY(-1px);
}
/* Results Section */
.frontend-wrapper .results-section {
margin-bottom: 4rem;
}
.frontend-wrapper .results-header-elegant {
margin-bottom: 2rem;
}
.frontend-wrapper .results-summary h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
}
.frontend-wrapper .results-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.125rem;
}
.frontend-wrapper .results-count {
color: #64748b;
font-weight: 500;
}
.frontend-wrapper .filter-indicator {
color: #6152aa;
font-weight: 600;
}
/* Elegant Jobs Grid */
.frontend-wrapper .jobs-grid-elegant {
display: grid;
gap: 2rem;
margin-bottom: 3rem;
}
.frontend-wrapper .job-card-elegant {
background: white;
border-radius: 20px;
border: 1px solid #e5e7eb;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.frontend-wrapper .job-card-elegant::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #6152aa 0%, #7cdbe3 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.frontend-wrapper .job-card-elegant:hover::before {
transform: scaleY(1);
}
.frontend-wrapper .job-card-elegant:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
.frontend-wrapper .job-card-header {
padding: 2rem 2rem 1rem;
}
.frontend-wrapper .job-primary-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.frontend-wrapper .job-title-section {
flex: 1;
}
.frontend-wrapper .job-title-elegant {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
}
.frontend-wrapper .job-title-elegant a {
color: #1e293b;
text-decoration: none;
transition: color 0.3s ease;
}
.frontend-wrapper .job-title-elegant a:hover {
color: #6152aa;
}
.frontend-wrapper .job-tags {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.frontend-wrapper .job-tag {
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.frontend-wrapper .job-tag.department {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e40af;
border: 1px solid #93c5fd;
}
.frontend-wrapper .job-tag.type {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 1px solid #6ee7b7;
}
.frontend-wrapper .job-actions-elegant {
display: flex;
gap: 0.5rem;
}
.frontend-wrapper .btn-save-elegant {
width: 44px;
height: 44px;
background: transparent;
border: 2px solid #e5e7eb;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.125rem;
}
.frontend-wrapper .btn-save-elegant:hover {
border-color: #6152aa;
color: #6152aa;
background: rgba(59, 130, 246, 0.05);
}
.frontend-wrapper .btn-save-elegant.saved {
border-color: #ef4444;
color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.frontend-wrapper .job-card-content {
padding: 0 2rem 1rem;
}
.frontend-wrapper .job-meta-elegant {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.frontend-wrapper .meta-item-elegant {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #64748b;
font-weight: 500;
}
.frontend-wrapper .meta-item-elegant i {
color: #94a3b8;
width: 16px;
text-align: center;
}
.frontend-wrapper .meta-item-elegant.salary {
color: #059669;
font-weight: 600;
}
.frontend-wrapper .job-description-elegant {
color: #64748b;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.9375rem;
}
.frontend-wrapper .job-requirements {
margin-bottom: 1rem;
}
.frontend-wrapper .requirement-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #475569;
font-weight: 500;
padding: 0.5rem 0.75rem;
background: #f1f5f9;
border-radius: 8px;
width: fit-content;
}
.frontend-wrapper .requirement-item i {
color: #64748b;
}
.frontend-wrapper .job-card-footer {
padding: 1rem 2rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border-top: 1px solid #f1f5f9;
margin-top: 1rem;
}
.frontend-wrapper .btn-view-elegant,
.frontend-wrapper .btn-apply-elegant {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.frontend-wrapper .btn-view-elegant {
background: transparent;
color: #64748b;
border: 2px solid #e5e7eb;
}
.frontend-wrapper .btn-view-elegant:hover {
background: #f8fafc;
color: #475569;
border-color: #cbd5e1;
}
.frontend-wrapper .btn-apply-elegant {
background: linear-gradient(135deg, #6152aa 0%, #6152aa 100%);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.frontend-wrapper .btn-apply-elegant:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
color: white;
}
.frontend-wrapper .btn-apply-elegant.applied {
background: linear-gradient(135deg, #6152aa 0%, #059669 100%);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
cursor: not-allowed;
}
/* No Jobs State */
.frontend-wrapper .no-jobs-elegant {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 20px;
border: 1px solid #e5e7eb;
}
.frontend-wrapper .no-jobs-illustration {
margin-bottom: 2rem;
}
.frontend-wrapper .illustration-circle {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 3rem;
color: #cbd5e1;
}
.frontend-wrapper .no-jobs-elegant h3 {
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
}
.frontend-wrapper .no-jobs-elegant p {
font-size: 1.125rem;
color: #64748b;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Company Information Section */
.frontend-wrapper .company-info-section {
margin: 4rem 0;
}
.frontend-wrapper .info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.frontend-wrapper .info-card-elegant {
background: white;
border-radius: 20px;
border: 1px solid #e5e7eb;
padding: 2.5rem;
transition: all 0.3s ease;
}
.frontend-wrapper .info-card-elegant:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.frontend-wrapper .info-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.frontend-wrapper .info-header i {
width: 44px;
height: 44px;
background: #6152aa;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.125rem;
}
.frontend-wrapper .info-header h3 {
font-size: 1.375rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.frontend-wrapper .info-content p {
color: #64748b;
line-height: 1.7;
font-size: 1rem;
margin: 0;
}
.frontend-wrapper .entities-elegant {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.frontend-wrapper .entity-badge {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
color: #0369a1;
border: 1px solid #7dd3fc;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
/* Related Companies and Subsidiaries */
.frontend-wrapper .related-section,
.frontend-wrapper .subsidiaries-section {
margin: 4rem 0;
}
.frontend-wrapper .section-header-elegant {
text-align: center;
margin-bottom: 3rem;
}
.frontend-wrapper .section-header-elegant h3 {
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
}
.frontend-wrapper .section-header-elegant p {
font-size: 1.125rem;
color: #64748b;
margin: 0;
}
.frontend-wrapper .companies-carousel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.frontend-wrapper .company-card-elegant {
background: white;
border-radius: 16px;
border: 1px solid #e5e7eb;
overflow: hidden;
transition: all 0.3s ease;
}
.frontend-wrapper .company-card-elegant:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
.frontend-wrapper .company-card-elegant a {
text-decoration: none;
color: inherit;
}
.frontend-wrapper .company-card-inner {
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.frontend-wrapper .company-logo-small {
width: 60px;
height: 60px;
background: #f8fafc;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
flex-shrink: 0;
}
.frontend-wrapper .company-logo-small img {
width: 100%;
height: 100%;
object-fit: contain;
}
.frontend-wrapper .company-card-info h4 {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.25rem;
}
.frontend-wrapper .explore-text {
font-size: 0.875rem;
color: #6152aa;
font-weight: 500;
}
.frontend-wrapper .subsidiaries-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.frontend-wrapper .subsidiary-card {
background: white;
border-radius: 16px;
border: 1px solid #e5e7eb;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.frontend-wrapper .subsidiary-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
.frontend-wrapper .subsidiary-card img {
width: 100%;
height: 80px;
object-fit: contain;
border-radius: 8px;
}
/* Pagination */
.frontend-wrapper .pagination-elegant {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.frontend-wrapper .pagination-elegant .pagination {
display: flex;
gap: 0.5rem;
}
.frontend-wrapper .pagination-elegant .page-link {
padding: 0.875rem 1.125rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
color: #64748b;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
min-width: 44px;
text-align: center;
}
.frontend-wrapper .pagination-elegant .page-link:hover {
border-color: #6152aa;
color: #6152aa;
background: rgba(59, 130, 246, 0.05);
}
.frontend-wrapper .pagination-elegant .page-item.active .page-link {
background: linear-gradient(135deg, #6152aa 0%, #6152aa 100%);
border-color: #6152aa;
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
/* Responsive Design */
@media (max-width: 768px) {
.frontend-wrapper .company-header-card {
flex-direction: column;
text-align: center;
padding: 2rem;
gap: 2rem;
}
.frontend-wrapper .company-name {
font-size: 2rem;
margin-bottom: 1rem;
}
.frontend-wrapper .company-meta {
gap: 0.5rem 0.75rem;
}
.frontend-wrapper .meta-item {
font-size: 0.85rem;
padding: 0.3rem 0.7rem;
}
.frontend-wrapper .company-description-preview {
font-size: 0.95rem;
}
.frontend-wrapper .company-visual {
order: 1;
}
.frontend-wrapper .company-info-elegant {
order: 2;
}
.frontend-wrapper .search-grid {
grid-template-columns: 1fr;
}
.frontend-wrapper .search-actions {
flex-direction: column;
}
.frontend-wrapper .job-card-footer {
flex-direction: column;
gap: 1rem;
}
.frontend-wrapper .btn-view-elegant,
.frontend-wrapper .btn-apply-elegant {
justify-content: center;
width: 100%;
}
.frontend-wrapper .info-grid {
grid-template-columns: 1fr;
}
.frontend-wrapper .companies-carousel {
grid-template-columns: 1fr;
}
.frontend-wrapper .subsidiaries-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
@media (max-width: 480px) {
.frontend-wrapper .elegant-company-hero {
min-height: 60vh;
padding: 1rem 0;
}
.frontend-wrapper .elegant-breadcrumb {
margin-bottom: 1.5rem;
max-width: 100%;
overflow: hidden;
}
.frontend-wrapper .breadcrumb-container {
width: 100%;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.5rem 0.75rem;
gap: 0.4rem;
border-radius: 30px;
}
.frontend-wrapper .breadcrumb-container::-webkit-scrollbar {
display: none;
}
.frontend-wrapper .breadcrumb-item {
padding: 0.3rem 0.5rem;
font-size: 0.78rem;
white-space: nowrap;
flex-shrink: 0;
}
.frontend-wrapper .breadcrumb-item.current span {
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.frontend-wrapper .breadcrumb-separator {
flex-shrink: 0;
}
.frontend-wrapper .company-header-card {
padding: 1.5rem;
}
.frontend-wrapper .company-name {
font-size: 1.5rem;
margin-bottom: 0.85rem;
}
.frontend-wrapper .company-meta {
gap: 0.4rem 0.5rem;
margin-bottom: 1rem;
}
.frontend-wrapper .meta-item {
font-size: 0.78rem;
padding: 0.25rem 0.6rem;
gap: 0.35rem;
}
.frontend-wrapper .meta-item i {
width: 14px;
}
.frontend-wrapper .company-description-preview {
font-size: 0.875rem;
line-height: 1.6;
}
.frontend-wrapper .company-description-wrapper {
margin-top: 0.5rem;
}
.frontend-wrapper .search-card {
padding: 2rem 1.5rem;
}
.frontend-wrapper .job-card-elegant {
margin: 0 0.5rem;
}
.frontend-wrapper .section-header-elegant h3 {
font-size: 1.75rem;
}
}
/* Animation Classes */
.frontend-wrapper .job-card-elegant {
animation: slideUpFade 0.6s ease-out forwards;
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.frontend-wrapper .form-control {
min-height: 4rem !important;
border: 2px solid #e2e8f0 !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
}
/* On focus */
.frontend-wrapper .form-control:focus {
outline: none !important;
}
/* ===================================== */
/* HEADER NAVIGATION STYLING */
/* ===================================== */
#topnav .navigation-menu li a {
color: white !important;
font-weight: 500;
}
#topnav.nav-sticky .navigation-menu li a {
color: black !important;
font-weight: 500;
}
#topnav .logo .logo-light-mode .l-dark {
display: none !important;
}
#topnav .logo .logo-light-mode .l-light {
display: inline-block !important;
}
/* Mobile Menu */
#topnav .menu-arrow {
border-left-color: white !important;
}
#topnav .submenu {
background-color: #6152aa !important;
border: 1px solid rgba(127, 208, 222, 0.2);
}
#topnav .submenu li a {
color: white !important;
}
#topnav .submenu li a:hover {
background-color: rgba(127, 208, 222, 0.1) !important;
color: white !important;
}
/* ===================================== */
/* FOOTER STYLING */
/* ===================================== */
.bg-footer {
background-color: #6152aa !important;
}
.footer-title,
.text-foot {
color: white !important;
}
.footer-list a.text-foot {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer-list a.text-foot:hover {
color: white !important;
}
.footer-bar {
background-color: rgba(97, 86, 131, 0.9) !important;
border-top: 1px solid rgba(127, 208, 222, 0.2);
}
.footer-bar p {
color: white !important;
}
.social-icon a {
color: rgba(255, 255, 255, 0.8) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.social-icon a:hover {
color: #6152aa !important;
background-color: white !important;
border-color: white !important;
}
/* ===================================== */
/* FORCE ALL HEADER TEXT TO WHITE */
/* ===================================== */
#topnav,
#topnav * {
color: white !important;
}
#topnav .navigation-menu,
#topnav .navigation-menu *,
#topnav .submenu,
#topnav .submenu *,
#topnav .navbar-nav,
#topnav .navbar-nav * {
color: white !important;
}
#topnav a,
#topnav a:link,
#topnav a:visited,
#topnav a:hover,
#topnav a:focus,
#topnav a:active {
color: white !important;
}
#topnav.nav-sticky .navigation-menu,
#topnav.nav-sticky .navigation-menu *,
#topnav.nav-sticky .navbar-nav,
#topnav.nav-sticky .navbar-nav * {
color: black !important;
}
#topnav.nav-sticky .submenu,
#topnav.nav-sticky .submenu * {
color: white !important;
}
#topnav .navigation-menu>li .submenu li a {
color: white !important;
}
#topnav.nav-sticky .navigation-menu>li .submenu li a {
color: white !important;
}
#topnav .dropdown-menu,
#topnav .dropdown-menu *,
#topnav .dropdown-item {
color: white !important;
}
#topnav span,
#topnav div,
#topnav li,
#topnav ul {
color: white !important;
}
/* ===================================== */
/* MOBILE NAVIGATION DROPDOWN FIX */
/* ===================================== */
@media (max-width: 991px) {
/* Give the mobile nav dropdown a dark brand background so white text is readable */
#topnav #navigation {
background-color: #6152aa !important;
}
/* Hover state: teal accent */
#topnav #navigation .navigation-menu > li > a:hover,
#topnav #navigation .navigation-menu > li > a:hover * {
color: #7cdbe3 !important;
}
/* Override nav-sticky black-text rule for mobile (background is dark, text must stay white) */
#topnav.nav-sticky #navigation .navigation-menu li a,
#topnav.nav-sticky #navigation .navigation-menu li a * {
color: white !important;
}
}
/* ===================================== */
/* FORCE ALL FOOTER TEXT TO WHITE */
/* ===================================== */
footer,
footer *,
.bg-footer,
.bg-footer *,
.footer-bar,
.footer-bar * {
color: white !important;
}
footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:focus,
footer a:active,
.bg-footer a,
.bg-footer a:link,
.bg-footer a:visited,
.bg-footer a:hover,
.bg-footer a:focus,
.bg-footer a:active {
color: white !important;
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer span,
footer div,
footer li,
footer ul {
color: white !important;
}
.footer-title,
.text-foot,
.footer-list,
.footer-list *,
.social-icon,
.social-icon * {
color: white !important;
}
/* Override any specific classes that might interfere */
.text-muted,
.text-secondary,
.text-dark {
color: #474e5d !important;
}
footer .text-muted,
footer .text-secondary,
footer .text-dark,
.bg-footer .text-muted,
.bg-footer .text-secondary,
.bg-footer .text-dark {
color: white !important;
}
/* ===================================== */
/* ADDITIONAL FOOTER TEXT OVERRIDES */
/* ===================================== */
/* Ensure footer copyright and social elements are white */
.footer-bar p,
.footer-bar span,
.footer-bar div,
.footer-bar a {
color: white !important;
}
/* Social icons text and symbols */
.social-icon a i,
.social-icon a svg,
.social-icon a iconify-icon {
color: white !important;
}
/* Footer social follow text */
.footer-title.text-foot,
.social-icon .footer-title {
color: white !important;
}
/* Any remaining text elements */
footer .mb-0,
footer .fw-medium,
footer .fs-6,
.bg-footer .mb-0,
.bg-footer .fw-medium,
.bg-footer .fs-6 {
color: white !important;
}
/* Badge and notification elements if any */
.badge,
footer .badge,
.bg-footer .badge {
color: white !important;
background: #7cdbe3 !important;
}
a.btn.btn-trust-outline.btn-lg.px-4.py-3:hover {
color: white !important;
}
/* ===============================================
PROFESSIONAL UPLOAD CONTAINER STYLES
=============================================== */
.professional-upload-container {
position: relative;
margin-top: 1rem;
}
.upload-card {
background: #ffffff;
border: 2px dashed #e2e8f0;
border-radius: 20px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
height: 400px;
}
.upload-card:hover {
border-color: #6152aa;
box-shadow: 0 12px 35px rgba(97, 86, 131, 0.15);
transform: translateY(-2px);
}
/* Upload Zone Styles */
.upload-zone {
padding: 2.5rem 1.5rem;
text-align: center;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
background: linear-gradient(135deg, rgba(97, 86, 131, 0.02) 0%, rgba(127, 208, 222, 0.02) 100%);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.upload-zone.dragover {
background: linear-gradient(135deg, rgba(97, 86, 131, 0.08) 0%, rgba(127, 208, 222, 0.08) 100%);
border-color: #6152aa;
transform: scale(1.02);
}
.upload-zone.cv-zone {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, rgba(249, 115, 22, 0.02) 100%);
}
.upload-zone.cv-zone.dragover {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
border-color: #ef4444;
}
/* Upload Content */
.upload-content {
position: relative;
z-index: 2;
}
.upload-icon-wrapper {
margin-bottom: 1.5rem;
}
.upload-icon-bg {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 12px 25px rgba(97, 86, 131, 0.3);
color: white;
position: relative;
overflow: hidden;
}
.upload-icon-bg.cv-icon {
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
box-shadow: 0 12px 25px rgba(239, 68, 68, 0.3);
}
.upload-icon-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
pointer-events: none;
}
.upload-text {
color: #374151;
}
.upload-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #1e293b;
}
.upload-subtitle {
font-size: 1rem;
color: #64748b;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.upload-link {
color: #6152aa;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.upload-specs {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.spec-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #6b7280;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem 1rem;
border-radius: 20px;
border: 1px solid #e5e7eb;
backdrop-filter: blur(10px);
}
/* Drag Overlay */
.drag-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(97, 86, 131, 0.95) 0%, rgba(127, 208, 222, 0.95) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.drag-overlay.cv-drag {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(249, 115, 22, 0.95) 100%);
}
.upload-zone.dragover .drag-overlay {
opacity: 1;
visibility: visible;
}
.drag-content {
text-align: center;
color: white;
}
.drag-content i {
margin-bottom: 1rem;
animation: bounce 1s infinite;
}
.drag-content p {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Progress Area */
.upload-progress-area {
padding: 2rem;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
border-radius: 16px;
margin: 1rem;
height: calc(100% - 2rem);
}
.upload-progress-area.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.progress-content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.progress-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
animation: pulse 2s infinite;
}
.progress-icon.cv-progress {
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}
.progress-info {
flex: 1;
}
.progress-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
}
.progress-bar-container {
display: flex;
align-items: center;
gap: 1rem;
}
.progress-bar-modern {
flex: 1;
height: 8px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill-modern {
height: 100%;
background: linear-gradient(90deg, #22c55e 0%, #3b82f6 100%);
border-radius: 10px;
transition: width 0.3s ease;
position: relative;
overflow: hidden;
}
.progress-fill-modern.cv-progress-fill {
background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
}
.progress-fill-modern::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
animation: shimmer 2s infinite;
}
.progress-percentage {
font-weight: 600;
color: white;
min-width: 40px;
text-align: right;
}
/* Preview Area */
.upload-preview-area {
padding: 2rem;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
border-radius: 16px;
margin: 1rem;
height: calc(100% - 2rem);
cursor: pointer;
transition: all 0.3s ease;
}
.upload-preview-area.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.upload-preview-area.cv-preview-area {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
height: calc(100% - 2rem);
cursor: pointer;
transition: all 0.3s ease;
}
.upload-preview-area.cv-preview-area.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.preview-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
text-align: center;
width: 100%;
}
.preview-content.cv-preview-content {
flex-direction: column;
}
/* Image Preview */
.preview-image-container {
position: relative;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
border: 3px solid white;
margin: 0 auto 1.5rem;
}
.preview-image-pro {
width: 120px;
height: 120px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.preview-overlay-pro {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
}
.preview-image-container:hover .preview-overlay-pro {
opacity: 1;
}
.preview-image-container:hover .preview-image-pro {
transform: scale(1.05);
}
.preview-actions-pro {
display: flex;
gap: 0.5rem;
}
/* CV Document Preview */
.cv-document-preview {
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
border-radius: 16px;
padding: 2rem;
text-align: center;
color: white;
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
margin: 0 auto 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cv-document-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.document-icon {
position: relative;
z-index: 2;
margin-bottom: 0.5rem;
}
.document-actions {
display: none;
gap: 0.75rem;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* File Info */
.file-info {
width: 100%;
text-align: center;
}
.file-info.cv-info {
width: 100%;
text-align: center;
}
.file-details {
width: 100%;
}
.file-name {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
word-break: break-word;
line-height: 1.4;
}
.file-meta {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
margin: 0 0 1rem 0;
font-size: 0.875rem;
color: #6b7280;
}
.file-status {
width: 100%;
display: flex;
justify-content: center;
margin-top: 1rem;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
.status-badge.success {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #166534;
border: 1px solid #86efac;
}
/* Action Buttons */
.action-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-btn.view-btn {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.action-btn.view-btn:hover {
background: #2563eb;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(37, 99, 235, 0.3);
}
.action-btn.edit-btn {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.action-btn.edit-btn:hover {
background: #16a34a;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(22, 163, 74, 0.3);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.action-btn.delete-btn:hover {
background: #dc2626;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(220, 38, 38, 0.3);
}
.action-btn.download-btn {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.action-btn.download-btn:hover {
background: #7c3aed;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(124, 58, 237, 0.3);
}
/* Hidden File Input */
.upload-input-hidden {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
/* Re-upload Functionality */
.upload-preview-area:hover {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
border: 2px dashed #6152aa;
border-radius: 16px;
}
.upload-preview-area.cv-preview-area:hover {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
border: 2px dashed #ef4444;
}
.upload-preview-area::after {
content: '📤 Click to replace';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
pointer-events: none;
backdrop-filter: blur(10px);
}
.upload-preview-area:hover::after {
opacity: 1;
visibility: visible;
}
.upload-note {
display: block;
margin-top: 0.75rem;
color: #6b7280;
font-size: 0.875rem;
text-align: center;
font-style: italic;
}
/* Animations */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0,0,0);
}
40%, 43% {
transform: translate3d(0,-30px,0);
}
70% {
transform: translate3d(0,-15px,0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.upload-zone {
padding: 2rem 1rem;
}
.upload-icon-bg {
width: 60px;
height: 60px;
}
.upload-title {
font-size: 1.25rem;
}
.upload-subtitle {
font-size: 0.875rem;
}
.upload-specs {
flex-direction: column;
gap: 0.75rem;
}
.preview-content {
flex-direction: column;
gap: 1rem;
}
.progress-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.document-actions {
gap: 0.5rem;
}
.action-btn {
padding: 0.4rem 0.8rem;
font-size: 0.7rem;
}
.file-meta {
flex-direction: column;
gap: 0.5rem;
}
}
/* ====================
SELECT2 CUSTOM STYLING
==================== */
/* Select2 Container */
.frontend-wrapper .select2-container {
width: 100% !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Select2 Selection */
.frontend-wrapper .select2-container--default .select2-selection--single,
.frontend-wrapper .select2-container--default .select2-selection--multiple {
background: rgba(255, 255, 255, 0.95);
border: 2px solid #e2e8f0;
border-radius: 20px;
height: auto;
min-height: 4rem;
padding: 0.75rem 1.25rem;
font-size: 1.125rem;
font-weight: 500;
color: #374151;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
}
/* Glassmorphism Effect */
.frontend-wrapper .select2-container--default .select2-selection--single::before,
.frontend-wrapper .select2-container--default .select2-selection--multiple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 20px;
pointer-events: none;
z-index: 1;
}
/* Focus States */
.frontend-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
.frontend-wrapper .select2-container--default.select2-container--focus .select2-selection--multiple,
.frontend-wrapper .select2-container--default.select2-container--open .select2-selection--single,
.frontend-wrapper .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #6152aa;
box-shadow: 0 8px 25px rgba(97, 86, 131, 0.15);
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.98);
}
/* Single Select Styling */
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #374151;
line-height: 2.2;
padding: 0;
position: relative;
z-index: 2;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #9ca3af;
font-weight: 400;
}
/* Arrow Styling */
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
right: 1.25rem;
top: 0;
width: 24px;
z-index: 2;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #6152aa transparent transparent transparent;
border-style: solid;
border-width: 8px 6px 0 6px;
height: 0;
left: 50%;
margin-left: -6px;
margin-top: -4px;
position: absolute;
top: 50%;
width: 0;
transition: all 0.3s ease;
}
.frontend-wrapper .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #6152aa transparent;
border-width: 0 6px 8px 6px;
}
/* Multi-Select Styling */
.frontend-wrapper .select2-container--default .select2-selection--multiple {
padding: 0.5rem;
min-height: 4rem;
display: flex;
align-items: flex-start;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
width: 100%;
direction: ltr;
text-align: left;
}
/* Multi-Select Choice Styling */
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
background: #6152aa;
border: none;
border-radius: 16px;
color: white;
font-size: 0.875rem;
font-weight: 600;
padding: 0.5rem 1rem;
margin: 0;
box-shadow: 0 4px 12px rgba(97, 86, 131, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(97, 86, 131, 0.4);
}
/* Remove Button Styling */
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 0.5rem;
margin-left: -0.25rem;
transition: all 0.2s ease;
position: relative;
z-index: 2;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #ffffff;
transform: scale(1.1);
}
.frontend-wrapper .select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: none;
box-shadow: none;
color: #374151;
font-size: 1.125rem;
font-weight: 500;
padding: 6px 0;
margin: 0;
min-width: 0;
height: 35px;
line-height: 35px;
position: relative;
z-index: 2;
}
.frontend-wrapper .select2-container--default .select2-search--inline .select2-search__field::placeholder {
color: #9ca3af;
opacity: 1;
font-weight: 400;
}
/* Select2 dropdown search box placeholder */
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field::placeholder,
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field::-webkit-input-placeholder {
color: #9ca3af;
opacity: 1;
font-weight: 400;
}
/* Also apply frontend-wrapper placeholder rule to single __placeholder */
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #9ca3af !important;
opacity: 1 !important;
font-weight: 400 !important;
font-size: 1.1rem !important;
}
/* Number inputs: remove browser spin buttons */
.frontend-wrapper .auth-form-control[type="number"]::-webkit-inner-spin-button,
.frontend-wrapper .auth-form-control[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.frontend-wrapper .auth-form-control[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-search--inline {
order: -1;
width: 100%;
flex: 1;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-search__field {
width: 100% !important;
min-width: 0 !important;
}
/* Dropdown Styling */
.frontend-wrapper .select2-container--default .select2-dropdown {
background: rgba(255, 255, 255, 0.95);
border: 2px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
margin-top: 0.5rem;
overflow: hidden;
z-index: 9999;
}
.frontend-wrapper .select2-container--default.select2-container--open .select2-dropdown {
border-color: #6152aa;
box-shadow: 0 25px 50px rgba(97, 86, 131, 0.2);
}
/* Dropdown Search */
.frontend-wrapper .select2-container--default .select2-search--dropdown {
padding: 1rem;
background: linear-gradient(135deg, rgba(97, 86, 131, 0.02) 0%, rgba(127, 208, 222, 0.02) 100%);
border-bottom: 1px solid #e2e8f0;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field {
background: rgba(255, 255, 255, 0.8);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 0.75rem 1rem;
font-size: 1rem;
color: #374151;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: #6152aa;
outline: none;
box-shadow: 0 4px 12px rgba(97, 86, 131, 0.15);
background: rgba(255, 255, 255, 0.95);
}
/* Results Container */
.frontend-wrapper .select2-container--default .select2-results {
max-height: 250px;
overflow-y: auto;
}
.frontend-wrapper .select2-container--default .select2-results > .select2-results__options {
padding: 0.5rem 0;
}
/* Individual Options */
.frontend-wrapper .select2-container--default .select2-results__option {
padding: 0.875rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
border-left: 4px solid transparent;
position: relative;
}
.frontend-wrapper .select2-container--default .select2-results__option:hover {
background:#6152aa;
color: #6152aa;
transform: translateX(4px);
}
.frontend-wrapper .select2-container--default .select2-results__option--highlighted {
background: #6152aa;
color: white;
border-left-color: #ffffff;
transform: translateX(4px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.frontend-wrapper .select2-container--default .select2-results__option--selected {
background: linear-gradient(135deg, rgba(97, 86, 131, 0.1) 0%, rgba(127, 208, 222, 0.1) 100%);
color: #6152aa;
font-weight: 600;
}
.frontend-wrapper .select2-container--default .select2-results__option--selected:hover {
background: linear-gradient(135deg, rgba(97, 86, 131, 0.15) 0%, rgba(127, 208, 222, 0.15) 100%);
}
/* No Results Message */
.frontend-wrapper .select2-container--default .select2-results__option--loading,
.frontend-wrapper .select2-container--default .select2-results__message {
padding: 1.5rem 1.25rem;
color: #6b7280;
font-style: italic;
text-align: center;
}
/* Custom Scrollbar for Dropdown */
.frontend-wrapper .select2-container--default .select2-results::-webkit-scrollbar {
width: 6px;
}
.frontend-wrapper .select2-container--default .select2-results::-webkit-scrollbar-track {
background: rgba(229, 231, 235, 0.3);
border-radius: 3px;
}
.frontend-wrapper .select2-container--default .select2-results::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #6152aa 0%, #7cdbe3 100%);
border-radius: 3px;
transition: background 0.3s ease;
}
.frontend-wrapper .select2-container--default .select2-results::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #4f4663 0%, #6bb8c4 100%);
}
/* Select2 Z-index and Container Fixes */
.frontend-wrapper .select2-container {
z-index: 10;
}
.frontend-wrapper .select2-container--open {
z-index: 1050;
}
.frontend-wrapper .select2-dropdown {
z-index: 1051 !important;
}
/* Fix for Select2 with Bootstrap classes */
.frontend-wrapper .form-select.select2-hidden-accessible + .select2-container {
margin: 0;
}
/* Select2 Error State Integration */
.frontend-wrapper .auth-form-group.has-error .select2-container--default .select2-selection--single,
.frontend-wrapper .auth-form-group.has-error .select2-container--default .select2-selection--multiple {
border-color: #ef4444;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}
.frontend-wrapper .auth-form-group.has-error .select2-container--default.select2-container--focus .select2-selection--single,
.frontend-wrapper .auth-form-group.has-error .select2-container--default.select2-container--focus .select2-selection--multiple {
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2), 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
background-color: #6152aa !important;
color: white !important;
}
/* Select2 Responsive Design */
@media (max-width: 768px) {
/* Single & multiple container base */
.frontend-wrapper .select2-container--default .select2-selection--single,
.frontend-wrapper .select2-container--default .select2-selection--multiple {
min-height: 2.8rem;
padding: 0.35rem 0.75rem;
font-size: 0.82rem;
border-radius: 12px;
}
/* Single arrow */
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
right: 0.75rem;
height: 2.8rem;
}
/* Single rendered text */
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 0.82rem;
line-height: 2.8rem;
padding-left: 0;
}
/* Multiple container */
.frontend-wrapper .select2-container--default .select2-selection--multiple {
padding: 0.3rem 0.5rem;
min-height: 2.8rem;
gap: 0.25rem;
}
/* Rendered area inside multiple */
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered {
gap: 0.3rem;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
direction: ltr !important;
text-align: left !important;
width: 100% !important;
}
/* Selected choice pills */
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
border-radius: 10px;
box-shadow: none;
max-width: calc(100% - 8px);
white-space: normal;
word-break: break-word;
}
/* Remove × button on pills */
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
font-size: 0.75rem;
margin-right: 0.3rem;
}
/* Inline search field (inside multiple) */
.frontend-wrapper .select2-container--default .select2-search--inline .select2-search__field {
font-size: 0.8rem;
padding: 0.25rem 0;
min-width: 80px;
height: auto;
line-height: 1.4;
}
/* Dropdown panel */
.frontend-wrapper .select2-container--default .select2-dropdown {
border-radius: 12px;
font-size: 0.82rem;
}
/* Search box inside dropdown */
.frontend-wrapper .select2-container--default .select2-search--dropdown {
padding: 0.5rem 0.75rem;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field {
padding: 0.4rem 0.65rem;
border-radius: 8px;
font-size: 0.8rem;
}
/* Dropdown options */
.frontend-wrapper .select2-container--default .select2-results__option {
padding: 0.55rem 0.75rem;
font-size: 0.8rem;
}
/* Dropdown results max height */
.frontend-wrapper .select2-container--default .select2-results {
max-height: 180px;
}
}
/* ===================================== */
/* JOB DETAIL PAGE REDESIGN - MODERN */
/* ===================================== */
/* Breadcrumb Modern */
.job-detail-redesign .job-breadcrumb-wrapper {
background: linear-gradient(135deg, #4a3d8a 0%, #3d3270 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
}
.job-detail-redesign .job-breadcrumb-modern {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
font-size: 0.875rem;
}
.job-detail-redesign .breadcrumb-link {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.375rem;
transition: all 0.2s ease;
font-weight: 500;
}
.job-detail-redesign .breadcrumb-link:hover {
color: #fbbf24;
transform: translateX(2px);
}
.job-detail-redesign .breadcrumb-separator {
color: rgba(255, 255, 255, 0.4);
}
.job-detail-redesign .breadcrumb-current {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
/* Job Header Modern - Enhanced with Purple Background */
.job-detail-redesign .job-header-modern {
position: relative;
padding: 4rem 0;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.job-detail-redesign .job-header-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background: linear-gradient(135deg, #6152aa 0%, #5142aa 50%, #4a3d8a 100%);
}
.job-detail-redesign .header-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
opacity: 1;
}
.job-detail-redesign .header-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(180deg, rgba(97, 82, 170, 0) 0%, rgba(74, 61, 138, 0.3) 100%),
url('data:image/svg+xml,') center/100px;
}
.job-detail-redesign .floating-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 0;
}
.job-detail-redesign .shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(5px);
}
.job-detail-redesign .shape-1 {
width: 300px;
height: 300px;
top: -100px;
right: 10%;
animation: float 20s ease-in-out infinite;
}
.job-detail-redesign .shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: 5%;
animation: float 15s ease-in-out infinite reverse;
}
.job-detail-redesign .shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 50%;
animation: float 18s ease-in-out infinite;
}
.job-detail-redesign .shape-4 {
width: 100px;
height: 100px;
top: 20%;
left: 15%;
animation: float 12s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(20px, -20px) rotate(90deg);
}
50% {
transform: translate(-20px, 20px) rotate(180deg);
}
75% {
transform: translate(10px, 10px) rotate(270deg);
}
}
.job-detail-redesign .job-header-modern .container {
position: relative;
z-index: 1;
}
.job-detail-redesign .job-header-content {
padding-right: 2rem;
}
.job-detail-redesign .job-meta-badges {
display: flex;
gap: 0.75rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.job-detail-redesign .job-category-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.25);
color: white;
padding: 0.625rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.job-detail-redesign .job-category-badge:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.job-detail-redesign .job-type-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 0.625rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.job-detail-redesign .job-type-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.job-detail-redesign .job-title-modern {
font-size: 2.5rem;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
margin-bottom: 2rem;
letter-spacing: -0.02em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.job-detail-redesign .job-company-info-enhanced {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 2rem;
padding: 1.75rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
transition: all 0.3s ease;
}
.job-detail-redesign .job-company-info-enhanced:hover {
transform: translateY(-3px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}
.job-detail-redesign .company-logo-inline-enhanced {
flex-shrink: 0;
}
.job-detail-redesign .company-logo-inline-enhanced img {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 16px;
border: 2px solid #f1f5f9;
padding: 0.625rem;
background: white;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.job-detail-redesign .company-logo-inline-enhanced:hover img {
border-color: #6152aa;
transform: scale(1.08) rotate(2deg);
}
.job-detail-redesign .company-details-inline-enhanced {
flex: 1;
}
.job-detail-redesign .company-name-enhanced {
font-size: 1.375rem;
font-weight: 800;
color: #1e293b;
text-decoration: none;
display: block;
margin-bottom: 0.625rem;
transition: color 0.3s ease;
}
.job-detail-redesign .company-name-enhanced:hover {
color: #6152aa;
}
.job-detail-redesign .company-name-hidden {
font-size: 1.125rem;
color: #64748b;
font-style: italic;
}
.job-detail-redesign .location-inline-enhanced {
display: flex;
align-items: center;
gap: 0.625rem;
color: #475569;
font-size: 1rem;
font-weight: 500;
}
.job-detail-redesign .location-inline-enhanced i {
color: #6152aa;
font-size: 1.125rem;
}
.job-detail-redesign .country-flag-inline {
width: 24px;
height: 18px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.job-detail-redesign .job-quick-stats-enhanced {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.job-detail-redesign .stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.job-detail-redesign .stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #6152aa, #8b5cf6, #6152aa);
background-size: 200% 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.job-detail-redesign .stat-card:hover::before {
opacity: 1;
animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.job-detail-redesign .stat-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.5);
}
.job-detail-redesign .stat-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, #6152aa 0%, #8b5cf6 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.375rem;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(97, 82, 170, 0.3);
}
.job-detail-redesign .views-icon {
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.job-detail-redesign .salary-icon {
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.job-detail-redesign .stat-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.job-detail-redesign .stat-label {
color: #64748b;
font-size: 0.813rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.job-detail-redesign .stat-value {
color: #0f172a;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
}
.job-detail-redesign .salary-card .stat-value {
color: #10b981;
font-size: 1.125rem;
}
/* Job Action Panel Enhanced */
.job-detail-redesign .job-action-panel-enhanced {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.25);
position: sticky;
top: 2rem;
backdrop-filter: blur(20px);
}
.job-detail-redesign .action-panel-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid #e2e8f0;
color: #1e293b;
font-size: 1.125rem;
font-weight: 800;
}
.job-detail-redesign .action-panel-header i {
color: #6152aa;
font-size: 1.375rem;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ===================================== */
/* JOB DETAIL PAGE - CLEAN DESIGN */
/* ===================================== */
/* Breadcrumb Section */
.job-detail-clean .breadcrumb-section {
background: #f8f9fa;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
}
.job-detail-clean .breadcrumb-nav {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.job-detail-clean .breadcrumb-item {
color: #6c757d;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.job-detail-clean .breadcrumb-item:hover {
color: #7cdbe3;
}
.job-detail-clean .breadcrumb-divider {
color: #dee2e6;
}
/* Main Container */
.job-detail-clean .job-detail-container {
padding: 2rem 0;
max-width: 1200px;
}
/* Job Header Card - Enhanced */
.job-detail-clean .job-header-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e9ecef;
border-radius: 16px;
padding: 1.25rem;
margin-bottom: 1rem;
display: flex;
gap: 1rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.job-detail-clean .job-header-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
transition: width 0.4s ease;
}
.job-detail-clean .job-header-card:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
border-color: #6152aa;
}
.job-detail-clean .job-header-card:hover::before {
width: 8px;
}
.job-detail-clean .company-logo-box {
flex-shrink: 0;
position: relative;
}
.job-detail-clean .company-logo-box::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.job-detail-clean .job-header-card:hover .company-logo-box::after {
opacity: 0.15;
}
.job-detail-clean .company-logo-box img {
width: 100px;
height: 100px;
border-radius: 50%;
padding: 0;
object-fit: cover;
background: #ffffff;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.job-detail-clean .job-header-card:hover .company-logo-box img {
transform: scale(1.05);
border-color: #7cdbe3;
}
.job-detail-clean .job-header-info {
flex: 1;
}
.job-detail-clean .job-title-clean {
font-size: 2.25rem;
font-weight: 800;
color: #1a202c;
margin-bottom: 0.3rem;
line-height: 1.3;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.job-detail-clean .company-name-clean {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #7cdbe3;
font-size: 1.25rem;
font-weight: 700;
text-decoration: none;
margin-bottom: 0.3rem;
transition: all 0.3s ease;
position: relative;
}
.job-detail-clean .company-name-clean::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #7cdbe3 0%, #1ab8e0 100%);
transition: width 0.3s ease;
}
.job-detail-clean .company-name-clean:hover {
color: #1ab8e0;
transform: translateX(4px);
}
.job-detail-clean .company-name-clean:hover::after {
width: 100%;
}
.job-detail-clean .job-meta-info {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
padding: 0.4rem 0;
border-radius: 10px;
}
.job-detail-clean .meta-item {
display: flex;
align-items: center;
gap: 0.625rem;
color: #4a5568;
font-size: 0.938rem;
font-weight: 600;
}
.job-detail-clean .meta-item i {
color: #7cdbe3;
font-size: 1.125rem;
}
/* Action Buttons - Enhanced */
.job-detail-clean .action-buttons-top {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.35rem;
}
.job-detail-clean .btn-apply-clean {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: #7cdbe3;
color: #ffffff;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 1.063rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(34, 211, 253, 0.4);
position: relative;
overflow: hidden;
}
.job-detail-clean .btn-apply-clean::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s;
}
.job-detail-clean .btn-apply-clean:hover::before {
left: 100%;
}
.job-detail-clean .btn-apply-clean:hover {
background: linear-gradient(135deg, #1ab8e0 0%, #0ea5cc 100%);
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(34, 211, 253, 0.5);
color: #ffffff;
}
.job-detail-clean .btn-apply-clean:active {
transform: translateY(-1px);
}
.job-detail-clean .btn-success-clean {
padding: 1rem 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
cursor: not-allowed;
}
.job-detail-clean .btn-success-clean:hover {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
transform: none;
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.job-detail-clean .btn-secondary-clean {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: #7cdbe3;
color: #fff;
border: 2px solid #e9ecef;
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.job-detail-clean .btn-secondary-clean:hover {
border-color: #7cdbe3;
color: #fff;
background: #7cdbe3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(34, 211, 253, 0.2);
}
.job-detail-clean .btn-secondary-clean i {
font-size: 1.125rem;
}
/* Key Details Row - Enhanced */
.job-detail-clean .key-details-row {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e9ecef;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.job-detail-clean .key-details-row::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.job-detail-clean .key-details-row:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
border-color: #6152aa;
}
.job-detail-clean .detail-item {
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.25rem;
transition: all 0.3s ease;
position: relative;
}
.job-detail-clean .detail-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 12px 0 0 12px;
}
.job-detail-clean .detail-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 211, 253, 0.15);
border-color: #7cdbe3;
}
.job-detail-clean .detail-item:hover::before {
opacity: 1;
}
.job-detail-clean .detail-label {
color: #6c757d;
font-size: 10px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.625rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.job-detail-clean .detail-label::before {
content: '';
width: 4px;
height: 4px;
background: #7cdbe3;
border-radius: 50%;
}
.job-detail-clean .detail-value {
color: #1a202c;
font-size: 12px !important;
font-weight: 700;
line-height: 1.4;
}
.job-detail-clean .detail-value a {
color: #7cdbe3;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.job-detail-clean .detail-value a::after {
content: '→';
opacity: 0;
transform: translateX(-4px);
transition: all 0.2s ease;
}
.job-detail-clean .detail-value a:hover {
color: #1ab8e0;
}
.job-detail-clean .detail-value a:hover::after {
opacity: 1;
transform: translateX(0);
}
.job-detail-clean .salary-value {
color: #10b981;
font-size: 12px !important;
font-weight: 800;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.job-detail-clean .salary-period-text {
font-size: 12px !important;
color: #6c757d;
font-weight: 600;
display: block;
margin-top: 0.25rem;
}
.job-detail-clean .skill-tag {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1.125rem;
background: linear-gradient(135deg, #e7f9ff 0%, #d1f4ff 100%);
color: #0891b2;
border: 1px solid #a5f3fc;
border-radius: 25px;
font-weight: 700;
font-size: 12px !important;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(34, 211, 253, 0.15);
}
.job-detail-clean .skill-tag::before {
content: '🏷️';
font-size: 1rem;
}
.job-detail-clean .skill-tag:hover {
color: #ffffff;
border-color: #7cdbe3;
transform: translateY(-2px);
}
.job-detail-clean .status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 700;
font-size: 12px !important;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.job-detail-clean .status-badge.status-yes {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 2px solid #6ee7b7;
}
.job-detail-clean .status-badge.status-yes i {
color: #10b981;
font-size: 12px !important;
}
.job-detail-clean .status-badge.status-yes:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}
.job-detail-clean .status-badge.status-no {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
border: 2px solid #fca5a5;
}
.job-detail-clean .status-badge.status-no i {
color: #dc2626;
font-size: 12px !important;
}
.job-detail-clean .status-badge.status-no:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
}
/* Section Heading */
.job-detail-clean .section-heading {
font-size: 1.25rem;
font-weight: 700;
color: #212529;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e9ecef;
}
/* Normal state */
.job-detail-clean .description-section,
.job-detail-clean .company-description-section {
background: #ffffff;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.job-detail-clean .description-section:hover,
.job-detail-clean .company-description-section:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
border-color: #6152aa;
}
.job-detail-clean .description-content {
color: #495057;
font-size: 1rem;
line-height: 1.7;
}
/* Tags Section */
.job-detail-clean .tags-section {
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.job-detail-clean .tags-section:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
border-color: #6152aa;
}
.job-detail-clean .tags-container-clean {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.job-detail-clean .tag-clean {
display: inline-block;
padding: 0.5rem 1rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 20px;
color: #495057;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.2s ease;
}
.job-detail-clean .tag-clean:hover {
background: #7cdbe3;
color: #ffffff;
border-color: #7cdbe3;
}
/* Sidebar Cards */
.job-detail-clean .sidebar-card-clean {
background: #ffffff;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.job-detail-clean .sidebar-card-clean:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
border-color: #6152aa;
}
.job-detail-clean .sidebar-heading {
font-size: 16px !important;
font-weight: 700;
color: #212529;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e9ecef;
}
.job-detail-clean .company-info-sidebar {
text-align: center;
}
.job-detail-clean .company-logo-sidebar {
margin-bottom: 1rem;
}
.job-detail-clean .company-logo-sidebar img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
padding: 0;
}
.job-detail-clean .company-name-sidebar {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1rem;
}
.job-detail-clean .company-name-sidebar a {
color: #212529;
text-decoration: none;
transition: color 0.2s ease;
}
.job-detail-clean .company-name-sidebar a:hover {
color: #7cdbe3;
}
.job-detail-clean .company-meta-list {
text-align: left;
margin-bottom: 1.25rem;
}
.job-detail-clean .meta-row {
display: flex;
align-items: center;
gap: 0.75rem;
color: #6c757d;
font-size: 0.938rem;
}
.job-detail-clean .meta-row i {
color: #7cdbe3;
width: 16px;
}
.job-detail-clean .view-company-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: 1px solid #e9ecef;
border-radius: 6px;
font-weight: 600;
font-size: 0.938rem;
text-decoration: none;
transition: all 0.3s ease;
background: #7cdbe3;
color: #ffffff;
border-color: #7cdbe3;
}
.job-detail-clean .view-company-btn:hover {
background: #7cdbe3;
color: #ffffff;
border-color: #7cdbe3;
}
.job-detail-clean .map-container-clean {
border-radius: 6px;
overflow: hidden;
border: 1px solid #e9ecef;
}
.job-detail-clean .similar-jobs-card {
background: linear-gradient(135deg, #7cdbe3 0%, #1ab8e0 100%);
border: none;
color: #ffffff;
box-shadow: 0 4px 12px rgba(34, 211, 253, 0.3);
}
.job-detail-clean .similar-jobs-card:hover {
box-shadow: 0 8px 24px rgba(34, 211, 253, 0.5);
border-color: transparent;
}
.job-detail-clean .similar-jobs-card .sidebar-heading {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.3);
}
.job-detail-clean .similar-jobs-text {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.25rem;
}
.job-detail-clean .btn-browse-similar {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: #ffffff;
color: #7cdbe3;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.job-detail-clean .btn-browse-similar:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
color: #1ab8e0;
}
/* Responsive Design */
@media (max-width: 991px) {
.job-detail-clean .key-details-row {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
}
@media (max-width: 768px) {
.job-detail-clean .job-header-card {
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
}
.job-detail-clean .company-logo-box {
align-self: center;
}
.job-detail-clean .company-logo-box img {
width: 100px;
height: 100px;
border-radius: 50%;
padding: 0;
object-fit: cover;
}
.job-detail-clean .job-title-clean {
font-size: 1.75rem;
text-align: center;
}
.job-detail-clean .company-name-clean {
justify-content: center;
}
.job-detail-clean .job-meta-info {
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem;
}
.job-detail-clean .action-buttons-top {
flex-direction: column;
}
.job-detail-clean .btn-apply-clean,
.job-detail-clean .btn-secondary-clean {
width: 100%;
justify-content: center;
}
.job-detail-clean .key-details-row {
grid-template-columns: 1fr;
padding: 1.5rem;
gap: 1rem;
}
.job-detail-clean .detail-item {
padding: 1rem;
}
.job-detail-clean .salary-value {
font-size: 1.25rem;
}
}
@media (max-width: 576px) {
.job-detail-clean .job-header-card {
padding: 1.5rem;
}
.job-detail-clean .job-title-clean {
font-size: 1.5rem;
}
.job-detail-clean .company-name-clean {
font-size: 1.125rem;
}
.job-detail-clean .btn-apply-clean {
padding: 0.875rem 2rem;
font-size: 1rem;
}
}
/* === JOB DETAIL PAGE — MOBILE IMPROVEMENTS === */
@media (max-width: 767px) {
/* Remove translateY that causes floating/overlap when cards stack vertically */
.job-detail-clean .job-header-card,
.job-detail-clean .key-details-row,
.job-detail-clean .description-section,
.job-detail-clean .company-description-section,
.job-detail-clean .sidebar-card-clean {
transform: none !important;
}
/* Container: less vertical padding on mobile */
.job-detail-clean .job-detail-container {
padding: 0.75rem 0;
}
/* Header card: tighter padding and gap */
.job-detail-clean .job-header-card {
padding: 1.25rem !important;
gap: 1rem;
margin-bottom: 1rem;
}
/* Logo: smaller on mobile */
.job-detail-clean .company-logo-box img {
width: 72px !important;
height: 72px !important;
}
/* Meta info row: tighter */
.job-detail-clean .job-meta-info {
gap: 0.5rem !important;
padding: 0.5rem 0.75rem !important;
margin-bottom: 0.75rem;
}
.job-detail-clean .meta-item {
font-size: 0.75rem;
}
/* Action buttons: good touch targets */
.job-detail-clean .btn-apply-clean,
.job-detail-clean .btn-secondary-clean {
padding: 0.625rem 1.25rem !important;
min-height: 42px;
border-radius: 8px !important;
gap: 0.375rem !important;
}
/* Key details: 2 columns on mobile (more compact than 1 column) */
.job-detail-clean .key-details-row {
grid-template-columns: repeat(2, 1fr) !important;
padding: 1rem !important;
gap: 0.75rem !important;
margin-bottom: 1rem;
}
.job-detail-clean .detail-item {
padding: 0.75rem !important;
}
/* Description / company sections */
.job-detail-clean .description-section,
.job-detail-clean .company-description-section {
padding: 1rem;
margin-bottom: 1rem;
}
/* Tags */
.job-detail-clean .tags-section {
padding: 1rem;
margin-bottom: 1rem;
}
/* Sidebar cards */
.job-detail-clean .sidebar-card-clean {
padding: 1.25rem;
margin-bottom: 1rem;
}
/* Map: shorter height on mobile */
.job-detail-clean .map-container-clean iframe {
height: 200px !important;
}
/* View company button: full width */
.job-detail-clean .view-company-btn {
display: flex;
width: 100%;
justify-content: center;
font-size: 0.875rem;
}
}
@media (max-width: 575px) {
/* Even tighter on small phones */
.job-detail-clean .job-header-card {
padding: 1rem !important;
gap: 0.75rem;
}
.job-detail-clean .company-logo-box img {
width: 58px !important;
height: 58px !important;
}
/* 1 column on very small screens */
.job-detail-clean .key-details-row {
grid-template-columns: 1fr !important;
padding: 0.875rem !important;
gap: 0.625rem !important;
}
.job-detail-clean .description-section,
.job-detail-clean .company-description-section,
.job-detail-clean .tags-section {
padding: 0.875rem;
}
.job-detail-clean .sidebar-card-clean {
padding: 1rem;
}
.job-detail-clean .map-container-clean iframe {
height: 170px !important;
}
}
.job-detail-redesign .btn-modern-enhanced {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 2rem;
border-radius: 14px;
font-weight: 700;
font-size: 1.063rem;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}
.job-detail-redesign .btn-modern-enhanced::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s;
}
.job-detail-redesign .btn-modern-enhanced:hover::before {
left: 100%;
}
.job-detail-redesign .btn-primary-modern-enhanced {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
box-shadow: 0 10px 35px rgba(245, 158, 11, 0.4);
border: 2px solid rgba(251, 191, 36, 0.3);
font-size: 1.125rem;
letter-spacing: 0.02em;
}
.job-detail-redesign .btn-primary-modern-enhanced:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 15px 50px rgba(245, 158, 11, 0.5);
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: white;
}
.job-detail-redesign .btn-primary-modern-enhanced:active {
transform: translateY(-2px) scale(1);
}
.job-detail-redesign .btn-success-modern {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35);
cursor: not-allowed;
opacity: 0.95;
}
.job-detail-redesign .action-buttons-secondary-enhanced {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.job-detail-redesign .btn-icon-modern-enhanced {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
color: #64748b;
font-weight: 600;
font-size: 0.938rem;
cursor: pointer;
transition: all 0.3s ease;
}
.job-detail-redesign .btn-icon-modern-enhanced:hover {
border-color: #6152aa;
color: #6152aa;
background: #f8f7fc;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(97, 82, 170, 0.15);
}
.job-detail-redesign .btn-icon-modern-enhanced i {
font-size: 1.125rem;
}
/* Job Content Modern */
.job-detail-redesign .job-content-modern {
padding: 3rem 0;
}
/* Key Info Grid - Two Column Layout */
.job-detail-redesign .key-info-grid-two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.job-detail-redesign .key-info-item-modern {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.job-detail-redesign .key-info-item-modern:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border-color: #cbd5e1;
}
.job-detail-redesign .info-icon-modern {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.job-detail-redesign .info-icon-modern.salary-icon {
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
color: white;
}
.job-detail-redesign .info-icon-modern.experience-icon {
background: linear-gradient(135deg, #6152aa 0%, #8b5cf6 100%);
color: white;
}
.job-detail-redesign .info-icon-modern.date-icon {
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
color: white;
}
.job-detail-redesign .info-icon-modern.negotiable-icon {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
color: white;
}
.job-detail-redesign .info-content-modern {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.job-detail-redesign .info-label-modern {
color: #64748b;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.job-detail-redesign .info-value-modern {
color: #1e293b;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
}
.job-detail-redesign .salary-period-modern {
font-size: 0.938rem;
font-weight: 500;
color: #64748b;
}
.job-detail-redesign .badge-yes-modern {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border-radius: 50px;
font-size: 0.938rem;
font-weight: 700;
border: 1px solid #6ee7b7;
}
.job-detail-redesign .badge-no-modern {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #64748b;
border-radius: 50px;
font-size: 0.938rem;
font-weight: 700;
border: 1px solid #cbd5e1;
}
/* Content Cards */
.job-detail-redesign .content-card-modern {
background: white;
border-radius: 20px;
padding: 2.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.job-detail-redesign .section-title-modern {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.job-detail-redesign .section-title-modern i {
color: #6152aa;
font-size: 1.25rem;
}
.job-detail-redesign .section-content {
color: #475569;
font-size: 1rem;
line-height: 1.8;
}
/* Requirements Grid */
.job-detail-redesign .requirements-grid {
display: grid;
gap: 1rem;
}
.job-detail-redesign .requirement-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #f8fafc;
border-radius: 12px;
border-left: 3px solid #6152aa;
transition: all 0.3s ease;
}
.job-detail-redesign .requirement-item:hover {
background: #f1f5f9;
transform: translateX(3px);
}
.job-detail-redesign .requirement-icon {
color: #6152aa;
font-size: 1.125rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
.job-detail-redesign .requirement-icon.available {
color: #10b981;
}
.job-detail-redesign .requirement-icon.unavailable {
color: #cbd5e1;
}
.job-detail-redesign .requirement-content {
flex: 1;
color: #475569;
line-height: 1.6;
}
.job-detail-redesign .requirement-content strong {
color: #1e293b;
font-weight: 600;
}
.job-detail-redesign .text-success {
color: #10b981;
font-weight: 600;
}
.job-detail-redesign .text-muted {
color: #94a3b8;
}
/* Tags Modern */
.job-detail-redesign .tags-container-modern {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.job-detail-redesign .job-tag-modern {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border: 1px solid #cbd5e1;
border-radius: 50px;
color: #475569;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s ease;
}
.job-detail-redesign .job-tag-modern:hover {
background: linear-gradient(135deg, #6152aa 0%, #5142aa 100%);
color: white;
border-color: #6152aa;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(97, 82, 170, 0.2);
}
.job-detail-redesign .job-tag-modern i {
font-size: 0.75rem;
}
.job-detail-redesign .btn-link-modern {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #6152aa;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.job-detail-redesign .btn-link-modern:hover {
gap: 0.75rem;
color: #4a3d8a;
}
/* Sidebar Modern */
.job-detail-redesign .sidebar-card-modern {
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.job-detail-redesign .company-card-modern {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid #e2e8f0;
}
.job-detail-redesign .company-header-modern {
text-align: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
}
.job-detail-redesign .company-logo-sidebar-modern img {
width: 100px;
height: 100px;
object-fit: contain;
border-radius: 16px;
background: white;
padding: 1rem;
border: 2px solid #e2e8f0;
margin-bottom: 1rem;
}
.job-detail-redesign .company-name-sidebar {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.job-detail-redesign .company-name-sidebar a {
color: #1e293b;
text-decoration: none;
transition: color 0.3s ease;
}
.job-detail-redesign .company-name-sidebar a:hover {
color: #6152aa;
}
.job-detail-redesign .company-meta-modern {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.job-detail-redesign .meta-item-modern {
display: flex;
align-items: center;
gap: 0.75rem;
color: #64748b;
font-size: 0.938rem;
}
.job-detail-redesign .meta-item-modern i {
color: #6152aa;
width: 20px;
text-align: center;
}
.job-detail-redesign .meta-item-modern a {
color: #64748b;
text-decoration: none;
transition: color 0.3s ease;
}
.job-detail-redesign .meta-item-modern a:hover {
color: #6152aa;
}
.job-detail-redesign .sidebar-title-modern {
font-size: 1.125rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.job-detail-redesign .sidebar-title-modern i {
color: #6152aa;
}
.job-detail-redesign .overview-list-modern {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.job-detail-redesign .overview-item-modern {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.job-detail-redesign .overview-icon-modern {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #6152aa;
font-size: 1.125rem;
flex-shrink: 0;
}
.job-detail-redesign .overview-content-modern {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.job-detail-redesign .overview-label {
color: #94a3b8;
font-size: 0.813rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.job-detail-redesign .overview-value {
color: #1e293b;
font-size: 1rem;
font-weight: 600;
}
.job-detail-redesign .overview-value a {
color: #1e293b;
text-decoration: none;
transition: color 0.3s ease;
}
.job-detail-redesign .overview-value a:hover {
color: #6152aa;
}
.job-detail-redesign .map-container-modern {
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.job-detail-redesign .map-container-modern iframe {
border-radius: 12px;
}
/* CTA Card Modern */
.job-detail-redesign .cta-card-modern {
background: linear-gradient(135deg, #6152aa 0%, #5142aa 100%);
text-align: center;
padding: 2.5rem 2rem;
}
.job-detail-redesign .cta-icon-modern {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
backdrop-filter: blur(10px);
}
.job-detail-redesign .cta-icon-modern i {
font-size: 1.75rem;
color: white;
}
.job-detail-redesign .cta-title-modern {
font-size: 1.375rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.job-detail-redesign .cta-description-modern {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.job-detail-redesign .btn-cta-modern {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 1rem 2rem;
background: white;
color: #6152aa;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.job-detail-redesign .btn-cta-modern:hover {
transform: translateY(-3px);
box-shadow: 0 8px 35px rgba(0, 0, 0, 0.2);
color: #4a3d8a;
}
/* Responsive Design */
@media (max-width: 991px) {
.job-detail-redesign .job-action-panel-enhanced {
position: static;
margin-top: 2rem;
}
.job-detail-redesign .key-info-grid-two-col {
grid-template-columns: 1fr;
gap: 1rem;
}
.job-detail-redesign .job-quick-stats-enhanced {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.job-detail-redesign .job-header-modern {
padding: 3rem 0 2.5rem;
}
.job-detail-redesign .job-title-modern {
font-size: 1.875rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.job-detail-redesign .job-header-content {
padding-right: 0;
}
.job-detail-redesign .job-quick-stats-enhanced {
gap: 0.75rem;
}
.job-detail-redesign .stat-card {
padding: 1.25rem;
}
.job-detail-redesign .stat-icon {
width: 44px;
height: 44px;
font-size: 1.125rem;
}
.job-detail-redesign .company-logo-inline-enhanced img {
width: 60px;
height: 60px;
}
.job-detail-redesign .company-name-enhanced {
font-size: 1.125rem;
}
.job-detail-redesign .job-company-info-enhanced {
padding: 1.5rem;
}
.job-detail-redesign .content-card-modern {
padding: 1.5rem;
}
.job-detail-redesign .key-info-card-modern {
padding: 1.5rem;
}
.job-detail-redesign .sidebar-card-modern {
padding: 1.5rem;
}
.job-detail-redesign .action-buttons-secondary-enhanced {
flex-direction: column;
}
.job-detail-redesign .btn-icon-modern-enhanced {
width: 100%;
}
.job-detail-redesign .job-action-panel-enhanced {
padding: 2rem;
margin-top: 1.5rem;
}
.job-detail-redesign .shape-1 {
width: 200px;
height: 200px;
}
.job-detail-redesign .shape-2 {
width: 150px;
height: 150px;
}
}
@media (max-width: 576px) {
.job-detail-redesign .job-breadcrumb-modern {
font-size: 0.813rem;
}
.job-detail-redesign .job-title-modern {
font-size: 1.625rem;
margin-bottom: 1.5rem;
}
.job-detail-redesign .section-title-modern {
font-size: 1.25rem;
}
.job-detail-redesign .job-company-info-enhanced {
flex-direction: column;
align-items: flex-start;
padding: 1.25rem;
}
.job-detail-redesign .company-logo-inline-enhanced img {
width: 50px;
height: 50px;
}
.job-detail-redesign .job-meta-badges {
flex-direction: column;
align-items: flex-start;
}
.job-detail-redesign .job-category-badge,
.job-detail-redesign .job-type-badge {
width: 100%;
justify-content: center;
}
.job-detail-redesign .stat-card {
padding: 1rem;
}
.job-detail-redesign .stat-value {
font-size: 1rem;
}
.job-detail-redesign .action-panel-header {
font-size: 1rem;
}
.job-detail-redesign .btn-modern-enhanced {
padding: 1.125rem 1.5rem;
font-size: 1rem;
}
.job-detail-redesign .key-info-grid-two-col {
grid-template-columns: 1fr;
gap: 1rem;
}
.job-detail-redesign .key-info-item-modern {
padding: 1.25rem;
}
.job-detail-redesign .info-icon-modern {
width: 44px;
height: 44px;
font-size: 1.125rem;
}
.job-detail-redesign .info-value-modern {
font-size: 1rem;
}
}
.info-icon {
position: absolute;
top: 10px;
right: 12px;
cursor: pointer;
color: #6152aa;
}
.radio-option input[type="checkbox"] {
opacity: 0;
pointer-events: none;
}
.radio-option input[type="checkbox"]:checked + .radio-label .radio-card {
background: rgba(99, 102, 241, 0.15); /* subtle indigo tint */
border-color: #818cf8; /* lighter primary */
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(129, 140, 248, 0.35);
}
/* =============================================
MOBILE TYPOGRAPHY - All Frontend Views
============================================= */
@media (max-width: 767px) {
/* Headings */
h1, .h1 { font-size: 1.6rem !important; line-height: 1.3; }
h2, .h2 { font-size: 1.35rem !important; line-height: 1.3; }
h3, .h3 { font-size: 1.15rem !important; line-height: 1.35; }
h4, .h4 { font-size: 1rem !important; line-height: 1.35; }
h5, .h5 { font-size: 0.9rem !important; line-height: 1.4; }
h6, .h6 { font-size: 0.85rem !important; line-height: 1.4; }
/* Body / paragraph text */
p, .para-desc { font-size: 0.85rem !important; line-height: 1.55; }
.text-muted { font-size: 0.82rem !important; }
/* Theme-specific title classes */
.title { font-size: 1.3rem !important; }
.sub-title { font-size: 0.85rem !important; }
.heading { font-size: 1.2rem !important; }
.section-title h4.title { font-size: 1.3rem !important; }
.section-title p { font-size: 0.85rem !important; }
/* Hero / banner */
.hero-section h1,
.hero-section .display-4,
.section-hero h1 { font-size: 1.5rem !important; }
.hero-section p { font-size: 0.85rem !important; }
/* Skill cards (browse_employees_skills) */
.skill-title { font-size: 0.78rem !important; }
.skill-overlay span { font-size: 0.75rem !important; }
/* Job listing cards */
.job-title,
.card-title { font-size: 0.9rem !important; }
.company-name,
.card-subtitle { font-size: 0.8rem !important; }
.job-meta { font-size: 0.75rem !important; }
/* Badges & tags */
.badge { font-size: 0.7rem !important; }
.tag { font-size: 0.72rem !important; }
/* Navigation / top-bar */
.navbar-brand { font-size: 0.9rem !important; }
.nav-link { font-size: 0.85rem !important; }
/* Footer */
.footer-title { font-size: 0.9rem !important; }
.footer-link { font-size: 0.8rem !important; }
footer p { font-size: 0.8rem !important; }
/* Buttons */
.btn { font-size: 0.82rem !important; }
.btn-lg { font-size: 0.88rem !important; }
/* Form labels & inputs */
label { font-size: 0.82rem !important; }
.form-control { font-size: 0.85rem !important; }
.form-select { font-size: 0.85rem !important; }
/* Small / captions */
small, .small { font-size: 0.72rem !important; }
/* Breadcrumb */
.breadcrumb-item,
.breadcrumb-item a { font-size: 0.78rem !important; }
/* Tab / pill navigation */
.nav-tabs .nav-link,
.nav-pills .nav-link { font-size: 0.8rem !important; }
/* Stats / counters */
.counter-value { font-size: 1.4rem !important; }
.counter-label { font-size: 0.75rem !important; }
/* Company / employer profile */
.company-detail-p { font-size: 0.82rem !important; }
}
@media (max-width: 575px) {
h1, .h1 { font-size: 1.35rem !important; }
h2, .h2 { font-size: 1.15rem !important; }
h3, .h3 { font-size: 1rem !important; }
h4, .h4 { font-size: 0.92rem !important; }
h5, .h5 { font-size: 0.85rem !important; }
h6, .h6 { font-size: 0.8rem !important; }
.title { font-size: 1.15rem !important; }
.section-title h4.title { font-size: 1.15rem !important; }
.hero-section h1,
.hero-section .display-4,
.section-hero h1 { font-size: 1.25rem !important; }
.skill-title { font-size: 0.72rem !important; }
p, .para-desc { font-size: 0.8rem !important; }
.badge { font-size: 0.65rem !important; }
.btn { font-size: 0.78rem !important; }
}
.tooltip-inner {
max-width: 400px !important;
text-align: left !important;
}
/* ============================================
REGISTER FORM — PLACEHOLDER & SELECT2
Mobile + Web unified design
============================================ */
/* Input placeholder: solid gray, no opacity fade */
.frontend-wrapper .auth-form-control::placeholder,
.frontend-wrapper .auth-form-control::-webkit-input-placeholder {
color: #9ca3af !important;
opacity: 1 !important;
font-weight: 400 !important;
}
.frontend-wrapper .auth-form-control:focus::placeholder {
color: #c4cdd9 !important;
opacity: 1 !important;
}
/* Number inputs: remove spin buttons */
.frontend-wrapper .auth-form-control[type="number"]::-webkit-inner-spin-button,
.frontend-wrapper .auth-form-control[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.frontend-wrapper .auth-form-control[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
@media (max-width: 767px) {
.frontend-wrapper .auth-form-control {
font-size: 0.85rem !important;
padding: 0.875rem 1.25rem !important;
min-height: 50px !important;
}
.frontend-wrapper .auth-form-control::placeholder,
.frontend-wrapper .auth-form-control::-webkit-input-placeholder {
font-size: 0.8rem !important;
}
.frontend-wrapper .auth-form-label {
font-size: 0.8rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single {
height: 50px !important;
min-height: 50px !important;
padding: 0 1.25rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 50px !important;
font-size: 0.85rem !important;
padding-left: 0 !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder,
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
font-size: 12px !important;
color: #9ca3af !important;
opacity: 1 !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 50px !important;
right: 1rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple {
min-height: 50px !important;
padding: 0.4rem 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-results__option {
padding: 0.75rem 1rem !important;
font-size: 0.8rem !important;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field {
font-size: 0.8rem !important;
padding: 0.6rem 0.875rem !important;
border-radius: 12px !important;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
font-size: 0.8rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
font-size: 0.8rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
font-size: 0.8rem !important;
padding: 0.3rem 0.75rem !important;
}
.frontend-wrapper .select2-dropdown {
max-width: calc(100vw - 32px) !important;
}
}
@media (max-width: 575px) {
.frontend-wrapper .auth-form-control {
font-size: 0.8rem !important;
padding: 0.75rem 1rem !important;
min-height: 46px !important;
border-radius: 14px !important;
}
.frontend-wrapper .auth-form-control::placeholder,
.frontend-wrapper .auth-form-control::-webkit-input-placeholder {
font-size: 0.75rem !important;
}
.frontend-wrapper .auth-form-label {
font-size: 0.75rem !important;
margin-bottom: 0.5rem !important;
}
.frontend-wrapper .auth-form-group {
margin-bottom: 1.25rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single {
height: 46px !important;
min-height: 46px !important;
padding: 0 1rem !important;
border-radius: 14px !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 46px !important;
font-size: 0.8rem !important;
padding-left: 0 !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder,
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
font-size: 12px !important;
color: #9ca3af !important;
opacity: 1 !important;
}
.frontend-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
right: 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple {
min-height: 46px !important;
border-radius: 14px !important;
}
.frontend-wrapper .select2-container--default .select2-results__option {
padding: 0.625rem 0.875rem !important;
font-size: 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field {
font-size: 0.75rem !important;
padding: 0.5rem 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
font-size: 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
font-size: 0.75rem !important;
}
.frontend-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
font-size: 0.75rem !important;
padding: 0.2rem 0.6rem !important;
}
.frontend-wrapper .select2-container--default .select2-search--inline .select2-search__field {
font-size: 0.75rem !important;
}
.frontend-wrapper .form-check {
gap: 0.5rem;
align-items: flex-start;
}
.frontend-wrapper .auth-checkbox {
width: 1.125rem !important;
height: 1.125rem !important;
margin-top: 0.15rem;
}
.frontend-wrapper .form-check .form-check-label {
font-size: 0.75rem !important;
line-height: 1.5;
}
.frontend-wrapper .form-check .form-check-label .auth-link {
font-size: 0.75rem !important;
display: inline;
}
}
/* ══════════════════════════════════════════════════════════════
SWEETALERT2 — Custom popup design (shared across all screens)
══════════════════════════════════════════════════════════════ */
/* Popup shell */
.swal2-popup.swal-custom-popup {
border-radius: 20px !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
transition: box-shadow 0.25s ease !important;
width: 360px !important;
min-height: unset !important;
}
.swal2-popup.swal-custom-popup:hover {
box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
/* Coloured header band */
.swal-header {
padding: 18px 24px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.swal-header-success { background: linear-gradient(135deg, #25d366, #128c5e); }
.swal-header-error { background: linear-gradient(135deg, #ef4444, #f87171); }
.swal-header-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.swal-header-purple { background: linear-gradient(135deg, #6152aa, #8b7fd4); }
.swal-header-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: #fff;
flex-shrink: 0;
}
.swal-header-title {
font-size: 1rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.01em;
}
.swal-header-sub {
font-size: 0.75rem;
color: rgba(255,255,255,0.8);
margin-top: 1px;
float: left;
}
/* Body */
.swal-body {
padding: 20px 24px 24px;
text-align: center;
}
.swal-body-message {
font-size: 0.88rem;
color: #4b5563;
line-height: 1.6;
margin-bottom: 0;
}
.swal-body-highlight {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 30px;
padding: 6px 18px;
margin-top: 12px;
font-weight: 600;
font-size: 0.9rem;
}
.swal-body-highlight-green {
background: #f0fdf4;
border: 1.5px solid #bbf7d0;
color: #166534;
}
.swal-body-error-box {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.85rem;
color: #991b1b;
margin-top: 10px;
}
.swal-body-purple-box {
background: #f5f3ff;
border: 1px solid #ddd6fe;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.85rem;
color: #5b21b6;
margin-top: 10px;
}
/* Buttons — shared base */
.swal-btn-purple,
.swal-btn-green,
.swal-btn-red {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
border-radius: 30px;
padding: 10px 28px;
font-size: 0.88rem;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}
.swal-btn-purple {
background: linear-gradient(135deg, #6152aa, #8b7fd4);
box-shadow: 0 4px 14px rgba(97,82,170,0.35);
}
.swal-btn-purple:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(97,82,170,0.45);
}
.swal-btn-green {
background: linear-gradient(135deg, #25d366, #128c5e);
box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}
.swal-btn-green:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(37,211,102,0.45);
}
.swal-btn-red {
background: linear-gradient(135deg, #ef4444, #f87171);
box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
.swal-btn-red:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(239,68,68,0.45);
}
/* Cancel button */
.swal-btn-cancel {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f3f4f6;
color: #374151;
border: 1.5px solid #e5e7eb;
border-radius: 30px;
padding: 10px 24px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.swal-btn-cancel:hover {
background: #e5e7eb;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* SweetAlert2 internals reset */
.swal2-html-container { margin: 0 !important; padding: 0 !important; }
.swal2-actions { margin-top: 0 !important; padding: 0 24px 20px !important; gap: 10px; }
.swal2-timer-progress-bar { background: rgba(37,211,102,0.5) !important; }
/* ── Navbar: keep all items on one row ───────────────────── */
@media (min-width: 992px) {
/* Never wrap — all items stay on one line */
#topnav .navigation-menu {
flex-wrap: nowrap !important;
align-items: center !important;
}
/* Company name: ellipsis when too long, fixed max-width */
#topnav .nav-username-item {
min-width: 0;
flex-shrink: 1;
max-width: 160px;
}
#topnav .nav-username-link {
display: flex !important;
align-items: center;
max-width: 100%;
overflow: hidden;
}
#topnav .nav-username-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* All other items: don't shrink below their natural size */
#topnav .navigation-menu > li:not(.nav-username-item):not(.nav-flag-item) {
flex-shrink: 0;
white-space: nowrap;
}
/* Flag: never shrink, vertically centered */
#topnav .nav-flag-item {
flex-shrink: 0;
float: none !important;
display: flex !important;
align-items: center;
}
#topnav .nav-flag-link {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 8px !important;
min-height: 0 !important;
height: auto !important;
line-height: 1 !important;
background: none !important;
text-decoration: none;
cursor: pointer;
}
#topnav .nav-flag-img {
width: 30px;
height: 21px;
object-fit: cover;
border-radius: 3px;
display: block;
box-shadow: 0 1px 4px rgba(0,0,0,0.22);
transition: box-shadow 0.2s, transform 0.2s;
flex-shrink: 0;
}
#topnav .nav-flag-link:hover .nav-flag-img {
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transform: scale(1.08);
}
}
/* Mobile: flag in collapsed menu */
@media (max-width: 991px) {
#topnav .nav-flag-item { float: left; }
#topnav .nav-flag-link {
display: flex !important;
align-items: center;
padding: 10px 15px !important;
min-height: 0 !important;
height: auto !important;
line-height: 1 !important;
background: none !important;
text-decoration: none;
}
#topnav .nav-flag-img {
width: 28px;
height: 20px;
object-fit: cover;
border-radius: 3px;
display: block;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
}
/* ==================================================
Premium Jobseeker Home Panel
================================================== */
/* ── why_register_new: hover shadow on all card panels ── */
.card.feature-transition {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card.feature-transition:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
.card.feature-clean {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card.feature-clean:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
.js-premium-card{
background: linear-gradient(135deg,#fffbeb,#fffdf5);
border: 2px solid #fbbf24;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.js-premium-card:hover {
box-shadow: 0 24px 60px rgba(245,158,11,0.22), 0 8px 24px rgba(0,0,0,0.08) !important;
transform: translateY(-3px);
}
.js-premium-card > .card-body {
background-image: radial-gradient(circle, rgba(251,191,36,0.13) 1.5px, transparent 1.5px);
background-size: 28px 28px;
}
/* Header shimmer */
.js-premium-header{
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
background-size: 200% 100%;
animation: js-prem-shimmer 3.5s ease-in-out infinite;
padding: 15px 20px;
text-align: center;
color: #fff;
font-weight: 700;
letter-spacing: .6px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@keyframes js-prem-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Header sparkle icons */
.js-premium-header-sparkle {
display: inline-flex;
align-items: center;
gap: 3px;
opacity: 0.7;
font-size: 10px;
}
.js-premium-header-sparkle--l { margin-right: 4px; }
.js-premium-header-sparkle--r { margin-left: 4px; }
.js-premium-header-icon{
font-size: 22px;
}
/* Eyebrow pill */
.js-premium-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
}
/* Stats row */
.js-premium-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.js-premium-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 8px;
border-radius: 12px;
background: #fff;
border: 1px solid #fde68a;
text-align: center;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}
.js-stat-icon {
color: #d97706;
font-size: 1.1rem;
}
.js-stat-label {
color: #44403c;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.3;
}
/* Search results mockup */
.js-premium-mockup {
background: #fff;
border-radius: 18px;
border: 1.5px solid #fde68a;
padding: 18px;
box-shadow: 0 12px 40px rgba(245,158,11,0.14);
max-width: 420px;
margin: 0 auto;
}
.js-mockup-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1.5px solid #fde68a;
margin-bottom: 12px;
}
.js-mockup-topbar-title {
font-size: 12px;
font-weight: 700;
color: #92400e;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 4px;
}
.js-mockup-count {
font-size: 10.5px;
color: #9ca3af;
}
.js-mockup-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 12px;
margin-bottom: 7px;
}
.js-mockup-row:last-child { margin-bottom: 0; }
.js-mockup-row--premium {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border: 1.5px solid #fbbf24;
box-shadow: 0 4px 14px rgba(245,158,11,0.18);
}
.js-mockup-row--regular {
background: #f9fafb;
border: 1px solid #f3f4f6;
opacity: 0.65;
}
.js-mockup-crown-col {
color: #f59e0b;
font-size: 20px;
line-height: 1;
flex-shrink: 0;
}
.js-mockup-rank-num {
font-size: 11px;
font-weight: 700;
color: #d1d5db;
width: 20px;
flex-shrink: 0;
}
.js-mockup-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.js-mockup-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.js-mockup-avatar--premium {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
box-shadow: 0 3px 10px rgba(245,158,11,0.4);
}
.js-mockup-verified-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 16px;
height: 16px;
background: #3b82f6;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
border: 2px solid #fff;
}
.js-mockup-info { flex: 1; min-width: 0; }
.js-mockup-name {
font-size: 13px;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.js-mockup-prem-tag {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
font-size: 8.5px;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.5px;
}
.js-mockup-sub {
font-size: 11px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.js-mockup-top-badge {
font-size: 11px;
font-weight: 800;
color: #f59e0b;
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
white-space: nowrap;
}
.js-mockup-bar-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #e5e7eb;
flex-shrink: 0;
}
.js-mockup-bars {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.js-mockup-bar {
height: 9px;
background: #e5e7eb;
border-radius: 5px;
}
.js-mockup-bar--thin {
height: 7px;
background: #f3f4f6;
}
/* ── Dummy premium card preview ── */
.js-dummy-card-wrap {
width: 100%;
margin: 0 auto;
}
.js-dummy-card-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 14px;
}
.js-dummy-featured-card {
border: 2.5px solid #fbbf24 !important;
background: linear-gradient(180deg, #fffbeb 0%, #fffdf5 50%, #fff 100%) !important;
box-shadow:
0 0 0 5px rgba(251,191,36,0.16),
0 12px 40px rgba(245,158,11,0.28) !important;
border-radius: 16px !important;
overflow: hidden;
animation: emp-feat-pulse 3s ease-in-out infinite;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.js-dummy-featured-card:hover {
transform: translateY(-6px);
box-shadow:
0 0 0 8px rgba(251,191,36,0.22),
0 24px 56px rgba(245,158,11,0.42) !important;
}
/* Dummy avatar circle */
.js-dummy-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 36px;
border: 3.5px solid #fbbf24;
box-shadow:
0 0 0 4px rgba(251,191,36,0.30),
0 4px 20px rgba(245,158,11,0.40);
animation: emp-feat-avatar-ring 2.5s ease-in-out infinite;
}
/* Skill tags */
.js-dummy-skill-tag {
background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 4px 10px !important;
}
/* Stats row inside dummy card */
.js-dummy-stats-row {
display: flex;
border: 1.5px solid #fde68a;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.js-dummy-stat {
flex: 1;
padding: 12px 6px;
text-align: center;
border-right: 1.5px solid #fde68a;
}
.js-dummy-stat:last-child { border-right: none; }
.js-dummy-stat-val {
font-size: 1.25rem;
font-weight: 900;
color: #92400e;
line-height: 1.1;
}
.js-dummy-stat-lbl {
font-size: 10px;
color: #6b7280;
margin-top: 2px;
}
/* View button */
.js-dummy-view-btn {
background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
border: none !important;
color: #fff !important;
font-weight: 700 !important;
padding: 8px 28px !important;
border-radius: 25px !important;
font-size: 13px !important;
box-shadow: 0 4px 14px rgba(245,158,11,0.40) !important;
opacity: 1 !important;
cursor: default !important;
}
/* Section divider with label */
.js-premium-divider {
display: flex;
align-items: center;
gap: 14px;
color: #92400e;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.js-premium-divider::before,
.js-premium-divider::after {
content: '';
flex: 1;
height: 1.5px;
background: linear-gradient(90deg, transparent, #fde68a, transparent);
}
/* Feature card number watermark */
.js-benefit-num {
position: absolute;
top: 10px;
right: 14px;
font-size: 54px;
font-weight: 900;
line-height: 1;
pointer-events: none;
user-select: none;
opacity: 0.055;
font-family: 'Arial Black', Arial, sans-serif;
}
.js-premium-title{
font-weight: 800;
color: #92400e;
}
.js-premium-desc{
font-size: .92rem;
}
/* Benefit Box */
.js-benefit-box{
background: #fff;
border: 1px solid #fde68a;
}
.js-benefit-icon{
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.js-benefit-icon i{
font-size: 22px;
}
.js-benefit-title{
font-weight: 700;
color: #1f2937;
}
.js-benefit-gold{
background: #fff8e1;
color: #f59e0b;
}
.js-benefit-purple{
background: #f3f0ff;
color: #6152aa;
}
.js-benefit-green{
background: #f0fdf4;
color: #16a34a;
}
.js-benefit-rose{
background: #fff0f3;
color: #f43f5e;
}
.js-benefit-blue{
background: #eff6ff;
color: #3b82f6;
}
.js-benefit-teal{
background: #f0fdfa;
color: #0d9488;
}
/* Benefit panel — child card inside premium card */
.js-benefit-card {
background: #fff;
border: 1.5px solid #e9ecef;
border-top: 4px solid #fbbf24;
border-radius: 14px;
padding: 26px 22px 24px;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.22s ease, box-shadow 0.22s ease;
position: relative;
overflow: hidden;
}
.js-benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 40px rgba(0,0,0,0.11);
}
/* Per-color top border + hover shadow tint */
.js-benefit-card--gold { border-top-color: #f59e0b; }
.js-benefit-card--gold:hover { box-shadow: 0 16px 40px rgba(245,158,11,0.18); }
.js-benefit-card--purple { border-top-color: #6152aa; }
.js-benefit-card--purple:hover { box-shadow: 0 16px 40px rgba(97,82,170,0.18); }
.js-benefit-card--green { border-top-color: #16a34a; }
.js-benefit-card--green:hover { box-shadow: 0 16px 40px rgba(22,163,74,0.18); }
.js-benefit-card--rose { border-top-color: #f43f5e; }
.js-benefit-card--rose:hover { box-shadow: 0 16px 40px rgba(244,63,94,0.18); }
.js-benefit-card--blue { border-top-color: #3b82f6; }
.js-benefit-card--blue:hover { box-shadow: 0 16px 40px rgba(59,130,246,0.18); }
.js-benefit-card--teal { border-top-color: #0d9488; }
.js-benefit-card--teal:hover { box-shadow: 0 16px 40px rgba(13,148,136,0.18); }
.js-benefit-icon-lg {
width: 56px;
height: 56px;
border-radius: 16px;
flex-shrink: 0;
}
.js-benefit-icon-lg i {
font-size: 28px;
}
.js-benefit-desc {
font-size: .875rem;
line-height: 1.7;
flex: 1;
}
/* Price Box */
.js-price-card{
background: #fff;
border-radius: 20px;
border: 2px solid #fde68a;
padding: 30px 25px;
box-shadow: 0 8px 24px rgba(245,158,11,.15);
}
.js-price-label{
font-size: .9rem;
font-weight: 700;
color: #92400e;
text-transform: uppercase;
}
.js-price-currency{
font-size: 1.3rem;
color: #d97706;
font-weight: 700;
}
.js-price-amount{
font-size: 3rem;
font-weight: 900;
color: #92400e;
}
.js-price-decimal{
font-size: 1.2rem;
color: #d97706;
font-weight: 700;
}
.js-price-badge{
background: #fef3c7;
color: #92400e;
padding: 8px 15px;
font-size: .78rem;
}
.js-price-badge i{
font-size: 18px;
}
/* Phone country change banner */
.phone-country-change-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
margin-top: 8px;
border-radius: 10px;
background: linear-gradient(135deg, #fff8e7 0%, #fff3cd 100%);
border: 1.5px solid #ffc107;
border-left: 4px solid #ff9800;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
}
.phone-country-change-btn:hover {
background: linear-gradient(135deg, #fff3cd 0%, #ffe082 100%);
border-color: #ff9800;
border-left-color: #e65100;
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.22);
text-decoration: none !important;
transform: translateY(-1px);
}
.phone-country-change-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #ff9800;
color: #fff;
flex-shrink: 0;
}
.phone-country-change-text {
display: flex;
flex-direction: column;
flex: 1;
line-height: 1.4;
}
.phone-country-wrong {
font-size: 12.5px;
font-weight: 700;
color: #e65100;
}
.phone-country-action {
font-size: 11.5px;
color: #6d4c41;
font-weight: 400;
}
.phone-country-change-arrow {
display: flex;
align-items: center;
color: #ff9800;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.phone-country-change-btn:hover .phone-country-change-arrow {
transform: translateX(3px);
}
/* ── Premium Preview Section (home page) ── */
.js-preview-section {
background: linear-gradient(135deg, #fefce8 0%, #fffdf7 60%, #fff 100%);
border: 1.5px solid #fde68a;
border-radius: 18px;
padding: 28px 28px 24px;
}
.js-preview-section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.js-preview-section-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: 0 3px 12px rgba(245,158,11,0.38);
}
.js-preview-section-title {
font-size: 1rem;
font-weight: 700;
color: #92400e;
margin-bottom: 2px;
}
.js-preview-section-sub {
font-size: 0.82rem;
color: #b45309;
}
.js-preview-wrap {
border-radius: 14px;
overflow: hidden;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
background: #fff;
}
.js-preview-label-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
font-size: 0.72rem;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.02em;
}
.js-preview-label-bar i {
font-size: 0.82rem;
color: #9ca3af;
}
/* Browse Employees by Skills — hover shadow (matches feature-transition cards) */
#browse-employees-skills .skill-card {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#browse-employees-skills .skill-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
/* Trusted by Industry Leaders — hover shadow */
#featured-companies .trust-section {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#featured-companies .trust-section:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
#featured-companies .trust-actions .btn {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#featured-companies .trust-actions .btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
}
#featured-companies .company-card {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#featured-companies .company-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
/* Hungry For Jobs Statistics — hover shadow */
#job-statistics-section .statistics-card {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#job-statistics-section .statistics-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
#job-statistics-section .card.shadow {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#job-statistics-section .card.shadow:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13) !important;
}
#job-statistics-section .btn {
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#job-statistics-section .btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
}