/* ═══════════════════════════════════════════════════════════ dark.css — StackHire Dark Mode Scoped to [data-theme="dark"] on Toggle by adding/removing data-theme="dark" ═══════════════════════════════════════════════════════════ */ /* ── CSS Variable Overrides ─────────────────────────────── */ [data-theme="dark"] { --bg: #0a0f1e; --surface: #12121a; --surface2: #1a1a28; --border: rgba(255, 255, 255, 0.08); --border2: rgba(249, 107, 26, 0.25); --text: #f0ede8; --muted: rgba(255, 255, 255, 0.45); --muted2: rgba(255, 255, 255, 0.25); --accent: #f96b1a; --accent-dark: #e55c0f; --accent-dim: rgba(249, 107, 26, 0.12); --accent-glow: rgba(249, 107, 26, 0.3); --green: #4ade80; --red: #f87171; --blue: #60a5fa; --yellow: #fbbf24; } /* ── Body & Background ──────────────────────────────────── */ [data-theme="dark"] body { background: #0a0f1e; background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(249, 107, 26, 0.15) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 100% 100%, rgba(249, 107, 26, 0.07) 0%, transparent 50%), radial-gradient(ellipse 30% 25% at 0% 80%, rgba(249, 107, 26, 0.05) 0%, transparent 50%); background-attachment: fixed; } [data-theme="dark"] body::before { display: none; } /* Floating orb glow behind content */ [data-theme="dark"] body::after { content: ''; position: fixed; width: 600px; height: 600px; border-radius: 50%; background: rgba(249, 107, 26, 0.06); top: -200px; right: -150px; filter: blur(80px); pointer-events: none; z-index: 0; } /* ── NAV ────────────────────────────────────────────────── */ [data-theme="dark"] .nav { background: rgba(10, 10, 15, 0.85); border-bottom-color: var(--border); box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .nav-icon-dot { border-color: #0a0f1e; } [data-theme="dark"] .nav-drawer { background: rgba(12, 12, 20, 0.98); border-bottom-color: var(--border); } [data-theme="dark"] .nav-toggle span { background: var(--muted); } /* ── User Dropdown ──────────────────────────────────────── */ [data-theme="dark"] .user-dropdown { background: #1a1a28; border-color: var(--border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .udrop-name { color: #f0ede8; } [data-theme="dark"] .udrop-email { color: rgba(255,255,255,0.35); } [data-theme="dark"] .udrop-divider { background: rgba(255,255,255,0.07); } [data-theme="dark"] .udrop-item { color: #f0ede8; } [data-theme="dark"] .udrop-item:hover { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .udrop-logout { color: #f87171; } [data-theme="dark"] .udrop-logout:hover { background: rgba(248, 113, 113, 0.08); } /* ── Hero ───────────────────────────────────────────────── */ [data-theme="dark"] .hero { background: linear-gradient(160deg, #0d0d1a 0%, #0a0f1e 55%, #10091a 100%); } [data-theme="dark"] .hero-eyebrow { background: var(--accent-dim); border-color: var(--border2); color: #ffb380; } /* ── Search Box ─────────────────────────────────────────── */ [data-theme="dark"] .search-box { background: rgba(255, 255, 255, 0.04); border-color: var(--border); box-shadow: 0 0 0 4px rgba(249, 107, 26, 0.08), 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(249, 107, 26, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .search-input { color: var(--text); } [data-theme="dark"] .search-input::placeholder { color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .search-divider { background: var(--border); } [data-theme="dark"] .mode-select { color: var(--muted); } [data-theme="dark"] .mode-select option { background: #1a1a28; color: var(--text); } /* ── Role Chips ─────────────────────────────────────────── */ [data-theme="dark"] .role-chip { background: rgba(255, 255, 255, 0.04); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .role-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .role-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Stats Strip ────────────────────────────────────────── */ [data-theme="dark"] .stats-strip { background: rgba(255, 255, 255, 0.02); border-color: var(--border); } [data-theme="dark"] .stat-item { border-right-color: var(--border); } [data-theme="dark"] .stat-item:hover { background: rgba(249, 107, 26, 0.05); } /* ── Filter Sidebar ─────────────────────────────────────── */ [data-theme="dark"] .filter-toggle { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } [data-theme="dark"] .filter-card { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .filter-card-title { color: var(--muted2); border-bottom-color: var(--border); } [data-theme="dark"] .filter-group-label { color: var(--text); } [data-theme="dark"] .check-label { color: var(--muted); } [data-theme="dark"] .check-item:hover .check-label { color: var(--text); } [data-theme="dark"] .check-count { background: var(--surface2); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .btn-clear-filters { color: #f87171; border-color: rgba(248, 113, 113, 0.2); background: rgba(248, 113, 113, 0.05); } [data-theme="dark"] .btn-clear-filters:hover { background: rgba(248, 113, 113, 0.1); } /* ── Job Alert Signup ───────────────────────────────────── */ [data-theme="dark"] .alert-signup { background: linear-gradient(135deg, rgba(249,107,26,0.08) 0%, rgba(249,107,26,0.04) 100%); border-color: var(--border2); box-shadow: 0 2px 12px rgba(249,107,26,0.08); } [data-theme="dark"] .alert-signup-title { color: var(--text); } [data-theme="dark"] .alert-signup-sub { color: var(--muted); } [data-theme="dark"] .alert-email { background: var(--surface2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .alert-email::placeholder { color: var(--muted2); } [data-theme="dark"] .alert-email:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } /* ── Sort Select ────────────────────────────────────────── */ [data-theme="dark"] .sort-select { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .sort-select option { background: #1a1a28; } /* ── Job Cards ──────────────────────────────────────────── */ [data-theme="dark"] .job-card { background: rgba(255, 255, 255, 0.025); border-color: var(--border); box-shadow: none; } [data-theme="dark"] .job-card:hover { background: rgba(249, 107, 26, 0.06); border-color: var(--border2); box-shadow: 0 8px 32px rgba(249, 107, 26, 0.08); } [data-theme="dark"] .job-card.featured { background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(249,107,26,0.06) 100%); border-color: var(--border2); box-shadow: 0 4px 20px rgba(249, 107, 26, 0.1); } [data-theme="dark"] .company-logo { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .logo-fallback { background: var(--accent-dim); color: var(--accent); } [data-theme="dark"] .job-title { color: var(--text); } [data-theme="dark"] .job-company { color: var(--muted); } [data-theme="dark"] .job-meta { color: var(--muted); } [data-theme="dark"] .save-btn { background: var(--surface); border-color: var(--border); color: var(--muted2); } [data-theme="dark"] .save-btn:hover, [data-theme="dark"] .save-btn.saved { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .tech-tag { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .tech-tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .tech-tag-more { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--muted2); } [data-theme="dark"] .job-card-footer { border-top-color: var(--border); } [data-theme="dark"] .salary-range { color: var(--text); } [data-theme="dark"] .salary-period { color: var(--muted); } [data-theme="dark"] .posted-time { color: var(--muted2); } [data-theme="dark"] .btn-details { background: var(--surface); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .btn-details:hover { border-color: var(--text); color: var(--text); background: var(--surface2); } [data-theme="dark"] .featured-ribbon { background: var(--accent-dim); color: var(--accent); border-color: var(--border2); } /* ── Empty State ────────────────────────────────────────── */ [data-theme="dark"] .empty-state { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .empty-title { color: var(--text); } [data-theme="dark"] .empty-sub { color: var(--muted); } /* ── Pagination ─────────────────────────────────────────── */ [data-theme="dark"] .page-btn { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .page-btn:hover:not(.disabled):not(.active) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .page-ellipsis { color: var(--muted); } [data-theme="dark"] .page-info { color: var(--muted); } /* ── Detail Page ────────────────────────────────────────── */ [data-theme="dark"] .detail-header, [data-theme="dark"] .detail-section, [data-theme="dark"] .sidebar-card { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.25); } [data-theme="dark"] .detail-title { color: var(--text); } [data-theme="dark"] .detail-company-name { color: var(--muted); } [data-theme="dark"] .detail-meta-item { color: var(--muted); } [data-theme="dark"] .detail-section-title { color: var(--muted); border-bottom-color: var(--border); } [data-theme="dark"] .detail-body { color: var(--muted); } [data-theme="dark"] .stack-item { background: var(--surface2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .stack-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .sidebar-card-title { color: var(--muted2); border-bottom-color: var(--border); } [data-theme="dark"] .salary-label-sm { color: var(--muted2); } [data-theme="dark"] .salary-note { color: var(--muted2); } [data-theme="dark"] .apply-note { color: var(--muted); } [data-theme="dark"] .share-row { border-top-color: var(--border); } [data-theme="dark"] .share-label { color: var(--muted2); } [data-theme="dark"] .share-btn { background: var(--surface2); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .share-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .detail-list-row { border-bottom-color: var(--border); } [data-theme="dark"] .dl-key { color: var(--muted2); } [data-theme="dark"] .dl-val { color: var(--text); } [data-theme="dark"] .btn-back-all { background: var(--surface); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .btn-back-all:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .featured-badge { background: var(--accent-dim); color: var(--accent); border-color: var(--border2); } /* ── Related Jobs ───────────────────────────────────────── */ [data-theme="dark"] .related-card { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .related-card:hover { border-color: var(--border2); background: rgba(249,107,26,0.06); } [data-theme="dark"] .rel-title { color: var(--text); } [data-theme="dark"] .rel-company { color: var(--muted); } [data-theme="dark"] .rel-tag { background: var(--surface); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .rel-logo { background: var(--accent-dim); border-color: var(--border); color: var(--accent); } /* ── Theme Toggle Button ────────────────────────────────── */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 0; padding: 0; color: var(--muted); cursor: pointer; font-size: 1rem; transition: color 0.18s; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); } /* Sun icon — shown in dark mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── Live badge dark fix ─────────────────────────────────── */ [data-theme="dark"] .live-badge { color: #4ade80; background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.2); } [data-theme="dark"] .live-dot { background: #4ade80; box-shadow: 0 0 5px rgba(74, 222, 128, 0.5); } /* ── Search page specific ───────────────────────────────── */ [data-theme="dark"] .search-form-wrap, [data-theme="dark"] .search-results-header { color: var(--text); } /* ── Scrollbar (webkit) ─────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(249,107,26,0.4); } /* ── Transition for smooth theme switch ─────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; } /* Exclude transitions that cause layout jank */ .nav-tab-indicator, .auth-tab-indicator, input, textarea, select, button, a { transition: background-color 0.25s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } /* ── Search Page ────────────────────────────────────────── */ [data-theme="dark"] .search-hero { background: linear-gradient(160deg, #0d0d1a 0%, #0a0f1e 55%, #10091a 100%); border-bottom-color: var(--border); } [data-theme="dark"] .search-hero-title { color: var(--text); } [data-theme="dark"] .search-hero-sub { color: var(--muted); } [data-theme="dark"] .search-bar-input-wrap { background: rgba(255, 255, 255, 0.04); border-color: var(--border); box-shadow: none; } [data-theme="dark"] .search-bar-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249, 107, 26, 0.12); } [data-theme="dark"] .search-bar-input { color: var(--text); } [data-theme="dark"] .search-bar-input::placeholder { color: rgba(255,255,255,0.2); } [data-theme="dark"] .search-bar-input-wrap svg { color: var(--muted2); } [data-theme="dark"] .no-results { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .no-results-title { color: var(--text); } [data-theme="dark"] .no-results-sub { color: var(--muted); } [data-theme="dark"] .suggestion-chip { background: var(--surface2); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .suggestion-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .page-btn { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .page-btn:hover:not(.page-btn--disabled):not(.page-btn--active) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="dark"] .page-ellipsis { color: var(--muted2); } [data-theme="dark"] .pagination-summary { color: var(--muted); }