/* ═══════════════════════════════════════════════════════════════ PRO THEME OVERLAY Goal: more refined, less "toy". Loaded last, overrides visual treatments without changing structure/functionality. Principles: - Restrained palette (neutrals + single accent) - Sans-serif for UI chrome; mono only for raw numeric data - 1px hairline borders, subtle shadows - Consistent 4/8/12/16 spacing rhythm - Readable type hierarchy over ornamental caps ═══════════════════════════════════════════════════════════════ */ /* ─── Palette refinement ──────────────────────────────────── */ /* Scoped to [data-theme="dark"] only — NOT :root — because :root matches regardless of data-theme, which would override base.css's black/blue/golden theme vars. index.html sets data-theme="dark" by default so these refinements still apply on first load. */ [data-theme="dark"] { --accent: #e0a62e; --a2: #4c8cff; --green: #3ba55d; --red: #e45a52; --orange: #d98b23; --purple: #a36efc; --teal: #2fb7a1; --pink: #d66ba5; --text: #eaeaea; --text2: #9c9c9c; --text3: #6a6a6a; --line: #232323; --line2: #2d2d2d; --bg0: #0d0d0d; --bg1: #141414; --bg2: #1a1a1a; --bg3: #212121; --radius: 4px; --radius-lg: 6px; --shadow: none; --nav-bg: #0b0b0b; --sidebar-bg: #0b0b0b; --card-bg: #141414; } /* ─── Typography base ─────────────────────────────────────── */ body { font-family: var(--sans); font-feature-settings: "ss01", "ss02", "cv11", "tnum"; letter-spacing: -0.005em; line-height: 1.55; } /* ─── Nav: cleaner brand ──────────────────────────────────── */ .nav { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--nav-bg); gap: 10px; } .layout { grid-template-rows: 48px 1fr; } .brand { gap: 9px; } .bdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: none; } .bname { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .bsub { display: none; } .vsep { height: 20px; opacity: .6; margin: 0 6px; } /* ─── Tabs: clean horizontal rail ─────────────────────────── */ .tabs { gap: 0; } .tab { height: 48px; padding: 0 14px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--text3); text-transform: none; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .tab:hover { color: var(--text2); } .tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .tc { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); background: var(--bg2); border: 1px solid var(--line); padding: 0 5px; border-radius: 999px; min-width: 18px; text-align: center; line-height: 16px; display: inline-block; } .tab.on .tc { color: var(--text); background: var(--bg3); border-color: var(--line2); } /* ─── Buttons: consistent system ──────────────────────────── */ .btn { height: 30px; padding: 0 12px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; border-radius: var(--radius); border: 1px solid var(--line2); background: transparent; color: var(--text2); transition: background .14s ease, color .14s ease, border-color .14s ease; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .btn:hover { background: var(--bg2); color: var(--text); border-color: var(--line2); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text2); } .btn-ghost:hover { background: var(--bg2); color: var(--text); border-color: var(--line2); } .btn-ghost:disabled { opacity: .35; background: transparent !important; } .btn-subtle { background: transparent; border-color: var(--line2); color: var(--text2); } .btn-subtle:hover { background: var(--bg2); color: var(--text); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #121212; font-weight: 600; } .btn-primary:hover { background: #e7b347; border-color: #e7b347; color: #0e0e0e; } .btn-gold { /* keep existing alias but refine */ background: var(--accent); color: #121212; border: 1px solid var(--accent); font-weight: 600; } .btn-gold:hover { background: #e7b347; border-color: #e7b347; } .btn-stop { background: transparent; border: 1px solid rgba(228, 90, 82, .4); color: var(--red); } .btn-stop:hover { background: rgba(228, 90, 82, .1); } .btn-green { background: transparent; border: 1px solid var(--line2); color: var(--text2); } .btn-green:hover { background: var(--bg2); color: var(--text); } .nav-burger { height: 30px; padding: 0 10px; border: 1px solid var(--line2); color: var(--text2); border-radius: var(--radius); font-size: 14px; } .nav-burger:hover { background: var(--bg2); color: var(--text); } .theme-btn { height: 30px; padding: 0 12px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text2); background: transparent; } .theme-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--line2); } /* ─── Dropdown menu (Datos / Theme) ───────────────────────── */ .dmenu, .theme-menu { background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2); overflow: hidden; min-width: 180px; padding: 4px; } .dopt { padding: 7px 10px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text2); border-radius: 3px; transition: background .12s ease, color .12s ease; } .dopt:hover { background: var(--bg3); color: var(--text); } .dopt-hd { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px 4px; pointer-events: none; } .dopt-hd:hover { background: transparent; color: var(--text3); } .theme-opt { font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 7px 10px; color: var(--text2); border-radius: 3px; } .theme-opt:hover { background: var(--bg3); color: var(--text); } .theme-opt.active { color: var(--text); background: var(--bg3); } .theme-opt .tdot { width: 10px; height: 10px; border: 1px solid var(--line2); } /* ─── Stats bar: refined KPI row ──────────────────────────── */ .sbar { background: var(--bg1); border-bottom: 1px solid var(--line); padding: 0; } .sc { padding: 14px 20px; border-right: 1px solid var(--line); gap: 4px; } .sv { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } /* Neutralize the rainbow — keep all values in text color; only the Pipeline "primary CTA" stat can hold accent. */ .sv.gold, .sv.blue, .sv.green, .sv.orange, .sv.teal { color: var(--text); } #sc-pipeline .sv { color: var(--accent); } .sl { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); text-transform: none; letter-spacing: 0; } .sc-right { padding: 8px 16px; gap: 12px; } .status-ind { border: 1px solid var(--line2); padding: 3px 9px; font-family: var(--sans); font-size: 11px; font-weight: 500; } .tokbar { border: 1px solid var(--line2); padding: 5px 10px; gap: 6px; } .tok-lbl { font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--text3); letter-spacing: 0; } .tv { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 12px; } .tch { font-family: var(--sans); font-size: 10px; } .save-status { font-family: var(--sans); font-size: 10px; color: var(--text3); } /* ─── Sidebar blocks ──────────────────────────────────────── */ .sb { background: var(--sidebar-bg); } .sblk { padding: 14px 14px; } .stit { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text2); } .sa { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); } .sa:hover { color: var(--text); } .scfg, .api-box { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; } .cfgl { font-family: var(--sans); font-size: 12px; color: var(--text2); font-weight: 500; } .cfgi, .nin, .api-in, .exsrch, .sin, .settings-input, .kwi { font-family: var(--sans); font-size: 12px; font-weight: 500; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); } .cfgi-val { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; font-size: 12px; } /* Filter chips: unified neutral pill */ .fchip { font-family: var(--sans); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--line2); color: var(--text2); letter-spacing: 0; } .fchip:hover { background: var(--bg2); color: var(--text); } .fchip.on { background: rgba(224, 166, 46, .08); border-color: rgba(224, 166, 46, .4); color: var(--accent); } .fchip.on.rf { background: rgba(228, 90, 82, .08); border-color: rgba(228, 90, 82, .35); color: var(--red); } .kwsg { font-family: var(--sans); font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); } .kwr { border: 1px solid var(--line2); border-radius: var(--radius); } /* Metrics labels */ .mlbl { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); text-transform: none; letter-spacing: 0; } .mval { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text2); } /* ─── Toolbar ─────────────────────────────────────────────── */ .toolbar { background: var(--bg1); border-bottom: 1px solid var(--line); padding: 10px 16px; gap: 8px; } .sin { font-size: 13px; padding: 7px 12px 7px 30px; } .sico { font-size: 12px; color: var(--text3); } .pglbl, .sortlbl { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); letter-spacing: 0; text-transform: none; } .pgsel { font-family: var(--sans); font-size: 12px; color: var(--text); background: var(--bg2); border: 1px solid var(--line2); padding: 5px 8px; border-radius: var(--radius); } /* ─── Table ───────────────────────────────────────────────── */ thead tr { background: var(--bg1); border-bottom: 1px solid var(--line); } th { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--text3); text-transform: none; letter-spacing: 0; padding: 10px 12px; } th:hover { color: var(--text); } th.ths { color: var(--accent) !important; } td { padding: 9px 12px; font-size: 12px; color: var(--text); font-family: var(--sans); font-variant-numeric: tabular-nums; } tbody tr { border-bottom: 1px solid var(--line); } .chnm { font-size: 12px; font-weight: 500; } .kolnm { font-family: var(--sans); font-size: 11px; font-weight: 500; } /* Badges: flatter, softer */ .bdg { font-family: var(--sans); font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 3px; letter-spacing: 0; } /* ─── Empty state ─────────────────────────────────────────── */ .empty-icon { background: transparent; border: 1px dashed var(--line2); width: 56px; height: 56px; color: var(--text3); font-size: 20px; } .empty-t { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .empty-s { font-family: var(--sans); font-size: 13px; color: var(--text3); line-height: 1.65; max-width: 420px; } /* ─── Log bar ─────────────────────────────────────────────── */ .logbar { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text3); padding: 8px 16px; letter-spacing: 0; } .db-badge { font-family: var(--sans); font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 3px; background: transparent; border: 1px solid var(--line2); color: var(--text3); } /* ─── Side panel (CRM) ────────────────────────────────────── */ .panel { border-left: 1px solid var(--line); box-shadow: -1px 0 20px rgba(0,0,0,.4); } .pnm { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .pkol { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent); } .phd2 { font-family: var(--sans); font-size: 11px; color: var(--text3); } .ptop { border-bottom: 1px solid var(--line); padding: 18px 20px 14px; } .ptabs { padding: 0 16px; border-bottom: 1px solid var(--line); } .ptab { font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 10px 12px; color: var(--text3); } .ptab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } /* ─── Modals ──────────────────────────────────────────────── */ .mo-box, #settingsModal > div { background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2); } .mo { background: rgba(0,0,0,.65); backdrop-filter: blur(2px); } .sett-tabs { padding: 0 20px; border-bottom: 1px solid var(--line); } .sett-tab { font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 11px 14px; letter-spacing: 0; } .sett-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .settings-title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .settings-desc { font-family: var(--sans); font-size: 12px; color: var(--text3); letter-spacing: 0; line-height: 1.55; } .settings-label { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text2); letter-spacing: 0; } .settings-input { font-size: 12px; padding: 7px 10px; } .settings-save-btn, .settings-connect-btn { font-family: var(--sans); font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius); letter-spacing: 0; } /* ─── Outreach, Analytics, Analyzer refinements ───────────── */ .outreach-tab { font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 7px 16px; border-radius: 6px; } .outreach-tab.active { background: var(--bg2); border-color: var(--accent); color: var(--text); box-shadow: none; } .outreach-kpi { border-radius: var(--radius-lg); box-shadow: none; } .outreach-kpi-v { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .outreach-kpi-l { font-family: var(--sans); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text3); } .outreach-date-btn { font-family: var(--sans); font-size: 11px; font-weight: 500; } .ana-kpi-v { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ana-kpi-l { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; } .ana-card { border-radius: var(--radius-lg); } .ana-card-title { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text2); } .ana-card-title span { font-size: 11px; font-weight: 600; } .az-card { border-radius: var(--radius-lg); } .az-card-title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .az-metric { border-radius: var(--radius); } .az-metric-v { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .az-metric-l { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text3); } /* Progress bar thinner */ .pbar { height: 1px; } .pfill { background: var(--accent); } /* Pipeline column headers */ .psh-nm { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: -0.005em; } .psh-desc { font-family: var(--sans); font-size: 11px; color: var(--text3); } /* ─── Hide decorative emoji-only content in headings ──────── */ .outreach-tab-title-emoji, .ana-card-title::before { /* placeholders if later wanted */ } /* ─── Light theme polish ──────────────────────────────────── */ [data-theme="light"] { --accent: #b07708; --line: #e2e4ea; --line2: #d3d6de; --bg0: #f7f8fb; --bg1: #ffffff; --bg2: #f1f2f6; --bg3: #e7e9ef; --text: #12131a; --text2: #4b4d5a; --text3: #8a8d9b; --nav-bg: #ffffff; --sidebar-bg: #fbfbfc; --card-bg: #ffffff; --shadow: 0 1px 2px rgba(15,18,30,.04); } [data-theme="light"] .btn-primary { color: #fff; background: #1a1a1a; border-color: #1a1a1a; } [data-theme="light"] .btn-primary:hover { background: #000; border-color: #000; } /* ─── Reduce scrollbars to hairline ───────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); }