/* ========================================================================== JobVisitors Magician — Shared theme (matches jobvisitors-version-6) Imported by pricing.html, dashboard.html, admin.html, index.html ========================================================================== */ :root { /* Brand */ --color-primary: #1E4CB0; --color-primary-hover: #173E92; --color-primary-soft: rgba(30, 76, 176, 0.10); --color-secondary: #FF9F1C; --color-secondary-hover: #E08612; --color-secondary-soft: rgba(255, 159, 28, 0.12); /* Backgrounds */ --bg-primary: #F4F7FA; --bg-secondary: #FFFFFF; --bg-dark: #101828; /* Text */ --text-primary: #101828; --text-secondary: #4B5563; --text-muted: #6B7280; --text-light: #9CA3AF; /* UI */ --border: #E5E7EB; --border-light: #F3F4F6; --success: #10B981; --success-light: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --danger: #EF4444; /* Typography */ --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Radius */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06); --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08); --shadow-lg: 0 18px 45px rgba(16, 24, 40, 0.10); --shadow-accent: 0 10px 25px rgba(30, 76, 176, 0.28); --transition: 200ms ease; } /* ───────────────────────────────────────────────────────────── DARK MODE — applies when is set ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-primary: #0F172A; /* page bg */ --bg-secondary: #1E293B; /* cards / surfaces */ --bg-dark: #020617; --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-light: #64748B; --border: #334155; --border-light: #1E293B; --color-primary: #3F6BC9; /* lighter blue for contrast on dark */ --color-primary-hover: #5982D5; --color-primary-soft: rgba(63, 107, 201, 0.18); --color-secondary: #FFA928; --color-secondary-hover: #FFB94A; --color-secondary-soft: rgba(255, 169, 40, 0.18); --success-light: rgba(16, 185, 129, 0.18); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55); --shadow-accent: 0 10px 25px rgba(63, 107, 201, 0.45); color-scheme: dark; } /* Theme transition — smooth switch between modes */ html, body, .jv-navbar, .jv-footer, .jv-card, .plan-card, .stat-card, .dash-tab, .credits-table, .modal, .faq-item, .filter-pill, .billing-toggle, .qa-item, .info-box, .table-wrap, .event-card, .jv-toast { transition: background 250ms ease, color 250ms ease, border-color 250ms ease; } /* Dark mode: make sticky/glass navbar tint match */ [data-theme="dark"] .jv-navbar { background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.85)); } /* Dark mode: dashboard hero gradient stays primary but darker */ [data-theme="dark"] .dash-header { background: linear-gradient(135deg, #1E3A8A 0%, #1E4CB0 100%); } /* Dark mode: form inputs */ [data-theme="dark"] .jv-input, [data-theme="dark"] .date-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="date"], [data-theme="dark"] textarea { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .resume-preview { background: rgba(0, 0, 0, 0.3); } [data-theme="dark"] .empty { border-color: var(--border); } [data-theme="dark"] thead { background: rgba(0, 0, 0, 0.25); } [data-theme="dark"] tr:hover td { background: rgba(255, 255, 255, 0.03); } /* ─── Dark mode fixes for index.html (Magician SPA) ─────────────────────── */ /* Onboarding form — labels, toggles, inputs */ [data-theme="dark"] .form-label, [data-theme="dark"] label, [data-theme="dark"] .form-section-title, [data-theme="dark"] .field-label, [data-theme="dark"] .resume-helper, [data-theme="dark"] .badge-required, [data-theme="dark"] .req-label { color: var(--text-primary) !important; } [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-input, [data-theme="dark"] .form-control { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .form-textarea::placeholder, [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; opacity: 0.85; } /* Toggle pills (Full-time / Internship / Both, Fresher / 1 yr / 2 yrs) */ [data-theme="dark"] .tog { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] .tog.sel, [data-theme="dark"] .tog.selected, [data-theme="dark"] .tog:hover { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* Hero CTA "Find My Top 5 Jobs" — keep blue */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn.btn-primary { color: #fff !important; } /* Ghost / secondary buttons (Dashboard, Refresh on jobs page) */ [data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-secondary { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn-secondary:hover { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* Mode-pill (Free / Pro toggle when shown) */ [data-theme="dark"] .mode-pill { background: var(--bg-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] .mode-pill-btn { color: var(--text-secondary) !important; } [data-theme="dark"] .mode-pill-btn.active { background: var(--color-primary) !important; color: #fff !important; } [data-theme="dark"] .mode-bar { background: var(--bg-secondary) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .mode-desc { color: var(--text-secondary) !important; } [data-theme="dark"] .mode-desc strong { color: var(--text-primary) !important; } /* Search field in fetched navbar (jobvisitors.com) */ [data-theme="dark"] .jv-navbar-search, [data-theme="dark"] .jv-navbar-search input, [data-theme="dark"] .jv-navbar-search-form, [data-theme="dark"] .jv-navbar-search-form input, [data-theme="dark"] .search-bar, [data-theme="dark"] form[role="search"] input { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .jv-navbar-search input::placeholder, [data-theme="dark"] .jv-navbar-search-form input::placeholder, [data-theme="dark"] form[role="search"] input::placeholder { color: var(--text-muted) !important; } /* AI/Smart Job Placement badge */ [data-theme="dark"] .ai-badge, [data-theme="dark"] .jv-badge { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; } /* Job cards & resume analysis card */ [data-theme="dark"] .job-ai-card, [data-theme="dark"] .resume-score-card, [data-theme="dark"] .resume-analysis, [data-theme="dark"] .card, [data-theme="dark"] .modal, [data-theme="dark"] .empty-state { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Footer text on dark background */ [data-theme="dark"] .footer, [data-theme="dark"] footer { background: var(--bg-primary) !important; } [data-theme="dark"] .footer h4, [data-theme="dark"] .jv-footer__col h4 { color: var(--text-primary) !important; } [data-theme="dark"] .footer a, [data-theme="dark"] .jv-footer a { color: var(--text-secondary) !important; } [data-theme="dark"] .footer a:hover, [data-theme="dark"] .jv-footer a:hover { color: var(--color-primary) !important; } /* Live-fetched JV navbar from WordPress — invert link colors for dark mode */ [data-theme="dark"] nav.navbar a, [data-theme="dark"] nav.navbar .nav-link { color: var(--text-primary) !important; } [data-theme="dark"] nav.navbar { background: var(--bg-primary) !important; } /* Credit dropdown — make sure backgrounds + text adapt */ [data-theme="dark"] #creditMenu { background: var(--bg-secondary) !important; border-color: var(--border) !important; } [data-theme="dark"] #creditMenu a, [data-theme="dark"] #creditMenu button { color: var(--text-primary) !important; background: transparent !important; } [data-theme="dark"] #creditMenu a:hover, [data-theme="dark"] #creditMenu button:hover { background: rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] #creditMenu .test-tool > div:first-child { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-muted) !important; } /* Skeleton loader pulse — visible on dark */ [data-theme="dark"] [style*="animation:pulse"] { background: var(--border) !important; } /* Error / success banners */ [data-theme="dark"] .error-bar, [data-theme="dark"] .err-msg, [data-theme="dark"] .alert-danger, [data-theme="dark"] .toast-danger { background: rgba(239,68,68,0.15) !important; color: #FCA5A5 !important; border-color: rgba(239,68,68,0.35) !important; } [data-theme="dark"] .alert-success, [data-theme="dark"] .toast-success { background: rgba(16,185,129,0.15) !important; color: #6EE7B7 !important; border-color: rgba(16,185,129,0.35) !important; } /* Badges (Free Mode / Pro Mode / Demo) */ [data-theme="dark"] .badge, [data-theme="dark"] #modeBadge { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-color: var(--color-primary-soft) !important; } /* Demo bar */ [data-theme="dark"] .demo-bar { background: rgba(255,159,28,0.12) !important; color: #FCD9A4 !important; } [data-theme="dark"] .demo-mode-badge { background: var(--color-secondary) !important; color: #fff !important; } [data-theme="dark"] .demo-label { color: var(--color-secondary) !important; } /* Page sections — onboarding hero, jobs container */ [data-theme="dark"] .onboard-hero, [data-theme="dark"] .container > section, [data-theme="dark"] .page-section, [data-theme="dark"] .form-section, [data-theme="dark"] .upload-area, [data-theme="dark"] .form-card { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Upload dropzone */ [data-theme="dark"] .upload-dropzone, [data-theme="dark"] [class*="drop"], [data-theme="dark"] #ruDropzone { background: var(--bg-primary) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } [data-theme="dark"] #ruDropzone:hover { border-color: var(--color-primary) !important; } /* Tab buttons (PDF / Paste Text) in onboarding */ [data-theme="dark"] .tab-btn, [data-theme="dark"] [role="tab"] { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .tab-btn.active, [data-theme="dark"] [role="tab"][aria-selected="true"] { background: var(--color-primary) !important; color: #fff !important; } /* "Required" label color */ [data-theme="dark"] .required, [data-theme="dark"] [class*="required"] { color: var(--color-secondary) !important; } /* Info / verifying loading bar at bottom of onboarding */ [data-theme="dark"] .verifying-bar, [data-theme="dark"] [class*="loading-bar"], [data-theme="dark"] [class*="progress-bar"] { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; } /* Score percentages — make sure text colors stay readable on dark surfaces */ [data-theme="dark"] [style*="color:var(--accent)"] { color: var(--color-primary) !important; } [data-theme="dark"] [style*="color:var(--success)"] { color: #6EE7B7 !important; } /* "Sign in" / "Post a Job" buttons in fetched WP navbar */ [data-theme="dark"] .btn-signin { color: var(--text-primary) !important; border-color: var(--border) !important; background: var(--bg-secondary) !important; } [data-theme="dark"] .btn-post-job { color: #fff !important; } /* ─── JV custom icons — inline alignment helpers ─────────────────────────── */ .jv-icon { display: inline-flex !important; align-items: center; justify-content: center; vertical-align: -2px; line-height: 0; } .jv-icon .jv-svg-icon { display: block; } /* Icons inside labels/buttons must NOT block click events — otherwise a click on the icon doesn't open the file picker (resume upload broke). */ label .jv-icon, button .jv-icon, .upload-zone .jv-icon, .upload-ico .jv-icon { pointer-events: none; } /* Spacing utility — icon-text gap inside buttons / labels */ button .jv-icon + *, a .jv-icon + *, .dash-tab .jv-icon + *, .btn .jv-icon + *, .jv-btn .jv-icon + *, .btn-plan .jv-icon + * { margin-left: 4px; } /* Tab icon sizing in the dashboard */ .dash-tab .jv-icon .jv-svg-icon { width: 14px; height: 14px; } /* Card meta icons (calendar, map-pin) — keep small and muted */ .card-meta .jv-icon .jv-svg-icon, .card-meta span .jv-svg-icon { width: 12px; height: 12px; } /* Theme toggle button */ .jv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; transition: all var(--transition); } .jv-theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } .jv-theme-toggle .icon-sun { display: none; } .jv-theme-toggle .icon-moon { display: inline-flex; } [data-theme="dark"] .jv-theme-toggle .icon-sun { display: inline-flex; } [data-theme="dark"] .jv-theme-toggle .icon-moon { display: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); line-height: 1.25; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; } /* ========================================================================== JV Navbar — visually matches jobvisitors.com header ========================================================================== */ .jv-navbar { position: sticky; top: 0; z-index: 50; height: 72px; background: linear-gradient(180deg, rgba(244, 247, 250, 0.96), rgba(244, 247, 250, 0.85)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; } .jv-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .jv-navbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-primary); text-decoration: none; letter-spacing: -0.02em; } .jv-navbar__brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .jv-navbar__brand-mark svg { width: 22px; height: 22px; stroke: #fff; } .jv-navbar__brand-text { display: inline-block; } .jv-navbar__brand-sub { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); margin-left: 4px; } .jv-navbar__nav { display: none; list-style: none; align-items: center; gap: 28px; margin: 0; } .jv-navbar__nav a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color var(--transition); } .jv-navbar__nav a:hover, .jv-navbar__nav a.is-active { color: var(--color-primary); } .jv-navbar__actions { display: flex; align-items: center; gap: 12px; } .jv-credit-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--color-primary-soft); color: var(--color-primary); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; } .jv-credit-chip .star { color: var(--color-secondary); } .jv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; border: 1px solid transparent; white-space: nowrap; } .jv-btn--primary { background: var(--color-primary); color: #fff; } .jv-btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-accent); color: #fff; } .jv-btn--secondary { background: var(--color-secondary); color: #fff; } .jv-btn--secondary:hover { background: var(--color-secondary-hover); color: #fff; } .jv-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border); } .jv-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } .jv-btn--lg { padding: 14px 24px; font-size: 0.95rem; border-radius: var(--radius-md); } .jv-navbar__toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: transparent; border: none; } .jv-navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--text-primary); transition: all var(--transition); } @media (min-width: 900px) { .jv-navbar__nav { display: flex; } .jv-navbar__toggle { display: none; } } /* ========================================================================== JV Footer ========================================================================== */ .jv-footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 64px 0 32px; margin-top: auto; } .jv-footer__cta { text-align: center; max-width: 560px; margin: 0 auto 56px; } .jv-footer__cta h2 { font-size: 1.875rem; margin-bottom: 12px; letter-spacing: -0.02em; } .jv-footer__cta p { color: var(--text-secondary); margin-bottom: 24px; } .jv-footer__cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .jv-footer__divider { height: 1px; background: var(--border); margin-bottom: 48px; } .jv-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 48px; } @media (min-width: 720px) { .jv-footer__grid { grid-template-columns: repeat(4, 1fr); } } .jv-footer__col h4 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); } .jv-footer__col a { display: block; font-size: 0.875rem; color: var(--text-secondary); text-decoration: none; margin-bottom: 10px; transition: color var(--transition); } .jv-footer__col a:hover { color: var(--color-primary); } .jv-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); } .jv-footer__brand { display: flex; align-items: center; gap: 12px; } .jv-footer__brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .jv-footer__brand-mark svg { width: 18px; height: 18px; stroke: #fff; } .jv-footer__copy { color: var(--text-muted); font-size: 0.875rem; } .jv-footer__socials { display: flex; gap: 12px; } .jv-footer__socials a { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition); } .jv-footer__socials a:hover { background: var(--color-primary); color: #fff; } /* ========================================================================== Shared form elements ========================================================================== */ .jv-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: box-shadow var(--transition), transform var(--transition); } .jv-card:hover { box-shadow: var(--shadow-md); } .jv-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; transition: border-color var(--transition), box-shadow var(--transition); background: var(--bg-secondary); color: var(--text-primary); } .jv-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .jv-badge { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--color-primary-soft); color: var(--color-primary); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .jv-badge--warn { background: var(--color-secondary-soft); color: var(--color-secondary); } .jv-badge--success { background: var(--success-light); color: var(--success); } /* ========================================================================== Skip link (a11y) ========================================================================== */ .jv-skip-link { position: absolute; top: -60px; left: 16px; background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; transition: top var(--transition); } .jv-skip-link:focus { top: 16px; } /* ========================================================================== Toast ========================================================================== */ .jv-toast { position: fixed; top: 90px; right: 24px; background: var(--text-primary); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); font-size: 0.875rem; z-index: 200; opacity: 0; transform: translateY(-10px); transition: all var(--transition); pointer-events: none; box-shadow: var(--shadow-lg); } .jv-toast.show { opacity: 1; transform: translateY(0); }