/* ═════════════════════════════════════════════════════════════════ JOBNEST AI — DUAL THEME SYSTEM Loads AFTER each page's inline :root block. - Default (no data-theme or data-theme="dark"): keeps existing dark palette - data-theme="light" on : light burgundy + pale blue palette Brand burgundy CTAs are CONSISTENT across both themes. ═════════════════════════════════════════════════════════════════ */ /* ─── Add brand burgundy + soft blue tokens to both modes ─── */ :root{ --burg: #9F1239; --burg-deep: #7A0F2E; --burg-rich: #8C1235; --burg-dark: #6A0D28; --burg-2: #BE123C; --soft-blue: #3B82F6; --soft-blue-l: #60A5FA; --pale-blue: #BFDBFE; --grad-cta: linear-gradient(135deg, #9F1239, #BE123C); --grad-burg: linear-gradient(135deg, #6A0D28, #9F1239); } /* Smooth transitions on theme switch */ html, body, .nav, nav, header, footer, .card, .btn, .fi, .fta, .fsel, .mb, .mc, .toast, .alert, [class*="card"], [class*="bar"], [class*="modal"]{ transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ═════════════════════════════════════════════════════════════════ LIGHT THEME — overrides every standard variable used app-wide ═════════════════════════════════════════════════════════════════ */ html[data-theme="light"]{ /* Backgrounds — pale blue family */ --navy: #E6EEF6; /* Pale Blue (main bg) */ --navy2: #DDE7F2; /* Light Blue Gradient */ --navy3: #F4F6F9; /* Soft Cool Gray */ --navy4: #FFFFFF; /* Text */ --text: #1F2A37; /* Primary Text */ --text2: #6B7280; /* Secondary Text */ --muted: #9CA3AF; /* Light Text (subtle) */ /* Borders & cards */ --border: #E5E7EB; /* Card Border / Soft Divider */ --border2: #D1D5DB; --card: #FFFFFF; --card2: #F9FAFB; --card3: #F4F6F9; /* Accents — burgundy is primary, soft blue secondary */ --blue: #9F1239; /* CTA Burgundy Button */ --blue2: #BE123C; /* CTA Gradient End */ --blue3: #FCA5A5; /* Light Red Accent */ --cyan: #3B82F6; /* Soft Blue */ --cyan2: #60A5FA; /* Light Blue */ --gold: #B45309; /* darker gold for contrast on light */ --green: #22C55E; /* Applied / Enabled green */ --green2: #86EFAC; /* Light Green */ --purple: #8B5CF6; --red: #DC2626; --red2: #EF4444; --orange: #EA580C; /* Gradients flipped */ --grad1: linear-gradient(135deg, #9F1239, #BE123C); --grad2: linear-gradient(135deg, #8B5CF6, #3B82F6); --grad3: linear-gradient(135deg, #B45309, #EA580C); /* Subtle effects */ --glow-blue: rgba(59,130,246,0.15); --shadow-tint: rgba(0,0,0,0.05); } /* ─── Light mode shadow softening — uses --shadow-tint + --glow-blue per spec ─── */ html[data-theme="light"] .card, html[data-theme="light"] .mb, html[data-theme="light"] [class*="card"]:not([class*="card2"]):not([class*="card3"]){ box-shadow: 0 4px 16px var(--shadow-tint), 0 1px 3px var(--shadow-tint), 0 0 0 1px rgba(229,231,235,.5); } html[data-theme="light"] .toast{ background: #FFFFFF; color: var(--text); box-shadow: 0 12px 40px var(--glow-blue); } /* ─── Light mode nav (override darker default) ─── */ html[data-theme="light"] #nav, html[data-theme="light"] .nav, html[data-theme="light"] #landing-nav{ background: rgba(230,238,246,.85) !important; border-bottom: 1px solid var(--border); } /* Modal backdrop in light mode shouldn't be pure black */ html[data-theme="light"] .mo{ background: rgba(31,42,55,.55); } /* Form fields in light mode */ html[data-theme="light"] .fi, html[data-theme="light"] .fta, html[data-theme="light"] .fsel{ background: #FFFFFF; border-color: var(--border); color: var(--text); } html[data-theme="light"] .fi:focus, html[data-theme="light"] .fta:focus, html[data-theme="light"] .fsel:focus{ border-color: var(--burg); box-shadow: 0 0 0 3px rgba(159,18,57,.12); } html[data-theme="light"] .fi::placeholder, html[data-theme="light"] .fta::placeholder{ color: var(--muted) } /* Scrollbar in light mode */ html[data-theme="light"] ::-webkit-scrollbar-track{ background: #F4F6F9 } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background: #D1D5DB } /* ═════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (appended to nav by theme.js) ═════════════════════════════════════════════════════════════════ */ .theme-toggle{ width:38px;height:38px;border-radius:50%; background:var(--card);border:1px solid var(--border); cursor:pointer;display:inline-flex;align-items:center;justify-content:center; color:var(--text);transition:all .25s, transform .35s; position:relative;overflow:hidden;flex-shrink:0; font-family:inherit;padding:0; } .theme-toggle:hover{ border-color:var(--burg); color:var(--burg); transform:rotate(15deg); box-shadow:0 4px 14px rgba(159,18,57,.18); } .theme-toggle svg{ width:17px;height:17px; position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); transition:opacity .3s, transform .3s; } html[data-theme="dark"] .theme-toggle .sun, :root:not(html[data-theme="light"]) .theme-toggle .sun{ opacity:1 } html[data-theme="dark"] .theme-toggle .moon, :root:not(html[data-theme="light"]) .theme-toggle .moon{ opacity:0; transform:translate(-50%,-50%) rotate(180deg); } html[data-theme="light"] .theme-toggle .sun{ opacity:0; transform:translate(-50%,-50%) rotate(180deg); } html[data-theme="light"] .theme-toggle .moon{ opacity:1 } /* ═════════════════════════════════════════════════════════════════ LIGHT MODE FINE-TUNES FOR LANDING PAGE COMPONENTS ═════════════════════════════════════════════════════════════════ */ /* Hero orbs that look great glowing on dark, soften on light */ html[data-theme="light"] .hero-orb{ opacity:.35 !important } html[data-theme="light"] .hero-grid{ opacity:.4 !important } /* Burgundy CTA for primary buttons in landing page */ html[data-theme="light"] .hero-cta, html[data-theme="light"] .btn-p{ background: var(--grad-cta) !important; box-shadow: 0 8px 24px rgba(159,18,57,.3) !important; color: #FFFFFF !important; } html[data-theme="light"] .hero-cta:hover, html[data-theme="light"] .btn-p:hover{ box-shadow: 0 12px 32px rgba(159,18,57,.4) !important; transform: translateY(-2px); } /* Section dividers softer on light */ html[data-theme="light"] .section-divider{ border-color: var(--border) !important } /* Marquee bg in light */ html[data-theme="light"] .sources-bar{ background: var(--navy3) !important; } html[data-theme="light"] .marquee-logo{ color: var(--text2); } html[data-theme="light"] .marquee-logo img{ background: #FFFFFF; padding: 3px; border-radius: 6px; box-shadow: 0 2px 6px rgba(31,42,55,.06); } /* Pricing cards in light */ html[data-theme="light"] .price-card{ background: #FFFFFF; border-color: var(--border); } html[data-theme="light"] .price-popular-badge{ background: var(--grad-cta) !important; } /* FAQ in light */ html[data-theme="light"] .faq-item{ background: #FFFFFF } html[data-theme="light"] .faq-item:hover{ background: #F9FAFB } /* Marquee logo chips — dark uses rgba(255,255,255,*) which disappears on light bg */ html[data-theme="light"] .marquee-logo{ background: #FFFFFF; border-color: var(--border); color: var(--text); box-shadow: 0 1px 2px rgba(31,42,55,.04); } html[data-theme="light"] .marquee-logo:hover{ background: #F9FAFB; border-color: var(--burg); } /* "Already have an account →" ghost button on landing CTA */ html[data-theme="light"] .hero-signin{ border-color: var(--border2); color: var(--text); } html[data-theme="light"] .hero-signin:hover{ border-color: var(--burg); color: var(--burg); } /* App-nav and modal-close hover backgrounds (dark uses rgba(255,255,255,*)) */ html[data-theme="light"] .nb:hover, html[data-theme="light"] .mc:hover{ background: rgba(31,42,55,.06); color: var(--text); } /* Daily-limit modal (built inline with hardcoded hex) — make text readable on light bg */ html[data-theme="light"] #limit-modal > div{ background: #FFFFFF !important; color: var(--text) !important; border: 1px solid var(--border); } html[data-theme="light"] #limit-modal div[style*="color:#fff"]{ color: var(--text) !important; } html[data-theme="light"] #limit-modal div[style*="color:#8899aa"], html[data-theme="light"] #limit-modal button[style*="color:#8899aa"]{ color: var(--text2) !important; } html[data-theme="light"] #limit-modal button[style*="rgba(255,255,255,.15)"]{ border-color: var(--border2) !important; } /* Demo reel caption — hardcoded dark gradient overlay needs flipping for light cards */ html[data-theme="light"] .demo-caption{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.95) 50%) !important; border-top-color: var(--border); } /* Generic muted badge background — rgba(255,255,255,.05) is invisible on light bg */ html[data-theme="light"] .b-muted{ background: rgba(31,42,55,.05); } /* Pricing toggle background contrast in light mode */ html[data-theme="light"] .price-toggle{ background: var(--card3); border-color: var(--border); } html[data-theme="light"] .price-toggle-dot{ background: var(--text2) } /* Hero pill (old hero) — cyan tinted background, swap to burgundy in light */ html[data-theme="light"] .hero-pill{ background: rgba(159,18,57,.08); border-color: rgba(159,18,57,.25); color: var(--burg); } /* Hero card badge — dark navy bg with cyan border */ html[data-theme="light"] .hc-badge{ background: var(--card); border-color: var(--border); box-shadow: 0 8px 24px rgba(31,42,55,.10); } /* Section divider gradient is cyan/blue — soften in light mode */ html[data-theme="light"] .section-divider{ background: linear-gradient(90deg, transparent, rgba(159,18,57,.18), rgba(59,130,246,.18), transparent) !important; } /* Form select chevron icon (SVG fill is hardcoded dark muted color) */ html[data-theme="light"] .fsel{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 10px; padding-right: 32px; } /* ═════════════════════════════════════════════════════════════════ PALETTE LOCK — burgundy headings, soft blue glows, white cards ═════════════════════════════════════════════════════════════════ */ /* HEADINGS use Deep Burgundy #7A0F2E */ html[data-theme="light"] .section-h2, html[data-theme="light"] .cta-h2, html[data-theme="light"] .hero-h1, html[data-theme="light"] .th-h1{ color: var(--burg-deep); /* #7A0F2E */ } /* BOLD ACCENTS use Rich Burgundy #8C1235 */ html[data-theme="light"] .feat-title, html[data-theme="light"] .step-title, html[data-theme="light"] .vp-title, html[data-theme="light"] .price-num, html[data-theme="light"] .testi-name, html[data-theme="light"] .stat-num{ color: var(--burg-rich); /* #8C1235 */ } /* UI HIGHLIGHTS / focus rings / active states use Dark Wine #6A0D28 */ html[data-theme="light"] .fi:focus, html[data-theme="light"] .fta:focus, html[data-theme="light"] .fsel:focus{ border-color: var(--burg-dark) !important; /* #6A0D28 */ box-shadow: 0 0 0 3px rgba(106,13,40,.15) !important; } html[data-theme="light"] .nb.on, html[data-theme="light"] .lnav-link.active{ color: var(--burg-dark); } /* CTA buttons use #9F1239 → #BE123C gradient (per spec) */ html[data-theme="light"] .hero-cta, html[data-theme="light"] .btn-p, html[data-theme="light"] .th-cta{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; color: #FFFFFF !important; box-shadow: 0 8px 24px rgba(159,18,57,.30), 0 0 0 1px rgba(159,18,57,.10) !important; } html[data-theme="light"] .hero-cta:hover, html[data-theme="light"] .btn-p:hover, html[data-theme="light"] .th-cta:hover{ box-shadow: 0 12px 32px rgba(159,18,57,.40) !important; transform: translateY(-2px); } /* Soft Glow utility — applies the spec'd rgba(59,130,246,.15) blue glow */ html[data-theme="light"] .feat-card:hover, html[data-theme="light"] .step-card:hover, html[data-theme="light"] .vp-card:hover, html[data-theme="light"] .testimonial-card:hover{ box-shadow: 0 12px 36px var(--glow-blue), 0 2px 6px var(--shadow-tint); border-color: var(--pale-blue); } /* Soft blue glow under hero card stack and pricing cards */ html[data-theme="light"] .hc{ background: #FFFFFF; border-color: var(--border); box-shadow: 0 12px 36px rgba(59,130,246,0.15), 0 2px 6px rgba(0,0,0,0.05); } html[data-theme="light"] .price-card{ box-shadow: 0 8px 28px rgba(59,130,246,0.10), 0 2px 6px rgba(0,0,0,0.04); } /* CTA section orbs — drastically softened (were creating dirty burgundy smudges on pale bg) */ html[data-theme="light"] .cta-orb-1{ background: #BFDBFE; opacity: .35 } html[data-theme="light"] .cta-orb-2{ background: #FCA5A5; opacity: .15 } /* Hero orbs (older hero section) — same smudge fix */ html[data-theme="light"] .hero-orb-1{ background: #BFDBFE; opacity: .25 !important } html[data-theme="light"] .hero-orb-2{ background: #BFDBFE; opacity: .20 !important } html[data-theme="light"] .hero-orb-3{ background: #FCA5A5; opacity: .10 !important } /* Three.js hero match-card avatar pill — keep white text on burgundy bg */ html[data-theme="light"] .th-match-card .th-av{ background: var(--grad-cta); } /* Stats bar should use the secondary pale-blue gradient bg, not white */ html[data-theme="light"] .stats-bar{ background: var(--navy2); border-color: var(--border); } /* Sources marquee bar full-width softer pale-blue */ html[data-theme="light"] .sources-bar{ background: var(--navy3) !important; border-color: var(--border); } /* Green status pills (Applied / online dots) refresh to brighter green */ html[data-theme="light"] .b-green, html[data-theme="light"] .btn-success, html[data-theme="light"] .mp-h{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.30); color: #16A34A; } /* ═════════════════════════════════════════════════════════════════ LIGHT MODE BUG FIXES (from user QA pass) ═════════════════════════════════════════════════════════════════ */ /* Match feed cards being clipped behind 3D globe — push above canvas */ html[data-theme="light"] .th-match-feed{ z-index: 10 !important } html[data-theme="light"] .th-hud{ z-index: 10 !important } /* Marquee logo text was too faint — boost contrast and weight */ html[data-theme="light"] .marquee-logo{ color: var(--text); opacity: 1; font-weight: 700; } html[data-theme="light"] .marquee-logo:hover{ color: var(--burg); } /* Stats bar — give it a clean white card look instead of faded pale-blue */ html[data-theme="light"] .stats-bar{ background: #FFFFFF; border-color: var(--border); } html[data-theme="light"] .stat-num{ /* default uses --grad1 burgundy; brighten for visibility */ filter: drop-shadow(0 1px 2px rgba(159,18,57,.10)); } html[data-theme="light"] .stat-div{ background: var(--border); opacity: .6; } /* Feature/value-prop icon backgrounds — give all variants a soft pale-blue look */ html[data-theme="light"] .vp-blue{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); } html[data-theme="light"] .vp-cyan{ background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.25); } html[data-theme="light"] .vp-gold{ background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.20); } html[data-theme="light"] .vp-purple{ background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.20); } html[data-theme="light"] .vp-green{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); } /* Force emoji icons to render as text (Windows Segoe UI Emoji fallback) */ html[data-theme="light"] .vp-icon-wrap span, html[data-theme="light"] .feat-icon, html[data-theme="light"] .step-icon{ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji, sans-serif; } /* Pricing section "popular" card had a stray rose outline from rgba(240,180,41,.35) gold border bleed — fix */ html[data-theme="light"] .price-card-pro{ background: #FFFFFF; border-color: rgba(180,83,9,.35); box-shadow: 0 0 0 1px rgba(180,83,9,.10), 0 12px 36px rgba(59,130,246,.10); } html[data-theme="light"] .price-card-rec{ background: #FFFFFF; border-color: rgba(139,92,246,.30); } /* Demo reel chrome / dots row — light card pale gray */ html[data-theme="light"] .demo-chrome, html[data-theme="light"] .demo-dots, html[data-theme="light"] .demo-stage{ background: var(--card2); border-color: var(--border); } /* Section/CTA backgrounds — make sure transition is unified pale-blue */ html[data-theme="light"] .cta-sec{ background: var(--navy) } html[data-theme="light"] .three-hero{ background: var(--navy) } /* ═════════════════════════════════════════════════════════════════ FORCE-OVERRIDE LAYER — catches hardcoded dark values across pages These !important rules guarantee a clean light-mode look on EVERY page. ═════════════════════════════════════════════════════════════════ */ /* Body — pale blue regardless of inline page styles */ html[data-theme="light"] body{ background: var(--navy) !important; color: var /* ═════════════════════════════════════════════════════════════════ ADMIN.HTML — uses unique vars (--bg, --bg2, --card2, --dim, --yellow) ═════════════════════════════════════════════════════════════════ */ html[data-theme="light"]{ --bg: #E6EEF6; --bg2: #DDE7F2; --card2: #F9FAFB; --dim: #D1D5DB; --yellow: #B45309; } /* Sidebar */ html[data-theme="light"] .sidebar{ background: #FFFFFF !important; border-right: 1px solid var(--border) !important; } html[data-theme="light"] .sb-logo, html[data-theme="light"] .sb-footer{ border-color: var(--border) !important } html[data-theme="light"] .sb-section{ color: var(--muted) } html[data-theme="light"] .sb-item{ color: var(--text2) } html[data-theme="light"] .sb-item:hover{ background: rgba(159,18,57,.06) !important; color: var(--burg-deep); } html[data-theme="light"] .sb-item.active{ background: linear-gradient(135deg, rgba(159,18,57,.08), rgba(190,18,60,.05)) !important; color: var(--burg-deep) !important; box-shadow: inset 3px 0 0 var(--burg) !important; } /* Topbar */ html[data-theme="light"] .topbar{ background: rgba(255,255,255,.85) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border) !important; } html[data-theme="light"] .topbar-title{ color: var(--text) } html[data-theme="light"] .topbar-right span{ color: var(--text2) } html[data-theme="light"] .range-select, html[data-theme="light"] .btn-sm{ background: #FFFFFF !important; border: 1px solid var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .btn-sm:hover{ background: rgba(159,18,57,.06) !important; border-color: var(--burg) !important; } html[data-theme="light"] .btn-cyan{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; border: none !important; color: #FFFFFF !important; box-shadow: 0 2px 12px rgba(159,18,57,.25) !important; } html[data-theme="light"] .btn-cyan:hover{ box-shadow: 0 4px 20px rgba(159,18,57,.40) !important; } /* KPI cards */ html[data-theme="light"] .kpi{ background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 14px rgba(31,42,55,.05); } html[data-theme="light"] .kpi:hover{ border-color: rgba(159,18,57,.30) !important; box-shadow: 0 12px 30px rgba(159,18,57,.10) !important; } html[data-theme="light"] .kpi-label{ color: var(--text2) } html[data-theme="light"] .kpi-val{ color: var(--text) } html[data-theme="light"] .kpi-val.gt{ background: linear-gradient(135deg, #9F1239, #BE123C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="light"] .kpi-sub{ color: var(--muted) } /* Chart cards */ html[data-theme="light"] .chart-card{ background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 14px rgba(31,42,55,.05); } html[data-theme="light"] .chart-card:hover{ border-color: rgba(159,18,57,.25) !important; } html[data-theme="light"] .chart-title{ color: var(--text) } /* Tables */ html[data-theme="light"] .tbl-card{ background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 14px rgba(31,42,55,.05); } html[data-theme="light"] .tbl-top{ border-bottom: 1px solid var(--border) !important } html[data-theme="light"] table th{ background: #F4F6F9 !important; color: var(--text2) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="light"] table td{ color: var(--text); border-color: var(--border) !important; } html[data-theme="light"] table tr:hover{ background: rgba(159,18,57,.03) !important } /* Data source pills (Firebase / GA / Both) */ html[data-theme="light"] .ds-fb{ background: rgba(234,88,12,.10); color: #C2410C } html[data-theme="light"] .ds-ga{ background: rgba(59,130,246,.10); color: #3B82F6 } html[data-theme="light"] .ds-both{ background: rgba(139,92,246,.10); color: #7C3AED } /* Selection + scrollbar in light admin */ html[data-theme="light"] ::selection{ background: rgba(159,18,57,.20) } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background: rgba(159,18,57,.20) } /* ═════════════════════════════════════════════════════════════════ MOBILE LINKEDIN-STYLE NAV — overrides for light theme (mobile-linkedin.css uses all-hardcoded dark colors; these flip them) ═════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* Top bar */ html[data-theme="light"] .jnl-topbar{ background: rgba(255,255,255,.96) !important; border-bottom: 1px solid #E5E7EB !important; } html[data-theme="light"] .jnl-avatar{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; color: #fff !important; } html[data-theme="light"] .jnl-search input{ background: #F4F6F9 !important; border: 1px solid #E5E7EB !important; color: #1F2A37 !important; } html[data-theme="light"] .jnl-search input::placeholder{ color: #9CA3AF !important; } html[data-theme="light"] .jnl-search input:focus{ border-color: #9F1239 !important; box-shadow: 0 0 0 3px rgba(159,18,57,.10); } html[data-theme="light"] .jnl-icon-btn{ color: #6B7280 !important; } html[data-theme="light"] .jnl-icon-btn:active{ background: #F4F6F9 !important; color: #1F2A37 !important; } html[data-theme="light"] .jnl-icon-badge{ background: #DC2626 !important; color: #fff !important; } /* Bottom tab nav */ html[data-theme="light"] .jnl-bottom-nav{ background: rgba(255,255,255,.98) !important; border-top: 1px solid #E5E7EB !important; } html[data-theme="light"] .jnl-bn-item{ color: #6B7280 !important; } html[data-theme="light"] .jnl-bn-item:active{ color: #1F2A37 !important; } html[data-theme="light"] .jnl-bn-item.active{ color: #9F1239 !important; } html[data-theme="light"] .jnl-bn-item.active::before{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; } html[data-theme="light"] .jnl-bn-badge{ background: #DC2626 !important; } /* Hamburger / drawer */ html[data-theme="light"] .jnl-drawer-backdrop{ background: rgba(31,42,55,.55) !important; } html[data-theme="light"] .jnl-drawer{ background: #FFFFFF !important; border-right: 1px solid #E5E7EB !important; } html[data-theme="light"] .jnl-drawer-head{ border-bottom: 1px solid #E5E7EB !important; } html[data-theme="light"] .jnl-drawer-avatar-big{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; color: #fff !important; } html[data-theme="light"] .jnl-drawer-name{ color: #1F2A37 !important; } html[data-theme="light"] .jnl-drawer-sub{ color: #6B7280 !important; } html[data-theme="light"] .jnl-drawer-link{ color: #1F2A37 !important; } html[data-theme="light"] .jnl-drawer-link:active{ background: #F4F6F9 !important; color: #9F1239 !important; } html[data-theme="light"] .jnl-drawer-section-title{ color: #9CA3AF !important; } } /* ═════════════════════════════════════════════════════════════════ PROFILE & FEED COVER BANNERS — light mode "Sunset Fade" Burgundy bridging into pale blue, picks up brand color → bg color ═════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .prof-cover{ background: linear-gradient(135deg, #9F1239 0%, #BE123C 25%, #FCA5A5 60%, #BFDBFE 100%) !important; } html[data-theme="light"] .pmc-cover{ background: linear-gradient(135deg, #9F1239 0%, #BE123C 30%, #FCA5A5 70%, #BFDBFE 100%) !important; } /* Avatar on Profile cover should use deep burgundy in light to pop on the gradient */ html[data-theme="light"] .prof-cover + * .av, html[data-theme="light"] .prof-cover ~ * .av-xl, html[data-theme="light"] .prof-avatar{ background: #FFFFFF !important; color: #7A0F2E !important; border: 3px solid #FFFFFF !important; box-shadow: 0 4px 14px rgba(159,18,57,.20) !important; } /* "Edit Cover" pill on profile — make it readable on the new gradient */ html[data-theme="light"] .prof-cover .btn, html[data-theme="light"] .prof-cover button{ background: rgba(255,255,255,.92) !important; color: #7A0F2E !important; border: 1px solid rgba(255,255,255,.6) !important; backdrop-filter: blur(8px); } html[data-theme="light"] .prof-cover .btn:hover, html[data-theme="light"] .prof-cover button:hover{ background: #FFFFFF !important; color: #6A0D28 !important; } /* ═════════════════════════════════════════════════════════════════ JOBS PAGE — match pills, score badges, status indicators Fix: keep match scores in clean traffic-light colors (red/gold/green) so they don't compete with the burgundy CTA / brand color. ═════════════════════════════════════════════════════════════════ */ /* Match pills (.mp-h high, .mp-m medium, .mp-l low) — light mode */ html[data-theme="light"] .mp-h{ background: #ECFDF5 !important; border: 1px solid #A7F3D0 !important; color: #059669 !important; } html[data-theme="light"] .mp-m{ background: #FEF3C7 !important; border: 1px solid #FCD34D !important; color: #B45309 !important; } html[data-theme="light"] .mp-l{ background: #FEE2E2 !important; border: 1px solid #FCA5A5 !important; color: #DC2626 !important; } /* Score badges that use the same traffic-light pattern */ html[data-theme="light"] .b-green, html[data-theme="light"] .btn-success{ background: #ECFDF5 !important; border-color: #A7F3D0 !important; color: #059669 !important; } html[data-theme="light"] .b-gold{ background: #FEF3C7 !important; border-color: #FCD34D !important; color: #B45309 !important; } html[data-theme="light"] .b-red, html[data-theme="light"] .btn-danger{ background: #FEE2E2 !important; border-color: #FCA5A5 !important; color: #DC2626 !important; } html[data-theme="light"] .b-blue{ background: #DBEAFE !important; border-color: #93C5FD !important; color: #1D4ED8 !important; } html[data-theme="light"] .b-cyan{ background: #CFFAFE !important; border-color: #67E8F9 !important; color: #0E7490 !important; } html[data-theme="light"] .b-purple{ background: #EDE9FE !important; border-color: #C4B5FD !important; color: #6D28D9 !important; } html[data-theme="light"] .b-muted{ background: #F4F6F9 !important; border-color: #E5E7EB !important; color: #6B7280 !important; } /* "LIVE" pill — keep green */ html[data-theme="light"] .live-pill, html[data-theme="light"] [class*="live"]{ background: #ECFDF5 !important; border: 1px solid #A7F3D0 !important; color: #059669 !important; } /* "Competitive" / urgency labels — soft amber instead of burgundy */ html[data-theme="light"] .competitive, html[data-theme="light"] .urgency, html[data-theme="light"] .urgency-text{ color: #B45309 !important; } /* Job card base — light bg, no divider line */ html[data-theme="light"] .jcard{ background: #FFFFFF; border-bottom: none !important; } html[data-theme="light"] .jcard + .jcard{ margin-top: 4px; } /* Job card LEFT-edge accent (active job indicator) — burgundy in light mode. Includes the .sel class actually emitted by jobs.html (other variants kept for any other pages that may reuse this stylesheet). */ html[data-theme="light"] .jcard.sel, html[data-them /* ═════════════════════════════════════════════════════════════════ ADMIN.HTML — DARK MODE LOCK Forces admin cards/sidebar/topbar back to dark navy when NOT in light. Fixes a bug where cards appeared white-on-dark during theme transitions or when browser had a stale cached theme.css. ═════════════════════════════════════════════════════════════════ */ html:not([data-theme="light"]) .sidebar{ background: #081829 !important; border-right: 1px solid rgba(0,212,255,.08) !important; } html:not([data-theme="light"]) .topbar{ background: rgba(8,24,41,.85) !important; border-bottom: 1px solid rgba(0,212,255,.08) !important; } html:not([data-theme="light"]) .kpi, html:not([data-theme="light"]) .chart-card, html:not([data-theme="light"]) .tbl-card{ background: #0d1f3c !important; border: 1px solid rgba(0,212,255,.08) !important; color: #e8edf4 !important; box-shadow: none !important; } html:not([data-theme="light"]) .kpi-label, html:not([data-theme="light"]) .kpi-sub, html:not([data-theme="light"]) .topbar-right span{ color: #6b7a8d !important; } html:not([data-theme="light"]) .kpi-val, html:not([data-theme="light"]) .topbar-title, html:not([data-theme="light"]) .chart-title{ color: #e8edf4 !important; } html:not([data-theme="light"]) .range-select, html:not([data-theme="light"]) .btn-sm{ background: #0d1f3c !important; border: 1px solid rgba(0,212,255,.08) !important; color: #e8edf4 !important; } html:not([data-theme="light"]) .btn-cyan{ background: linear-gradient(135deg, #1a6ef5, #00d4ff) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 12px rgba(0,212,255,.2) !important; } html:not([data-theme="light"]) table th{ background: #081829 !important; color: #6b7a8d !important; border-bottom: 1px solid rgba(0,212,255,.08) !important; } html:not([data-theme="light"]) table td{ color: #e8edf4 !important; border-color: rgba(0,212,255,.05) !important; } html:not([data-theme="light"]) table tr:hover{ background: rgba(0,212,255,.04) !important; } html:not([data-theme="light"]) .sb-item{ color: #6b7a8d !important } html:not([data-theme="light"]) .sb-item:hover{ background: rgba(0,212,255,.04) !important; color: #e8edf4 !important; } html:not([data-theme="light"]) .sb-item.active{ background: linear-gradient(135deg, rgba(0 /* ═════════════════════════════════════════════════════════════════ MOBILE — COMPREHENSIVE LIGHT MODE FIX (≤768px) Catches every common mobile element that might have leaked through with hardcoded dark colors. ═════════════════════════════════════════════════════════════════ */ @media (max-width: 768px){ /* Body / page-wrapper backgrounds — force pale blue */ html[data-theme="light"] body, html[data-theme="light"] #app-wrap, html[data-theme="light"] #page-app, html[data-theme="light"] .feed-wrap, html[data-theme="light"] .jobs-wrap, html[data-theme="light"] .prof-wrap, html[data-theme="light"] .coach-wrap, html[data-theme="light"] .chat-wrap, html[data-theme="light"] .rec-wrap, html[data-theme="light"] .apps-wrap, html[data-theme="light"] .notif-wrap{ background: #E6EEF6 !important; color: #1F2A37 !important; } /* Feed posts (.fp / .feed-post / .post-card) — white cards */ html[data-theme="light"] .fp, html[data-theme="light"] .feed-post, html[data-theme="light"] .post-card, html[data-theme="light"] .ni{ background: #FFFFFF !important; border: 1px solid #E5E7EB !important; color: #1F2A37 !important; box-shadow: 0 2px 8px rgba(31,42,55,.04); } /* Chat messages */ html[data-theme="light"] .chat-msg, html[data-theme="light"] .msg-bubble{ color: #1F2A37; } html[data-theme="light"] .chat-msg.recv, html[data-theme="light"] .msg-bubble.recv, html[data-theme="light"] .msg-in{ background: #F4F6F9 !important; color: #1F2A37 !important; } html[data-theme="light"] .chat-msg.sent, html[data-theme="light"] .msg-bubble.sent, html[data-theme="light"] .msg-out{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; color: #FFFFFF !important; } /* Chat input bar — float above bottom nav with light bg */ html[data-theme="light"] .chat-input-bar, html[data-theme="light"] .ji-fab, html[data-theme="light"] .floating-cta, html[data-theme="light"] .sticky-apply{ background: #FFFFFF !important; border-top: 1px solid #E5E7EB !important; color: #1F2A37 !important; box-shadow: 0 -4px 16px rgba(31,42,55,.06); } /* FAB / floating action buttons → burgundy gradient */ html[data-theme="light"] .fab, html[data-theme="light"] [class*="fab"], html[data-theme="light"] .ji-fab > button{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; color: #FFFFFF !important; box-shadow: 0 8px 24px rgba(159,18,57,.3) !important; } /* Jobcard / fcard list items */ html[data-theme="light"] .jcard, html[data-theme="light"] .fcard, html[data-theme="light"] .fc{ background: #FFFFFF !important; border: 1px solid #E5E7EB !important; color: #1F2A37 !important; } html[data-theme="light"] .jcard:active, html[data-theme="light"] .jcard.active{ background: rgba(159,18,57,.05) !important; border-color: #9F1239 !important; } /* Tab pills (notif filter tabs, app tabs) */ html[data-theme="light"] .tpill, html[data-theme="light"] .chip{ background: #FFFFFF !important; border: 1px solid #E5E7EB !important; color: #6B7280 !important; } html[data-theme="light"] .tpill.active, html[data-theme="light"] .tpill.on, html[data-theme="light"] .chip.active, html[data-theme="light"] .chip.on{ background: linear-gradient(135deg, #9F1239, #BE123C) !important; border-color: transparent !important; color: #FFFFFF !important; } /* Any "section header" / sub-page header on mobile */ html[data-theme="light"] .page-header, html[data-theme="light"] .sub-header, html[data-theme="light"] [class*="-header"]:not(nav):not(header){ background: rgba(255,255,255,.85) !important; color: #1F2A37 !important; border-bottom: 1px solid #E5E7EB !important; } /* Empty states & loading states — softer on light */ html[data-theme="light"] .empty-state, html[data-theme="light"] .no-sel, html[data-theme="light"] .loading{ color: #6B7280 !important; } html[data-theme="light"] .empty-state .icon, html[data-theme="light"] .empty-state svg{ color: #9CA3AF !important; } }