/** * WHY Pool — Main Stylesheet * * All visual values driven by CSS custom properties. * No hardcoded colors, sizes, or spacing outside :root. * Supports RTL via dir="rtl" on . * Mobile-first responsive design. */ /* ── Variables ──────────────────────────────────────────────── */ :root { /* Colors */ --primary: #6c5ce7; --primary-dark: #5a4bd1; --primary-light: #a29bfe; --primary-bg: #f0eeff; --bg: #fafafa; --white: #ffffff; --text: #2d3436; --text-light: #636e72; --border: #e0e0e0; --border-light: #f0f0f0; --success: #00b894; --error: #e17055; --error-bg: #ffeaea; --warning: #fdcb6e; /* Border radius */ --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 20px; --radius-circle: 50%; /* Shadows */ --shadow: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-hover: 0 4px 16px rgba(108, 92, 231, 0.3); /* Typography */ --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 28px; --fs-5xl: 36px; --fs-hero: 42px; /* Spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-base: 14px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px; --sp-3xl: 30px; --sp-4xl: 32px; --sp-5xl: 40px; --sp-6xl: 50px; --sp-7xl: 60px; --sp-8xl: 80px; /* Section max-widths */ --max-w-narrow: 400px; --max-w-content: 520px; --max-w-tags: 700px; --max-w-steps: 800px; --max-w-features: 800px; --max-w-stats: 900px; --max-w-form: 900px; --max-w-page: 1100px; /* Transition */ --transition: 0.2s ease; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; } a { text-decoration: none; color: var(--primary); } a:hover { color: var(--primary-dark); } img { max-width: 100%; } /* ── Navigation ─────────────────────────────────────────────── */ .nav { background: var(--white); padding: var(--sp-base) var(--sp-5xl); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-logo { font-size: var(--fs-3xl); font-weight: 700; color: var(--primary); letter-spacing: 1px; } .nav-logo span { color: var(--text); font-weight: 400; } .nav-links { display: flex; gap: var(--sp-2xl); align-items: center; } .nav-links a { color: var(--text-light); font-size: var(--fs-md); font-weight: 500; transition: color var(--transition); } .nav-links a:hover { color: var(--primary); } .nav-links a.nav-btn { background: var(--primary); color: var(--white); padding: var(--sp-sm) var(--sp-xl); border-radius: var(--radius-sm); transition: background var(--transition); } .nav-links a.nav-btn:hover { background: var(--primary-dark); color: var(--white); } /* ── Nav Dropdown ──────────────────────────────────────────── */ .nav-dropdown { position: relative; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; padding-top: var(--sp-xs); min-width: 180px; z-index: 101; } .nav-dropdown-menu-inner { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; } .nav-dropdown:hover .nav-dropdown-menu { display: block; } .nav-dropdown-menu-inner a { display: block; padding: var(--sp-md) var(--sp-lg); font-size: var(--fs-md); color: var(--text); transition: background var(--transition); border-bottom: 1px solid var(--border-light); } .nav-dropdown-menu-inner a:last-child { border-bottom: none; } .nav-dropdown-menu-inner a:hover { background: var(--bg); color: var(--primary); } /* ── Language Toggle ────────────────────────────────────────── */ .lang-toggle { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; font-size: var(--fs-xs); cursor: pointer; } .lang-toggle span { padding: var(--sp-xs) var(--sp-sm); transition: all var(--transition); font-weight: 600; } .lang-toggle span.active { background: var(--primary); color: var(--white); } .lang-toggle span:not(.active) { color: var(--text-light); } .lang-toggle span:not(.active):hover { background: var(--bg); } [dir="rtl"] .nav-dropdown-menu { right: auto; left: 0; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { text-align: center; padding: var(--sp-8xl) var(--sp-xl) var(--sp-6xl); background: linear-gradient(180deg, var(--primary-bg) 0%, var(--bg) 100%); } .hero h1 { font-size: var(--fs-hero); font-weight: 700; margin-bottom: var(--sp-lg); } .hero h1 em { font-style: normal; color: var(--primary); } .hero p { font-size: var(--fs-2xl); color: var(--text-light); max-width: var(--max-w-content); margin: 0 auto var(--sp-4xl); line-height: 1.6; } .hero-sub { margin-top: var(--sp-base); font-size: var(--fs-base); color: var(--text-light); } /* ── Buttons (shared base + variants) ─────────────────────── */ .btn-base { display: inline-block; font-family: var(--font); font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); } .btn-primary { display: inline-block; background: var(--primary); color: var(--white); padding: var(--sp-base) var(--sp-5xl); border-radius: var(--radius); font-size: var(--fs-xl); font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); color: var(--white); } .btn-outline { background: none; border: 1px solid var(--primary); color: var(--primary); padding: var(--sp-xs) var(--sp-base); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-outline:hover { background: var(--primary); color: var(--white); } .btn-submit { width: 100%; padding: var(--sp-base); background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); font-size: var(--fs-xl); font-weight: 600; cursor: pointer; transition: all var(--transition); margin-top: var(--sp-sm); } .btn-submit:hover { background: var(--primary-dark); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .btn-loading { opacity: 0.6; cursor: wait; } /* ── Stats ──────────────────────────────────────────────────── */ .stats { display: flex; justify-content: center; gap: var(--sp-5xl); padding: var(--sp-5xl) var(--sp-xl); max-width: var(--max-w-stats); margin: 0 auto; } .stat { text-align: center; } .stat-number { font-size: var(--fs-5xl); font-weight: 700; color: var(--primary); } .stat-label { font-size: var(--fs-md); color: var(--text-light); margin-top: var(--sp-xs); } /* ── Industries ─────────────────────────────────────────────── */ .industries { text-align: center; padding: var(--sp-xl) var(--sp-xl) var(--sp-6xl); } .industries h3 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 2px; color: var(--text-light); margin-bottom: var(--sp-xl); } .industry-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-md); max-width: var(--max-w-tags); margin: 0 auto; } .industry-tag { padding: var(--sp-sm) var(--sp-lg); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-base); color: var(--text); } .industry-tag strong { color: var(--primary); margin-inline-start: var(--sp-xs); } /* ── How It Works ───────────────────────────────────────────── */ .how-section { padding: var(--sp-7xl) var(--sp-xl); background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .how-section h2 { text-align: center; font-size: var(--fs-4xl); margin-bottom: var(--sp-5xl); } .steps { display: flex; justify-content: center; gap: var(--sp-7xl); max-width: var(--max-w-steps); margin: 0 auto; } .step { text-align: center; flex: 1; } .step-num { width: 48px; height: 48px; background: var(--primary); color: var(--white); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); font-weight: 700; margin: 0 auto var(--sp-base); } .step h4 { font-size: var(--fs-xl); margin-bottom: var(--sp-sm); } .step p { font-size: var(--fs-base); color: var(--text-light); line-height: 1.5; } /* ── Registration Form ──────────────────────────────────────── */ .register-section { padding: var(--sp-7xl) var(--sp-xl); max-width: var(--max-w-form); margin: 0 auto; } .register-section h2 { text-align: center; font-size: var(--fs-4xl); margin-bottom: var(--sp-sm); } .register-subtitle { text-align: center; color: var(--text-light); font-size: var(--fs-md); margin-bottom: var(--sp-4xl); } .form-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4xl); box-shadow: var(--shadow); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-lg); } .form-row.single { grid-template-columns: 1fr; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: var(--sp-xs); } .form-group input, .form-group select, .form-group textarea { padding: var(--sp-md) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-md); font-family: var(--font); outline: none; transition: border-color var(--transition); background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); } .form-group textarea { resize: none; height: 120px; } .form-group .hint { font-size: var(--fs-xs); color: var(--text-light); margin-top: 3px; } .form-divider { border: none; border-top: 1px solid var(--border-light); margin: var(--sp-2xl) 0; } /* .form-section-label styles moved to Section Label with Icon + Number block */ .form-footer { text-align: center; margin-top: var(--sp-base); font-size: var(--fs-sm); color: var(--text-light); } .form-footer a { color: var(--primary); } /* ── Salary Inline Group ────────────────────────────────────── */ .salary-group { display: flex; gap: var(--sp-sm); } .salary-group input { flex: 1; } .salary-group select { width: 85px; } /* ── Skills Input ───────────────────────────────────────────── */ .skills-input { display: flex; flex-wrap: wrap; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); min-height: 44px; cursor: text; transition: border-color var(--transition); } .skills-input:focus-within { border-color: var(--primary); } .skills-input input { border: none; outline: none; font-size: var(--fs-md); flex: 1; min-width: 100px; padding: 2px; } .skill-chip { background: var(--primary-bg); color: var(--primary); padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-pill); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--sp-sm); } .skill-chip button { background: none; border: none; color: var(--primary); cursor: pointer; font-size: var(--fs-md); padding: 0; line-height: 1; } /* ── About Me Header ────────────────────────────────────────── */ .about-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-xs); } .about-header label { margin-bottom: 0; } /* ── Success Card ───────────────────────────────────────────── */ .success-card { display: none; text-align: center; background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-6xl) var(--sp-4xl); box-shadow: var(--shadow); } .success-card.visible { display: block; } .success-icon { width: 64px; height: 64px; background: var(--success); color: var(--white); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-4xl); margin: 0 auto var(--sp-xl); } .success-card h3 { font-size: var(--fs-3xl); margin-bottom: var(--sp-md); } .success-card p { color: var(--text-light); font-size: var(--fs-md); line-height: 1.6; max-width: var(--max-w-narrow); margin: 0 auto; } /* ── Error Message ──────────────────────────────────────────── */ .form-error { background: var(--error-bg); color: var(--error); padding: var(--sp-md) var(--sp-base); border-radius: var(--radius-sm); font-size: var(--fs-base); margin-bottom: var(--sp-lg); display: none; } .form-error.visible { display: block; } /* ── Company Section ────────────────────────────────────────── */ .company-section { padding: var(--sp-7xl) var(--sp-xl); background: var(--white); border-top: 1px solid var(--border); text-align: center; } .company-section h2 { font-size: var(--fs-4xl); margin-bottom: var(--sp-md); } .company-section > p { color: var(--text-light); font-size: var(--fs-lg); margin-bottom: var(--sp-3xl); } .company-features { display: flex; justify-content: center; gap: var(--sp-3xl); max-width: var(--max-w-features); margin: 0 auto var(--sp-3xl); } .company-feature { flex: 1; padding: var(--sp-xl); background: var(--bg); border-radius: var(--radius-md); } .company-feature h4 { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); } .company-feature p { font-size: var(--fs-base); color: var(--text-light); margin-bottom: 0; } /* ── Footer ─────────────────────────────────────────────────── */ .footer { text-align: center; padding: var(--sp-3xl) var(--sp-xl); color: var(--text-light); font-size: var(--fs-base); border-top: 1px solid var(--border); } .footer-sub { margin-top: var(--sp-xs); display: inline-block; } /* ── Company Nav (authenticated pages) ─────────────────────── */ .company-nav { display: flex; align-items: center; gap: var(--sp-xl); } .company-nav a { color: var(--text-light); font-size: var(--fs-md); font-weight: 500; transition: color var(--transition); } .company-nav a:hover { color: var(--primary); } .company-nav .credits-badge { padding: var(--sp-xs) var(--sp-md); background: var(--primary-bg); color: var(--primary); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; } /* ── Search Page ───────────────────────────────────────────── */ .search-layout { max-width: var(--max-w-page); margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl); display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-2xl); } .search-sidebar { position: sticky; top: 80px; align-self: start; } .search-filters { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-xl); box-shadow: var(--shadow); } .search-filters h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-lg); display: flex; align-items: center; justify-content: space-between; } .search-filters .form-group { margin-bottom: var(--sp-md); } .search-filters .form-group label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-xs); display: block; } .search-filters input, .search-filters select { width: 100%; padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); font-family: var(--font); } .search-filters .btn-submit { font-size: var(--fs-md); } .search-clear { background: none; border: none; color: var(--text-light); font-size: var(--fs-sm); cursor: pointer; transition: color var(--transition); } .search-clear:hover { color: var(--error); } .search-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); } .search-results-header h3 { font-size: var(--fs-lg); } .search-results-count { font-size: var(--fs-sm); color: var(--text-light); } /* ── Candidate Card ────────────────────────────────────────── */ .candidate-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-xl); box-shadow: var(--shadow); margin-bottom: var(--sp-lg); transition: box-shadow var(--transition); } .candidate-card:hover { box-shadow: var(--shadow-hover); } .candidate-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-md); } .candidate-card-name { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); } .candidate-card-position { font-size: var(--fs-md); color: var(--text-light); margin-top: var(--sp-xs); } .candidate-card-badge { padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0; } .candidate-card-badge.verified { background: #e6f9f1; color: var(--success); } .candidate-card-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-sm) var(--sp-xl); margin-bottom: var(--sp-md); font-size: var(--fs-sm); } .candidate-card-detail { display: flex; flex-direction: column; } .candidate-card-detail-label { color: var(--text-light); font-size: var(--fs-xs); margin-bottom: 2px; } .candidate-card-detail-value { color: var(--text); } .candidate-card-skills { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-md); } .candidate-card-about { font-size: var(--fs-sm); color: var(--text-light); line-height: 1.5; margin-bottom: var(--sp-md); font-style: italic; } .candidate-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-md); border-top: 1px solid var(--border-light); } .candidate-card-salary { font-size: var(--fs-md); font-weight: 600; color: var(--primary); } .candidate-card-contact { background: var(--primary-bg); border-radius: var(--radius); padding: var(--sp-md); margin-top: var(--sp-md); } .candidate-card-contact p { font-size: var(--fs-sm); margin-bottom: var(--sp-xs); } .candidate-card-contact a { font-weight: 600; } /* ── Pagination ────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--sp-lg); margin-top: var(--sp-2xl); } .pagination button { padding: var(--sp-sm) var(--sp-xl); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: var(--text); font-size: var(--fs-sm); cursor: pointer; transition: all var(--transition); } .pagination button:hover { border-color: var(--primary); color: var(--primary); } .pagination button:disabled { opacity: 0.4; cursor: default; } .pagination-info { font-size: var(--fs-sm); color: var(--text-light); } /* ── Dashboard ─────────────────────────────────────────────── */ .dashboard-layout { max-width: var(--max-w-form); margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl); } .dashboard-header { text-align: center; margin-bottom: var(--sp-4xl); } .dashboard-header h2 { font-size: var(--fs-4xl); margin-bottom: var(--sp-sm); } .dashboard-stats { display: flex; justify-content: center; gap: var(--sp-2xl); margin-bottom: var(--sp-4xl); } .dashboard-stat { text-align: center; padding: var(--sp-xl); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 150px; } .dashboard-stat-value { font-size: var(--fs-4xl); font-weight: 700; color: var(--primary); } .dashboard-stat-label { font-size: var(--fs-sm); color: var(--text-light); margin-top: var(--sp-xs); } /* ── Dashboard Search + Sort Bar ───────────────────────────── */ .dashboard-toolbar { display: flex; gap: var(--sp-md); margin-bottom: var(--sp-xl); align-items: center; } .dashboard-search { flex: 1; display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: border-color var(--transition); } .dashboard-search:focus-within { border-color: var(--primary); } .dashboard-search svg { flex-shrink: 0; color: var(--text-light); width: 16px; height: 16px; } .dashboard-search input { border: none; outline: none; background: transparent; font-size: var(--fs-md); font-family: var(--font); flex: 1; } .dashboard-sort { display: flex; align-items: center; gap: var(--sp-sm); } .dashboard-sort svg { color: var(--text-light); width: 16px; height: 16px; } .dashboard-sort select { padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); font-family: var(--font); background: var(--white); } /* ── Dashboard Stat Icons ─────────────────────────────────── */ .dashboard-stat svg { color: var(--primary-light); margin-bottom: var(--sp-sm); } /* ── Unlocked Candidate Cards ──────────────────────────────── */ .unlocked-card { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--border-light); } .unlocked-card:last-child { border-bottom: none; } .unlocked-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-md); } .unlocked-card-name { font-size: var(--fs-lg); font-weight: 600; color: var(--text); } .unlocked-card-subtitle { font-size: var(--fs-sm); color: var(--text-light); margin-top: 2px; } .unlocked-card-date { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-xs); color: var(--text-light); flex-shrink: 0; } .unlocked-card-date svg { width: 14px; height: 14px; } .unlocked-card-contact { display: flex; flex-wrap: wrap; gap: var(--sp-lg); margin-bottom: var(--sp-md); } .unlocked-contact-item { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-sm); color: var(--primary); transition: opacity var(--transition); } .unlocked-contact-item:hover { opacity: 0.7; } .unlocked-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; } .unlocked-card-actions { display: flex; gap: var(--sp-sm); margin-top: var(--sp-md); } .unlocked-card-actions button { display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xs) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-size: var(--fs-xs); font-family: var(--font); color: var(--text-light); cursor: pointer; transition: all var(--transition); } .unlocked-card-actions button:hover { border-color: var(--primary); color: var(--primary); } .unlocked-card-actions button svg { width: 14px; height: 14px; } .unlocked-card-expand { display: none; margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--border-light); } .unlocked-card-expand.visible { display: block; } .unlocked-card-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm) var(--sp-xl); margin-bottom: var(--sp-md); } .unlocked-card-expand-item { font-size: var(--fs-sm); } .unlocked-card-expand-label { color: var(--text-light); font-size: var(--fs-xs); margin-bottom: 2px; } .unlocked-card-expand-about { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; font-style: italic; margin-bottom: var(--sp-md); padding: var(--sp-md); background: var(--bg); border-radius: var(--radius); } .btn-read-more { background: none; border: none; color: var(--primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 0; transition: opacity var(--transition); } .btn-read-more:hover { opacity: 0.7; } .unlocked-card-avatar { width: 44px; height: 44px; border-radius: var(--radius-circle); background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: 700; flex-shrink: 0; } .unlocked-card-header-left { display: flex; align-items: center; gap: var(--sp-md); } @media (max-width: 640px) { .search-layout { grid-template-columns: 1fr; } .search-sidebar { position: static; } .candidate-card-details { grid-template-columns: 1fr 1fr; } .dashboard-stats { flex-direction: column; align-items: center; } .unlocked-card-header { flex-direction: column; gap: var(--sp-sm); } .unlocked-card-contact { flex-direction: column; gap: var(--sp-sm); } } /* ── Admin Layout ──────────────────────────────────────────── */ .admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 57px); } .admin-sidebar { background: var(--white); border-right: 1px solid var(--border); padding: var(--sp-xl) 0; } .admin-sidebar-nav { display: flex; flex-direction: column; } .admin-sidebar-nav a { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-xl); font-size: var(--fs-md); color: var(--text-light); transition: all var(--transition); border-left: 3px solid transparent; } .admin-sidebar-nav a:hover { color: var(--primary); background: var(--bg); } .admin-sidebar-nav a.active { color: var(--primary); background: var(--primary-bg); border-left-color: var(--primary); font-weight: 600; } .admin-sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; } .admin-sidebar-divider { height: 1px; background: var(--border-light); margin: var(--sp-md) var(--sp-xl); } .admin-main { padding: var(--sp-2xl) var(--sp-4xl); background: var(--bg); overflow-y: auto; } .admin-main h2 { font-size: var(--fs-4xl); margin-bottom: var(--sp-2xl); } /* ── Admin Stats Grid ─────────────────────────────────────── */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-xl); margin-bottom: var(--sp-2xl); } .admin-stat-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-xl); box-shadow: var(--shadow); } .admin-stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); } .admin-stat-card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); } .admin-stat-card-icon { color: var(--primary-light); } .admin-stat-card-icon svg { width: 24px; height: 24px; } .admin-stat-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-sm) 0; border-bottom: 1px solid var(--border-light); } .admin-stat-row:last-child { border-bottom: none; } .admin-stat-label { font-size: var(--fs-sm); color: var(--text-light); } .admin-stat-value { font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .admin-stat-value.primary { color: var(--primary); } .admin-stat-value.success { color: var(--success); } .admin-stat-value.warning { color: #f39c12; } .admin-stat-value.error { color: var(--error); } /* ── Admin Table ──────────────────────────────────────────── */ .admin-table-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-xl); box-shadow: var(--shadow); margin-bottom: var(--sp-2xl); } .admin-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-lg); } .admin-table-title { font-size: var(--fs-lg); font-weight: 600; } .admin-table-search { display: flex; gap: var(--sp-sm); } .admin-table-search input, .admin-table-search select { padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); font-family: var(--font); } .admin-table-search input { min-width: 200px; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { text-align: left; padding: var(--sp-md); font-size: var(--fs-sm); font-weight: 600; color: var(--text-light); border-bottom: 2px solid var(--border); white-space: nowrap; } .admin-table td { padding: var(--sp-md); font-size: var(--fs-sm); border-bottom: 1px solid var(--border-light); vertical-align: middle; } .admin-table tr:hover td { background: var(--bg); } .admin-table .status-badge { display: inline-block; padding: 2px var(--sp-sm); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; } .status-badge.verified, .status-badge.active { background: #e6f9f1; color: var(--success); } .status-badge.pending { background: #fff3e0; color: #f39c12; } .status-badge.paused, .status-badge.suspended { background: var(--error-bg); color: var(--error); } .status-badge.deleted { background: var(--bg); color: var(--text-light); } .admin-table .actions { display: flex; gap: var(--sp-sm); } .admin-table .actions button { padding: var(--sp-xs) var(--sp-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-size: var(--fs-xs); cursor: pointer; transition: all var(--transition); } .admin-table .actions button:hover { border-color: var(--primary); color: var(--primary); } .admin-table .actions button.danger:hover { border-color: var(--error); color: var(--error); } .admin-table .actions button.success:hover { border-color: var(--success); color: var(--success); } [dir="rtl"] .admin-sidebar { border-right: none; border-left: 1px solid var(--border); } [dir="rtl"] .admin-sidebar-nav a { border-left: none; border-right: 3px solid transparent; } [dir="rtl"] .admin-sidebar-nav a.active { border-right-color: var(--primary); } [dir="rtl"] .admin-table th { text-align: right; } @media (max-width: 640px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-main { padding: var(--sp-lg); } } /* ── Auth Cards (register, login, forgot password) ────────── */ .auth-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4xl); box-shadow: var(--shadow); width: 100%; max-width: 460px; text-align: center; } .auth-card h3 { font-size: var(--fs-3xl); margin-bottom: var(--sp-sm); } .auth-subtitle { color: var(--text-light); font-size: var(--fs-md); margin-bottom: var(--sp-2xl); } .auth-card form { text-align: left; } .auth-card .form-group { margin-bottom: var(--sp-lg); } .auth-card .btn-submit { margin-top: var(--sp-sm); } .auth-footer { text-align: center; margin-top: var(--sp-xl); font-size: var(--fs-sm); color: var(--text-light); } .auth-footer a { color: var(--primary); font-weight: 600; margin-inline-start: var(--sp-xs); } @media (max-width: 640px) { .auth-card { padding: var(--sp-xl); margin: 0 var(--sp-lg); } } /* ── Verified Page ─────────────────────────────────────────── */ .verified-section { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: var(--sp-5xl) var(--sp-xl); } .verified-card { text-align: center; background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-6xl) var(--sp-4xl); box-shadow: var(--shadow); max-width: var(--max-w-content); width: 100%; } .verified-card h3 { font-size: var(--fs-3xl); margin-bottom: var(--sp-md); } .verified-card p { color: var(--text-light); font-size: var(--fs-md); line-height: 1.6; margin-bottom: var(--sp-2xl); } .verified-icon { width: 80px; height: 80px; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-hero); margin: 0 auto var(--sp-xl); color: var(--white); } .verified-icon.success { background: var(--success); } .verified-icon.info { background: var(--primary); } .verified-icon.error { background: var(--error); } .verified-icon.loading { background: transparent; } /* ── Profile Page ──────────────────────────────────────────── */ .profile-section { max-width: var(--max-w-form); margin: 0 auto; padding: var(--sp-5xl) var(--sp-xl); } .profile-header { text-align: center; margin-bottom: var(--sp-4xl); } .profile-header h2 { font-size: var(--fs-4xl); margin-bottom: var(--sp-sm); } .profile-header p { color: var(--text-light); font-size: var(--fs-md); } .profile-status { display: inline-flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-lg); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-md); } .profile-status.active { background: #e6f9f1; color: var(--success); } .profile-status.paused { background: #fff3e0; color: #f39c12; } .profile-status.deleted { background: var(--error-bg); color: var(--error); } .profile-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4xl); box-shadow: var(--shadow); margin-bottom: var(--sp-2xl); } .profile-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-xl); } .profile-card-title { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-lg); font-weight: 600; color: var(--primary); } .profile-card-title svg { flex-shrink: 0; } .profile-field { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--sp-md) 0; border-bottom: 1px solid var(--border-light); } .profile-field:last-child { border-bottom: none; } .profile-field-label { font-size: var(--fs-sm); color: var(--text-light); font-weight: 500; min-width: 140px; flex-shrink: 0; } .profile-field-value { font-size: var(--fs-md); color: var(--text); text-align: right; flex: 1; } [dir="rtl"] .profile-field-value { text-align: left; } .profile-field-value.locked { color: var(--text-light); font-style: italic; } .profile-skills { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: flex-end; } [dir="rtl"] .profile-skills { justify-content: flex-start; } .profile-about { font-size: var(--fs-md); line-height: 1.6; color: var(--text); font-style: italic; } .profile-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-xl); } .profile-actions .btn-primary { padding: var(--sp-md) var(--sp-2xl); } .btn-danger { display: inline-block; background: var(--error); color: var(--white); padding: var(--sp-md) var(--sp-2xl); border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); } .btn-danger:hover { opacity: 0.85; } .btn-secondary { display: inline-block; background: var(--bg); color: var(--text); padding: var(--sp-md) var(--sp-2xl); border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); } .btn-secondary:hover { background: var(--border-light); } .btn-warning { display: inline-block; background: var(--warning); color: var(--text); padding: var(--sp-md) var(--sp-2xl); border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); } .btn-warning:hover { opacity: 0.85; } .profile-info-bar { text-align: center; padding: var(--sp-md) var(--sp-lg); background: var(--primary-bg); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--primary-dark); margin-top: var(--sp-xl); } .profile-toast { position: fixed; top: var(--sp-xl); left: 50%; transform: translateX(-50%); padding: var(--sp-md) var(--sp-2xl); border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; color: var(--white); z-index: 200; display: none; } .profile-toast.success { background: var(--success); display: block; } .profile-toast.error { background: var(--error); display: block; } @media (max-width: 640px) { .profile-card { padding: var(--sp-xl); } .profile-field { flex-direction: column; gap: var(--sp-xs); } .profile-field-value { text-align: left; } .profile-skills { justify-content: flex-start; } .profile-actions { flex-direction: column; } .profile-actions button, .profile-actions a { width: 100%; text-align: center; } } /* ── Section Card (subtle background per form section) ─────── */ .form-section { background: var(--bg); border-radius: var(--radius-lg); padding: var(--sp-2xl) var(--sp-2xl) var(--sp-lg); margin-bottom: var(--sp-2xl); } /* ── Section Label with Icon + Number ─────────────────────── */ .form-section-label { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xl); } .form-section-label .section-num { width: 28px; height: 28px; background: var(--primary); color: var(--white); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0; } .form-section-label .section-icon { color: var(--primary); display: flex; align-items: center; flex-shrink: 0; } .form-section-label .section-text { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); font-weight: 600; } /* ── Inline Validation ────────────────────────────────────── */ .form-group.valid input, .form-group.valid select { border-color: var(--success); } .form-group.invalid input, .form-group.invalid select { border-color: var(--error); } .validation-icon { position: absolute; right: var(--sp-md); top: 50%; transform: translateY(-50%); display: none; } .form-group.valid .validation-icon.valid-icon, .form-group.invalid .validation-icon.invalid-icon { display: flex; } .validation-msg { font-size: var(--fs-xs); margin-top: 2px; display: none; } .form-group.valid .validation-msg { display: block; color: var(--success); } .form-group.invalid .validation-msg { display: block; color: var(--error); } .input-wrapper { position: relative; display: flex; align-items: center; } .input-wrapper input, .input-wrapper select { width: 100%; padding-inline-end: var(--sp-5xl); } [dir="rtl"] .validation-icon { right: auto; left: var(--sp-md); } /* ── Salary Preview ───────────────────────────────────────── */ .salary-preview { margin-top: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); background: var(--primary-bg); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--primary-dark); display: none; } .salary-preview.visible { display: block; } .salary-preview-label { font-weight: 600; } /* ── Skill Suggestions ────────────────────────────────────── */ .skill-suggestions { margin-top: var(--sp-sm); display: none; } .skill-suggestions.visible { display: block; } .skill-suggestions-label { font-size: var(--fs-xs); color: var(--text-light); margin-bottom: var(--sp-xs); } .skill-suggestions-tags { display: flex; flex-wrap: wrap; gap: var(--sp-sm); } .skill-suggestion-tag { padding: var(--sp-xs) var(--sp-md); background: var(--white); border: 1px solid var(--primary-light); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--primary); cursor: pointer; transition: all var(--transition); } .skill-suggestion-tag:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } .skill-suggestion-tag.used { opacity: 0.4; cursor: default; pointer-events: none; } /* ── About Me Preview Card ────────────────────────────────── */ .about-preview { margin-top: var(--sp-md); padding: var(--sp-lg); background: var(--bg); border-radius: var(--radius); border: 1px dashed var(--border); display: none; } .about-preview.visible { display: block; } .about-preview-label { font-size: var(--fs-xs); color: var(--text-light); margin-bottom: var(--sp-sm); display: flex; align-items: center; gap: var(--sp-xs); } .about-preview-text { font-size: var(--fs-md); color: var(--text); line-height: 1.6; font-style: italic; } /* ── Mobile Sticky CTA ────────────────────────────────────── */ .sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: var(--sp-md) var(--sp-xl); background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); z-index: 99; } .sticky-cta .btn-submit { margin-top: 0; } @media (max-width: 640px) { .sticky-cta { display: block; } .form-card .btn-submit { display: none; } } /* ── Static Pages (Terms, Privacy, About, Pricing) ─────────── */ .static-page { max-width: var(--max-w-form); margin: 0 auto; padding: var(--sp-5xl) var(--sp-xl); } .static-page h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-2xl); text-align: center; } .static-content { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4xl); box-shadow: var(--shadow); line-height: 1.8; font-size: var(--fs-md); } .static-content h3 { font-size: var(--fs-lg); color: var(--primary); margin-top: var(--sp-2xl); margin-bottom: var(--sp-md); } .static-content h3:first-child { margin-top: 0; } .static-content p { margin-bottom: var(--sp-md); color: var(--text); } .static-content ul { margin-bottom: var(--sp-md); padding-inline-start: var(--sp-2xl); } .static-content li { margin-bottom: var(--sp-sm); } .static-content table { width: 100%; border-collapse: collapse; margin: var(--sp-xl) 0; } .static-content th, .static-content td { padding: var(--sp-md); border-bottom: 1px solid var(--border-light); text-align: left; } .static-content th { font-weight: 600; border-bottom: 2px solid var(--border); } .static-page .btn-primary { display: block; text-align: center; max-width: 200px; margin: var(--sp-2xl) auto 0; } /* ── Honeypot (invisible to humans, visible to bots) ────────── */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; } /* ── Loading Skeleton ───────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-xs); display: inline-block; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 640px) { .hero h1 { font-size: var(--fs-4xl); } .hero p { font-size: var(--fs-lg); } .stats { flex-wrap: wrap; gap: var(--sp-xl); } .steps { flex-direction: column; gap: var(--sp-3xl); } .form-row { grid-template-columns: 1fr; } .company-features { flex-direction: column; } .nav { padding: var(--sp-base) var(--sp-xl); } .nav-links { gap: var(--sp-md); } .register-section { padding: var(--sp-5xl) var(--sp-lg); } .form-card { padding: var(--sp-xl); } } /* ── RTL Support ────────────────────────────────────────────── */ [dir="rtl"] { text-align: right; } [dir="rtl"] .nav { direction: rtl; } [dir="rtl"] .form-row { direction: rtl; }