/* ======================================================== HAVN CRM — v2.2.9 (mockup parity) Scoped under .havn-crm so it can't bleed into the rest of the dashboard. Pulls colour tokens from havn-mission-control but defines a complete light + dark token set of its own so the toggle is deterministic and parent CSS can't make the layout cramped or force-uppercase the tab labels. ======================================================== */ .havn-crm { /* ----- Light tokens (default) ----- */ --c-bg: #FAF7F2; --c-bg-warm: #F4EFE6; --c-bg-warm-2: #EFE9DC; --c-surface: #FFFFFF; --c-border: #ECE6DA; --c-border-strong: #DCD3C2; --c-ink: #1F1B16; --c-ink-2: #4A4338; --c-ink-3: #8A8071; --c-ink-4: #B5AB99; --c-gold: #B8924A; --c-gold-soft: #F0E2BD; --c-gold-deep: #8E6F33; --c-gold-grad-1: #D4B370; --c-gold-grad-2: #C9A86B; --c-terra: #C8553D; --c-terra-soft: #F4DDD6; --c-amber: #D89B3F; --c-amber-soft: #FBEACF; --c-sage: #6E8068; --c-sage-soft: #DDE4D7; --c-olive: #5C6B4A; --c-steel: #2D5A87; --c-steel-soft: #DCE5F0; --c-lock: #9C8B6E; --c-up: #2F8C57; --c-down: #C8553D; --c-shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.04); --c-shadow-md: 0 4px 16px rgba(31, 27, 22, 0.06); color: var(--c-ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; /* Give the CRM block its own breathing room inside the dashboard shell so the outer .havn-mc-section padding can't squash it. */ padding: 4px 4px 24px; } .havn-crm * { box-sizing: border-box; } /* Hard reset: prevent parent dashboard CSS from forcing uppercase or adding spacing to CRM controls. The mockup uses mixed-case throughout. */ .havn-crm .havn-crm-tab, .havn-crm .havn-crm-tab *, .havn-crm .havn-crm-btn, .havn-crm .havn-crm-btn *, .havn-crm .havn-crm-pagehead-actions button, .havn-crm .havn-crm-tier-row label, .havn-crm .havn-crm-tier-row select, .havn-crm .havn-crm-tier-row .havn-crm-tier-note, .havn-crm .havn-crm-title, .havn-crm .havn-crm-subtitle, .havn-crm .havn-crm-pagehead .havn-crm-eyebrow { letter-spacing: normal; } .havn-crm .havn-crm-tab, .havn-crm .havn-crm-tab *, .havn-crm .havn-crm-pagehead-actions button { text-transform: none !important; } /* ---------- Page header (Relationship Center / CRM) ---------- */ .havn-crm-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 4px 4px 22px; flex-wrap: wrap; } .havn-crm-pagehead-text { min-width: 0; flex: 1 1 360px; } .havn-crm-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--c-gold-deep); text-transform: uppercase !important; margin-bottom: 6px; } .havn-crm-title { font-family: "Fraunces", "Cormorant Garamond", Georgia, serif; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--c-ink); margin: 0 0 6px; text-transform: none !important; } .havn-crm-subtitle { font-size: 13.5px; color: var(--c-ink-2); margin: 0; max-width: 560px; } .havn-crm-pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } .havn-crm-pagehead-actions .havn-crm-btn { padding: 9px 16px; font-size: 12.5px; } /* ---------- KPI strip ---------- */ .havn-crm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } .havn-crm-kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 18px; position: relative; box-shadow: var(--c-shadow-sm); } .havn-crm-kpi .lbl { font-size: 10.5px; color: var(--c-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 6px; } .havn-crm-kpi .val { font-family: "Fraunces", serif; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--c-ink); } .havn-crm-kpi .trend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; } .havn-crm-kpi .trend .arrow { font-size: 12px; line-height: 1; } .havn-crm-kpi .trend.is-up { color: var(--c-up); } .havn-crm-kpi .trend.is-down { color: var(--c-down); } .havn-crm-kpi .trend.is-neutral { color: var(--c-ink-3); font-weight: 500; } .havn-crm-kpi .src { font-size: 10px; color: var(--c-ink-4); margin-top: 6px; font-style: italic; } @media (max-width: 1180px) { .havn-crm-kpis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .havn-crm-kpis { grid-template-columns: repeat(2, 1fr); } .havn-crm-title { font-size: 26px; } } /* ---------- Preview-as-tier row ---------- */ .havn-crm-tier-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--c-border); background: var(--c-bg-warm); flex-wrap: wrap; } .havn-crm-tier-row label { font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); text-transform: none !important; letter-spacing: 0 !important; } .havn-crm-tier-select { padding: 7px 30px 7px 12px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 8px; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--c-ink); cursor: pointer; outline: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-3) 50%), linear-gradient(135deg, var(--c-ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .havn-crm-tier-note { font-size: 11.5px; color: var(--c-ink-3); margin-left: auto; font-style: italic; text-transform: none !important; letter-spacing: 0 !important; } .havn-crm-ico { width: 16px; height: 16px; stroke-width: 1.6; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; } /* ---------- Module ---------- */ .havn-crm-module { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; box-shadow: var(--c-shadow-sm); } .havn-crm-subnav { padding: 0 22px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; } .havn-crm-tab { padding: 14px 0; margin-right: 22px; background: transparent; border: none; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--c-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 7px; } .havn-crm-tab .havn-crm-ico { color: var(--c-ink-3); } .havn-crm-tab:hover { color: var(--c-ink); } .havn-crm-tab:hover .havn-crm-ico { color: var(--c-ink); } .havn-crm-tab.is-on { color: var(--c-ink); border-bottom-color: var(--c-gold); } .havn-crm-tab.is-on .havn-crm-ico { color: var(--c-gold-deep); } .havn-crm-tab .havn-crm-count { font-size: 10.5px; padding: 1px 7px; background: var(--c-bg-warm); border-radius: 999px; color: var(--c-ink-2); font-weight: 700; } .havn-crm-body { padding: 0; } .havn-crm-view { display: none; } .havn-crm-view.is-active { display: block; } /* ---------- Shared ---------- */ .havn-crm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink); cursor: pointer; transition: all 0.15s; font-family: "Inter", sans-serif; } .havn-crm-btn:hover { border-color: var(--c-ink-3); } .havn-crm-btn.is-primary { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } .havn-crm-btn.is-gold { background: linear-gradient(135deg, var(--c-gold-grad-1), var(--c-gold-grad-2)); color: #0B0C10; border-color: var(--c-gold); } .havn-crm-btn.is-gold:hover { filter: brightness(0.95); } .havn-crm-btn.is-ghost { background: transparent; border-color: transparent; color: var(--c-ink-2); } .havn-crm-btn.is-icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 10px; } .havn-crm-btn.is-sm { padding: 5px 10px; font-size: 11.5px; } .havn-crm-btn.is-xs { padding: 3px 8px; font-size: 10.5px; } .havn-crm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold-deep); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex-shrink: 0; } .havn-crm-avatar.sm { width: 30px; height: 30px; font-size: 11px; } .havn-crm-avatar.xs { width: 22px; height: 22px; font-size: 9.5px; } .havn-crm-avatar.lg { width: 48px; height: 48px; font-size: 16px; } .havn-crm-avatar.sage { background: var(--c-sage-soft); color: var(--c-olive); } .havn-crm-avatar.terra { background: var(--c-terra-soft); color: var(--c-terra); } .havn-crm-avatar.steel { background: var(--c-steel-soft); color: var(--c-steel); } .havn-crm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-3); display: inline-block; } .havn-crm-dot.hot { background: var(--c-terra); box-shadow: 0 0 0 3px var(--c-terra-soft); } .havn-crm-dot.warm { background: var(--c-amber); box-shadow: 0 0 0 3px var(--c-amber-soft); } .havn-crm-dot.cold { background: var(--c-sage); box-shadow: 0 0 0 3px var(--c-sage-soft); } .havn-crm-score { display: inline-flex; align-items: center; padding: 3px 9px; background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--c-ink-2); } .havn-crm-score.hot { background: var(--c-terra-soft); border-color: var(--c-terra); color: var(--c-terra); } .havn-crm-score.warm { background: var(--c-amber-soft); border-color: var(--c-amber); color: var(--c-gold-deep); } .havn-crm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--c-ink-2); } .havn-crm-chip.terra { background: var(--c-terra-soft); border-color: var(--c-terra); color: var(--c-terra); } .havn-crm-chip.sage { background: var(--c-sage-soft); border-color: var(--c-sage); color: var(--c-olive); } /* ---------- Contacts layout ---------- */ .havn-crm-contacts-layout { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 340px); gap: 0; min-height: 720px; } .havn-crm-list-col { border-right: 1px solid var(--c-border); display: flex; flex-direction: column; min-height: 0; } .havn-crm-list-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--c-border); } .havn-crm-search { position: relative; } .havn-crm-search .havn-crm-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); } .havn-crm-search input { width: 100%; padding: 9px 12px 9px 34px; background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 10px; font-family: "Inter", sans-serif; font-size: 12.5px; outline: none; color: var(--c-ink); } .havn-crm-filter-row { display: flex; gap: 3px; margin-top: 11px; padding: 3px; background: var(--c-bg-warm); border-radius: 8px; } .havn-crm-filter-row button { flex: 1; padding: 6px 4px; border: none; background: transparent; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; color: var(--c-ink-3); border-radius: 6px; cursor: pointer; } .havn-crm-filter-row button.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--c-shadow-sm); } .havn-crm-sort-row { padding: 8px 16px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--c-ink-3); } .havn-crm-sort-row select { background: transparent; border: none; color: var(--c-ink-2); font-weight: 600; font-family: "Inter", sans-serif; font-size: 11px; cursor: pointer; outline: none; } .havn-crm-list { flex: 1; overflow-y: auto; padding: 6px 8px 8px; } .havn-crm-contact-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background 0.12s; } .havn-crm-contact-row:hover { background: var(--c-bg-warm); } .havn-crm-contact-row.is-selected { background: var(--c-bg-warm); box-shadow: inset 3px 0 0 var(--c-gold); } .havn-crm-contact-row .meta { flex: 1; min-width: 0; } .havn-crm-contact-row .name { font-weight: 600; font-size: 13px; color: var(--c-ink); display: flex; align-items: center; gap: 6px; } .havn-crm-contact-row .sub { font-size: 11px; color: var(--c-ink-3); margin-top: 1px; } .havn-crm-detail-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .havn-crm-hero { padding: 20px 22px 18px; display: flex; gap: 14px; align-items: start; } .havn-crm-hero h2 { font-family: "Fraunces", serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .havn-crm-hero .row { color: var(--c-ink-2); font-size: 12.5px; margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .havn-crm-hero .row .sep { color: var(--c-ink-3); } .havn-crm-hero-actions { margin-left: auto; display: flex; gap: 6px; } .havn-crm-prop-strip { padding: 14px 22px; display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, var(--c-bg-warm), var(--c-surface)); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .havn-crm-prop-thumb { width: 72px; height: 54px; border-radius: 10px; background: linear-gradient(135deg, #d8c8a8, #a87f3a); flex-shrink: 0; display: grid; place-items: center; color: rgba(255,255,255,0.85); } .havn-crm-prop-info { flex: 1; } .havn-crm-prop-info .addr { font-weight: 600; font-size: 13px; } .havn-crm-prop-info .specs { color: var(--c-ink-3); font-size: 11.5px; margin-top: 2px; display: flex; gap: 10px; } .havn-crm-prop-info .specs span { display: flex; align-items: center; gap: 4px; } .havn-crm-prop-price { font-family: "Fraunces", serif; font-size: 19px; font-weight: 600; color: var(--c-gold-deep); text-align: right; } .havn-crm-prop-price .pl { display: block; font-family: "Inter", sans-serif; font-size: 9.5px; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1px; } .havn-crm-detail-tabs { padding: 0 22px; display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); position: sticky; top: 0; z-index: 2; } .havn-crm-detail-tabs button { padding: 11px 0; margin-right: 22px; background: transparent; border: none; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--c-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; } .havn-crm-detail-tabs button.is-on { color: var(--c-ink); border-bottom-color: var(--c-gold); } .havn-crm-detail-tabs button .havn-crm-count { font-size: 10.5px; padding: 1px 6px; background: var(--c-bg-warm); border-radius: 999px; color: var(--c-ink-2); font-weight: 700; } .havn-crm-detail-content { padding: 18px 22px 22px; } .havn-crm-pane { display: none; } .havn-crm-pane.is-active { display: block; } .havn-crm-composer { background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; } .havn-crm-composer-tabs { display: flex; gap: 4px; margin-bottom: 10px; } .havn-crm-composer-tab { padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .havn-crm-composer-tab.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--c-shadow-sm); } .havn-crm-composer textarea { width: 100%; min-height: 60px; padding: 9px 11px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; font-family: "Inter", sans-serif; font-size: 12.5px; outline: none; resize: vertical; color: var(--c-ink); } .havn-crm-composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .havn-crm-composer-actions .helpers { display: flex; gap: 4px; color: var(--c-ink-3); } .havn-crm-timeline { display: flex; flex-direction: column; gap: 12px; } .havn-crm-event { display: flex; gap: 12px; align-items: start; } .havn-crm-event-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .havn-crm-event-icon.call { background: var(--c-sage-soft); color: var(--c-olive); } .havn-crm-event-icon.email { background: var(--c-steel-soft); color: var(--c-steel); } .havn-crm-event-icon.match { background: var(--c-gold-soft); color: var(--c-gold-deep); } .havn-crm-event-icon.sms { background: var(--c-terra-soft); color: var(--c-terra); } .havn-crm-event-icon.note { background: var(--c-bg-warm); color: var(--c-ink-2); } .havn-crm-event-icon.task { background: var(--c-amber-soft); color: var(--c-gold-deep); } .havn-crm-event-body { flex: 1; } .havn-crm-event-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; } .havn-crm-event-title .time { font-weight: 500; color: var(--c-ink-3); font-size: 11px; } .havn-crm-event-desc { font-size: 12px; color: var(--c-ink-2); margin-top: 2px; line-height: 1.45; } .havn-crm-side-col { border-left: 1px solid var(--c-border); display: flex; flex-direction: column; overflow-y: auto; background: var(--c-bg); } .havn-crm-side-card { padding: 16px 18px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); position: relative; } .havn-crm-side-card:last-child { border-bottom: none; } .havn-crm-side-card .lbl { font-size: 10.5px; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .havn-crm-side-card .lbl .src { font-size: 9.5px; color: var(--c-ink-4); font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-style: italic; } .havn-crm-ai { background: linear-gradient(135deg, var(--c-gold-soft), var(--c-bg-warm)); border: 1px solid var(--c-gold); border-radius: 10px; padding: 11px 13px; } .havn-crm-ai .insight { font-size: 12.5px; color: var(--c-ink); line-height: 1.5; margin-bottom: 9px; } .havn-crm-tasks { display: flex; flex-direction: column; gap: 6px; } .havn-crm-task { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; background: var(--c-bg-warm); } .havn-crm-task input[type="checkbox"] { accent-color: var(--c-gold); width: 13px; height: 13px; cursor: pointer; } .havn-crm-task label { font-size: 12.5px; color: var(--c-ink); flex: 1; cursor: pointer; } .havn-crm-task.is-done label { text-decoration: line-through; color: var(--c-ink-3); } .havn-crm-task .when { font-size: 10.5px; color: var(--c-ink-3); } .havn-crm-progress { display: flex; gap: 3px; margin: 10px 0 8px; } .havn-crm-progress .step { flex: 1; height: 5px; border-radius: 3px; background: var(--c-border); transition: background 0.2s; } .havn-crm-progress .step.on { background: var(--c-gold); } .havn-crm-progress .step.current { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft)); } .havn-crm-progress-labels { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--c-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .havn-crm-stat { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; } .havn-crm-stat .row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--c-border); font-size: 12px; } .havn-crm-stat .row:last-child { border-bottom: none; } .havn-crm-stat .row span:last-child { font-weight: 600; } .havn-crm-matched-list { display: flex; flex-direction: column; gap: 8px; } .havn-crm-matched { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--c-bg-warm); border-radius: 9px; cursor: pointer; } .havn-crm-matched .body { flex: 1; min-width: 0; } .havn-crm-matched .nm { font-size: 12px; font-weight: 600; } .havn-crm-matched .crit { font-size: 10.5px; color: var(--c-ink-3); } /* ---------- Pipeline ---------- */ .havn-crm-pipe-toolbar { padding: 14px 18px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .havn-crm-pipe-toolbar .havn-crm-search { flex: 1; max-width: 320px; } .havn-crm-pipe-toolbar .right { margin-left: auto; display: flex; gap: 6px; } .havn-crm-pipe-body { padding: 18px; } .havn-crm-pipe-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; } .havn-crm-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; } .havn-crm-board-col { background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 12px; padding: 10px; min-height: 400px; } .havn-crm-board-col.drop { background: var(--c-gold-soft); border-color: var(--c-gold); } .havn-crm-board-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; } .havn-crm-board-head .name { font-size: 11px; font-weight: 700; color: var(--c-ink); text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 7px; } .havn-crm-board-head .name::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c-ink-3); } .havn-crm-board-head.new .name::before { background: var(--c-ink-3); } .havn-crm-board-head.contact .name::before { background: var(--c-sage); } .havn-crm-board-head.listed .name::before { background: var(--c-amber); } .havn-crm-board-head.offer .name::before { background: var(--c-terra); } .havn-crm-board-head.settled .name::before { background: var(--c-gold); } .havn-crm-board-head .count { font-size: 10.5px; color: var(--c-ink-3); font-weight: 700; background: var(--c-surface); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--c-border); margin-left: 6px; } .havn-crm-board-head .total { font-family: "Fraunces", serif; font-size: 12px; color: var(--c-ink-2); font-weight: 600; margin-top: 1px; } .havn-crm-board-cards { display: flex; flex-direction: column; gap: 7px; } .havn-crm-board-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 10px; cursor: grab; transition: all 0.15s; user-select: none; } .havn-crm-board-card:active { cursor: grabbing; } .havn-crm-board-card.is-dragging { opacity: 0.4; } .havn-crm-board-card:hover { border-color: var(--c-gold); transform: translateY(-1px); box-shadow: var(--c-shadow-md); } .havn-crm-board-card .top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .havn-crm-board-card .name { font-weight: 600; font-size: 12.5px; } .havn-crm-board-card .addr { font-size: 11px; color: var(--c-ink-3); margin-bottom: 6px; } .havn-crm-board-card .price { font-family: "Fraunces", serif; font-size: 14px; font-weight: 600; color: var(--c-gold-deep); } .havn-crm-board-card .bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--c-border); } .havn-crm-board-card .stage-meta { font-size: 10px; color: var(--c-ink-3); } /* ---------- Inbox ---------- */ .havn-crm-inbox-layout { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 320px); gap: 0; min-height: 720px; } .havn-crm-inbox-list { border-right: 1px solid var(--c-border); display: flex; flex-direction: column; min-height: 0; } .havn-crm-inbox-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--c-border); } .havn-crm-inbox-head .title { font-family: "Fraunces", serif; font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .havn-crm-smart { padding: 9px 7px; border-bottom: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 2px; } .havn-crm-smart-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--c-ink-2); font-weight: 500; } .havn-crm-smart-item:hover { background: var(--c-bg-warm); } .havn-crm-smart-item.is-on { background: var(--c-bg-warm); color: var(--c-ink); font-weight: 600; } .havn-crm-smart-item .ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; } .havn-crm-smart-item .ico.hot { background: var(--c-terra-soft); color: var(--c-terra); } .havn-crm-smart-item .ico.today { background: var(--c-gold-soft); color: var(--c-gold-deep); } .havn-crm-smart-item .ico.stuck { background: var(--c-amber-soft); color: var(--c-gold-deep); } .havn-crm-smart-item .ico.all { background: var(--c-sage-soft); color: var(--c-olive); } .havn-crm-smart-item .count { margin-left: auto; font-size: 10.5px; color: var(--c-ink-3); font-weight: 700; } .havn-crm-inbox-items { flex: 1; overflow-y: auto; padding: 5px; } .havn-crm-inbox-item { padding: 10px 11px; border-radius: 9px; cursor: pointer; } .havn-crm-inbox-item:hover { background: var(--c-bg-warm); } .havn-crm-inbox-item.is-selected { background: var(--c-bg-warm); border-left: 3px solid var(--c-gold); padding-left: 8px; } .havn-crm-inbox-item .top { display: flex; align-items: center; gap: 8px; } .havn-crm-inbox-item .name { font-weight: 600; font-size: 12.5px; flex: 1; } .havn-crm-inbox-item .time { font-size: 10.5px; color: var(--c-ink-3); } .havn-crm-inbox-item .snippet { font-size: 11px; color: var(--c-ink-3); margin-top: 4px; margin-left: 38px; line-height: 1.4; } .havn-crm-inbox-item .tags { display: flex; gap: 4px; margin-top: 5px; margin-left: 38px; } .havn-crm-thread { display: flex; flex-direction: column; min-height: 0; } .havn-crm-thread-head { padding: 12px 18px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 12px; } .havn-crm-thread-head .info { flex: 1; } .havn-crm-thread-head .info h3 { font-family: "Fraunces", serif; font-size: 16px; font-weight: 600; margin: 0; } .havn-crm-thread-head .info .sub { font-size: 11.5px; color: var(--c-ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .havn-crm-thread-channels { display: flex; padding: 0 18px; gap: 4px; border-bottom: 1px solid var(--c-border); } .havn-crm-thread-channel { padding: 9px 0; margin-right: 16px; font-size: 12px; font-weight: 600; color: var(--c-ink-3); border-bottom: 2px solid transparent; cursor: pointer; } .havn-crm-thread-channel.is-on { color: var(--c-ink); border-bottom-color: var(--c-gold); } .havn-crm-messages { flex: 1; padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--c-bg); } .havn-crm-msg { display: flex; gap: 9px; max-width: 78%; } .havn-crm-msg.out { margin-left: auto; flex-direction: row-reverse; } .havn-crm-msg .bubble { background: var(--c-surface); border: 1px solid var(--c-border); padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.45; box-shadow: var(--c-shadow-sm); } .havn-crm-msg.out .bubble { background: var(--c-gold-soft); border-color: var(--c-gold); color: var(--c-ink); } .havn-crm-msg .meta { font-size: 10px; color: var(--c-ink-3); margin-top: 3px; } .havn-crm-msg.system { max-width: 100%; align-self: center; } .havn-crm-msg.system .bubble { background: transparent; border: 1px dashed var(--c-border-strong); font-size: 11px; color: var(--c-ink-3); text-align: center; padding: 5px 12px; display: flex; align-items: center; gap: 6px; } .havn-crm-composer-row { padding: 10px 14px; border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: 7px; background: var(--c-surface); } .havn-crm-composer-row input { flex: 1; padding: 9px 13px; background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 999px; font-family: "Inter", sans-serif; font-size: 12.5px; outline: none; color: var(--c-ink); } .havn-crm-ai-suggest { padding: 9px 14px; background: linear-gradient(90deg, var(--c-gold-soft), var(--c-bg-warm)); border-top: 1px solid var(--c-border); font-size: 11.5px; color: var(--c-gold-deep); display: flex; align-items: center; gap: 7px; } .havn-crm-context { border-left: 1px solid var(--c-border); background: var(--c-bg); overflow-y: auto; } /* ---------- Automations & Templates & Reports ---------- */ .havn-crm-section-body { padding: 18px; } .havn-crm-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .havn-crm-section-head .title { font-family: "Fraunces", serif; font-size: 18px; font-weight: 600; } .havn-crm-section-head .sub { font-size: 12px; color: var(--c-ink-3); margin-top: 2px; } .havn-crm-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .havn-crm-auto-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: all 0.15s; } .havn-crm-auto-card:hover { border-color: var(--c-gold); box-shadow: var(--c-shadow-md); } .havn-crm-auto-card .head { display: flex; align-items: start; gap: 12px; margin-bottom: 10px; } .havn-crm-auto-card .head .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--c-gold-soft); color: var(--c-gold-deep); display: grid; place-items: center; flex-shrink: 0; } .havn-crm-auto-card .head .t { flex: 1; } .havn-crm-auto-card .head .t .title { font-family: "Fraunces", serif; font-size: 15px; font-weight: 600; } .havn-crm-auto-card .head .t .trigger { font-size: 11px; color: var(--c-ink-3); margin-top: 2px; } .havn-crm-auto-card .desc { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5; } .havn-crm-auto-card .stats { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-border); } .havn-crm-auto-card .stats .stat { flex: 1; } .havn-crm-auto-card .stats .stat .v { font-family: "Fraunces", serif; font-size: 18px; font-weight: 600; color: var(--c-ink); } .havn-crm-auto-card .stats .stat .l { font-size: 10px; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .havn-crm-toggle { width: 38px; height: 22px; background: var(--c-border-strong); border-radius: 999px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .havn-crm-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: var(--c-shadow-sm); } .havn-crm-toggle.is-on { background: var(--c-gold); } .havn-crm-toggle.is-on::after { transform: translateX(16px); } .havn-crm-tpl-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; } .havn-crm-tpl-folder { font-size: 10.5px; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 12px 6px; } .havn-crm-tpl-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px; } .havn-crm-tpl-item:hover { background: var(--c-bg-warm); } .havn-crm-tpl-item.is-on { background: var(--c-bg-warm); font-weight: 600; } .havn-crm-tpl-preview { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 22px 26px; } .havn-crm-tpl-preview .subject { font-family: "Fraunces", serif; font-size: 19px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px; } .havn-crm-tpl-preview .body { font-size: 13.5px; color: var(--c-ink); line-height: 1.7; } .havn-crm-tpl-preview .body p { margin-bottom: 12px; } .havn-crm-tpl-preview .vars { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--c-border); } .havn-crm-reports-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } .havn-crm-report-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 18px 20px; } .havn-crm-report-card .head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 14px; } .havn-crm-report-card .head h4 { font-family: "Fraunces", serif; font-size: 16px; font-weight: 600; margin: 0; } .havn-crm-bar-chart { display: flex; align-items: end; gap: 6px; height: 180px; padding: 8px 0 24px; } .havn-crm-bar-chart .bar { flex: 1; background: linear-gradient(180deg, var(--c-gold-grad-1), var(--c-gold-grad-2)); border-radius: 5px 5px 0 0; min-height: 8px; position: relative; } .havn-crm-bar-chart .bar .lbl { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--c-ink-3); font-weight: 600; } .havn-crm-funnel { display: flex; flex-direction: column; gap: 4px; } .havn-crm-funnel-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--c-bg-warm); border-radius: 8px; } .havn-crm-funnel-step .nm { width: 110px; font-size: 12px; font-weight: 600; } .havn-crm-funnel-step .bar-fill { background: linear-gradient(90deg, var(--c-gold-soft), var(--c-gold)); height: 24px; border-radius: 5px; display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; font-weight: 600; color: var(--c-ink); } .havn-crm-funnel-step .pct { font-size: 11px; color: var(--c-ink-3); font-weight: 600; } .havn-crm-board-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--c-bg-warm); border-radius: 8px; margin-bottom: 6px; } .havn-crm-board-row .rank { font-family: "Fraunces", serif; font-size: 14px; font-weight: 700; color: var(--c-ink-3); width: 16px; } .havn-crm-board-row .rank.gold { color: var(--c-gold-deep); } .havn-crm-board-row .body { flex: 1; } .havn-crm-board-row .nm { font-size: 12.5px; font-weight: 600; } .havn-crm-board-row .sub { font-size: 10.5px; color: var(--c-ink-3); } .havn-crm-board-row .v { font-family: "Fraunces", serif; font-size: 14px; font-weight: 600; } /* ---------- Tier gating ---------- */ .havn-crm-locked { position: relative; overflow: hidden; } .havn-crm-locked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(244,239,230,0.92)); backdrop-filter: blur(2px); pointer-events: none; z-index: 1; } .havn-crm-lock-overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; } .havn-crm-lock-inner { background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 14px; padding: 14px 18px; box-shadow: var(--c-shadow-md); text-align: center; pointer-events: auto; max-width: 240px; } .havn-crm-lock-inner .lk { width: 32px; height: 32px; border-radius: 50%; background: var(--c-gold-soft); display: grid; place-items: center; margin: 0 auto 8px; color: var(--c-gold-deep); } .havn-crm-lock-inner h4 { font-family: "Fraunces", serif; font-size: 15px; font-weight: 600; margin: 0 0 4px; } .havn-crm-lock-inner p { font-size: 12px; color: var(--c-ink-3); margin: 0 0 10px; line-height: 1.4; } /* ---------- Toast ---------- */ .havn-crm-toast { position: fixed; bottom: 24px; right: 24px; background: var(--c-ink); color: var(--c-bg); padding: 12px 18px; border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 12px 36px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 9px; transform: translateY(120%); transition: transform 0.3s; z-index: 99999; } .havn-crm-toast.is-show { transform: translateY(0); } .havn-crm-toast .havn-crm-ico { color: var(--c-gold-grad-1); } /* ---------- Responsive ---------- */ @media ( max-width: 1100px ) { .havn-crm-contacts-layout, .havn-crm-inbox-layout { grid-template-columns: 1fr; height: auto; } .havn-crm-side-col, .havn-crm-context { border-left: none; border-top: 1px solid var(--c-border); } .havn-crm-list-col, .havn-crm-inbox-list { border-right: none; border-bottom: 1px solid var(--c-border); max-height: 360px; } .havn-crm-kpis, .havn-crm-pipe-summary { grid-template-columns: repeat(2, 1fr); } .havn-crm-board { grid-template-columns: 1fr; } } /* ============================================================ THEME SYNC — parent-selector driven (no JS race conditions) Dark is default. Light mode kicks in when parent .havn-mc.is-light is set. ============================================================ */ /* ---------- Light mode hardening ---------- These rules force readable text in light mode and beat mission-control's inherited rgba colors. */ .havn-mc.is-light .havn-crm, .havn-mc.is-light .havn-crm * { color: var(--c-ink); } .havn-mc.is-light .havn-crm .havn-crm-kpi .lbl, .havn-mc.is-light .havn-crm .havn-crm-side-card .lbl, .havn-mc.is-light .havn-crm .havn-crm-event-title .time, .havn-mc.is-light .havn-crm .havn-crm-event-desc, .havn-mc.is-light .havn-crm .havn-crm-contact-row .sub, .havn-mc.is-light .havn-crm .havn-crm-inbox-item .snippet, .havn-mc.is-light .havn-crm .havn-crm-board-card .addr, .havn-mc.is-light .havn-crm .havn-crm-board-card .stage-meta, .havn-mc.is-light .havn-crm .havn-crm-auto-card .desc, .havn-mc.is-light .havn-crm .havn-crm-auto-card .head .t .trigger, .havn-mc.is-light .havn-crm .havn-crm-tab, .havn-mc.is-light .havn-crm .havn-crm-detail-tabs button, .havn-mc.is-light .havn-crm .havn-crm-thread-channel, .havn-mc.is-light .havn-crm .havn-crm-section-head .sub, .havn-mc.is-light .havn-crm .havn-crm-task .when, .havn-mc.is-light .havn-crm .havn-crm-funnel-step .pct, .havn-mc.is-light .havn-crm .havn-crm-board-row .sub, .havn-mc.is-light .havn-crm .havn-crm-kpi .src { color: var(--c-ink-3) !important; } .havn-mc.is-light .havn-crm .havn-crm-kpi .val, .havn-mc.is-light .havn-crm .havn-crm-hero h2, .havn-mc.is-light .havn-crm .havn-crm-prop-info .addr, .havn-mc.is-light .havn-crm .havn-crm-event-title, .havn-mc.is-light .havn-crm .havn-crm-contact-row .name, .havn-mc.is-light .havn-crm .havn-crm-board-card .name, .havn-mc.is-light .havn-crm .havn-crm-inbox-item .name, .havn-mc.is-light .havn-crm .havn-crm-thread-head .info h3, .havn-mc.is-light .havn-crm .havn-crm-auto-card .head .t .title, .havn-mc.is-light .havn-crm .havn-crm-section-head .title, .havn-mc.is-light .havn-crm .havn-crm-report-card .head h4, .havn-mc.is-light .havn-crm .havn-crm-tpl-preview .subject, .havn-mc.is-light .havn-crm .havn-crm-tpl-preview .body { color: var(--c-ink) !important; } .havn-mc.is-light .havn-crm .havn-crm-prop-price, .havn-mc.is-light .havn-crm .havn-crm-board-card .price { color: var(--c-gold-deep) !important; } /* Active states + tabs */ .havn-mc.is-light .havn-crm .havn-crm-tab.is-on, .havn-mc.is-light .havn-crm .havn-crm-detail-tabs button.is-on { color: var(--c-ink) !important; } /* Surfaces in light mode */ .havn-mc.is-light .havn-crm .havn-crm-module, .havn-mc.is-light .havn-crm .havn-crm-kpi, .havn-mc.is-light .havn-crm .havn-crm-side-card, .havn-mc.is-light .havn-crm .havn-crm-board-card, .havn-mc.is-light .havn-crm .havn-crm-auto-card, .havn-mc.is-light .havn-crm .havn-crm-report-card, .havn-mc.is-light .havn-crm .havn-crm-tpl-preview { background: #FFFFFF !important; } .havn-mc.is-light .havn-crm .havn-crm-detail-col, .havn-mc.is-light .havn-crm .havn-crm-thread { background: #FFFFFF; } .havn-mc.is-light .havn-crm .havn-crm-board-col, .havn-mc.is-light .havn-crm .havn-crm-side-col, .havn-mc.is-light .havn-crm .havn-crm-context { background: #F4EFE6; } /* Light mode message bubbles */ .havn-mc.is-light .havn-crm .havn-crm-messages { background: #FAF7F2; } .havn-mc.is-light .havn-crm .havn-crm-msg .bubble { background: #FFFFFF; color: var(--c-ink) !important; } /* ---------- DARK MODE — parent-selector driven (default) ---------- */ .havn-mc:not(.is-light) .havn-crm { --c-bg: #07080B; --c-bg-warm: #11131A; --c-bg-warm-2: #16181F; --c-surface: #0F1117; --c-border: rgba(255,255,255,0.07); --c-border-strong: rgba(255,255,255,0.14); --c-ink: #F4F4F5; --c-ink-2: rgba(244,244,245,0.78); --c-ink-3: rgba(244,244,245,0.55); --c-ink-4: rgba(244,244,245,0.32); --c-gold-soft: rgba(212,179,112,0.16); --c-terra-soft: rgba(200,85,61,0.18); --c-amber-soft: rgba(216,155,63,0.16); --c-sage-soft: rgba(110,128,104,0.18); --c-steel-soft: rgba(45,90,135,0.22); } .havn-mc:not(.is-light) .havn-crm .havn-crm-module, .havn-mc:not(.is-light) .havn-crm .havn-crm-kpi, .havn-mc:not(.is-light) .havn-crm .havn-crm-side-card, .havn-mc:not(.is-light) .havn-crm .havn-crm-board-card, .havn-mc:not(.is-light) .havn-crm .havn-crm-auto-card, .havn-mc:not(.is-light) .havn-crm .havn-crm-report-card, .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-preview { background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.008)); } .havn-mc:not(.is-light) .havn-crm .havn-crm-prop-strip { background: linear-gradient(135deg, rgba(212,179,112,0.06), rgba(255,255,255,0.02)); } .havn-mc:not(.is-light) .havn-crm .havn-crm-search input, .havn-mc:not(.is-light) .havn-crm .havn-crm-composer textarea, .havn-mc:not(.is-light) .havn-crm .havn-crm-composer-row input { background: rgba(255,255,255,0.04); color: var(--c-ink); border-color: var(--c-border); } .havn-mc:not(.is-light) .havn-crm .havn-crm-btn { background: rgba(255,255,255,0.04); color: var(--c-ink); border-color: var(--c-border); } .havn-mc:not(.is-light) .havn-crm .havn-crm-btn.is-primary { background: var(--c-gold); color: #0B0C10; border-color: var(--c-gold); } .havn-mc:not(.is-light) .havn-crm .havn-crm-contact-row:hover, .havn-mc:not(.is-light) .havn-crm .havn-crm-inbox-item:hover, .havn-mc:not(.is-light) .havn-crm .havn-crm-smart-item:hover, .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-item:hover { background: rgba(255,255,255,0.04); } .havn-mc:not(.is-light) .havn-crm .havn-crm-contact-row.is-selected, .havn-mc:not(.is-light) .havn-crm .havn-crm-inbox-item.is-selected, .havn-mc:not(.is-light) .havn-crm .havn-crm-smart-item.is-on, .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-item.is-on { background: rgba(212,179,112,0.08); } .havn-mc:not(.is-light) .havn-crm .havn-crm-board-col { background: rgba(255,255,255,0.03); border-color: var(--c-border); } .havn-mc:not(.is-light) .havn-crm .havn-crm-task, .havn-mc:not(.is-light) .havn-crm .havn-crm-matched, .havn-mc:not(.is-light) .havn-crm .havn-crm-funnel-step, .havn-mc:not(.is-light) .havn-crm .havn-crm-board-row { background: rgba(255,255,255,0.04); } .havn-mc:not(.is-light) .havn-crm .havn-crm-messages { background: rgba(0,0,0,0.25); } .havn-mc:not(.is-light) .havn-crm .havn-crm-msg .bubble { background: rgba(255,255,255,0.04); border-color: var(--c-border); color: var(--c-ink); } .havn-mc:not(.is-light) .havn-crm .havn-crm-prop-price, .havn-mc:not(.is-light) .havn-crm .havn-crm-board-card .price { color: var(--c-gold-grad-1); } .havn-mc:not(.is-light) .havn-crm .havn-crm-locked::after { background: linear-gradient(180deg, rgba(7,8,11,0.55), rgba(7,8,11,0.92)); } .havn-mc:not(.is-light) .havn-crm .havn-crm-lock-inner { background: #0F1117; border-color: var(--c-border-strong); color: var(--c-ink); } /* ============================================================ v2.2.9 — NEW HEADER + TIER ROW + KPI TRENDS Light & dark mode parity for the mockup-aligned UI bits we added above. Mirrors the existing .havn-mc[.is-light]/dark parent-selector pattern so the dashboard toggle drives them deterministically (no OS prefers-color-scheme bleed). ============================================================ */ /* ---------- LIGHT MODE (when the dashboard is in light mode) ---------- */ .havn-mc.is-light .havn-crm .havn-crm-eyebrow { color: var(--c-gold-deep) !important; } .havn-mc.is-light .havn-crm .havn-crm-title { color: var(--c-ink) !important; } .havn-mc.is-light .havn-crm .havn-crm-subtitle { color: var(--c-ink-2) !important; } .havn-mc.is-light .havn-crm .havn-crm-tier-row { background: var(--c-bg-warm) !important; } .havn-mc.is-light .havn-crm .havn-crm-tier-row label, .havn-mc.is-light .havn-crm .havn-crm-tier-select { color: var(--c-ink) !important; } .havn-mc.is-light .havn-crm .havn-crm-tier-note { color: var(--c-ink-3) !important; } .havn-mc.is-light .havn-crm .havn-crm-kpi .trend.is-up { color: #2F8C57 !important; } .havn-mc.is-light .havn-crm .havn-crm-kpi .trend.is-down { color: #C8553D !important; } .havn-mc.is-light .havn-crm .havn-crm-kpi .trend.is-neutral { color: var(--c-ink-3) !important; } .havn-mc.is-light .havn-crm .havn-crm-kpi .val { color: var(--c-ink) !important; } /* ---------- DARK MODE ---------- */ .havn-mc:not(.is-light) .havn-crm { --c-up: #4FC18A; --c-down: #E27A65; } .havn-mc:not(.is-light) .havn-crm .havn-crm-eyebrow { color: var(--c-gold-grad-1); } .havn-mc:not(.is-light) .havn-crm .havn-crm-title { color: var(--c-ink); } .havn-mc:not(.is-light) .havn-crm .havn-crm-subtitle { color: var(--c-ink-2); } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-row { background: rgba(255,255,255,0.03) !important; border-bottom-color: var(--c-border) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-row label { color: var(--c-ink-2); } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-select { background: rgba(255,255,255,0.04); border-color: var(--c-border-strong); color: var(--c-ink); } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-note { color: var(--c-ink-3); } .havn-mc:not(.is-light) .havn-crm .havn-crm-kpi .trend.is-up { color: #4FC18A; } .havn-mc:not(.is-light) .havn-crm .havn-crm-kpi .trend.is-down { color: #E27A65; } .havn-mc:not(.is-light) .havn-crm .havn-crm-kpi .trend.is-neutral { color: var(--c-ink-3); } /* Gold pill button in the header (matches mockup "Add contact") */ .havn-crm-btn.is-gold { background: linear-gradient(135deg, var(--c-gold-grad-1), var(--c-gold-grad-2)); color: #1A1305; border-color: var(--c-gold); font-weight: 700; } .havn-crm-btn.is-gold:hover { filter: brightness(0.96); } .havn-mc:not(.is-light) .havn-crm .havn-crm-btn.is-gold { background: linear-gradient(135deg, #D4B370, #B8975C); color: #1A1305; border-color: #B8924A; } /* Don't let the dashboard's heading reset eat our serif H1. */ /* Title size: match the "Leads" / "My Pipeline" h1 on other dashboard pages (~32px serif). Heavily-specific selectors so Elementor/parent h1 rules can't blow it up to 90px+ like before. */ .havn-crm .havn-crm-title { margin-top: 0 !important; } .havn-crm h1.havn-crm-title, .havn-mc .havn-crm h1.havn-crm-title, body .havn-crm h1.havn-crm-title, body.havn-dashboard-page .havn-crm h1.havn-crm-title, html body .havn-crm h1.havn-crm-title { font-family: "Fraunces", "Cormorant Garamond", Georgia, serif !important; font-size: 32px !important; line-height: 1.1 !important; font-weight: 500 !important; color: var(--c-ink) !important; text-transform: none !important; letter-spacing: -0.02em !important; margin: 0 0 6px !important; padding: 0 !important; } @media (max-width: 720px) { .havn-crm h1.havn-crm-title, .havn-mc .havn-crm h1.havn-crm-title, body .havn-crm h1.havn-crm-title, body.havn-dashboard-page .havn-crm h1.havn-crm-title { font-size: 26px !important; } } /* Same defensive override for the tabs so a parent .havn-mc-tab class doesn't force them to uppercase or pull them off the baseline. */ .havn-mc .havn-crm .havn-crm-tab, .havn-mc .havn-crm .havn-crm-tab *, body.havn-dashboard-page .havn-crm .havn-crm-tab, body.havn-dashboard-page .havn-crm .havn-crm-tab * { text-transform: none !important; letter-spacing: 0 !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important; } /* KPI label is intentionally uppercase, but tighten letter-spacing so it lines up with the mockup. */ .havn-crm .havn-crm-kpi .lbl { text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* ============================================================ v2.2.11 — STAGE-DRIVEN AUTOMATIONS Replaces the old generic-automation grid with stage-based cards (one per pipeline stage + utility automations). ============================================================ */ .havn-crm-auto-wrap { padding: 22px 22px 28px; } .havn-crm-auto-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } .havn-crm-auto-title { font-family: "Fraunces", serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--c-ink); margin: 0 0 4px; text-transform: none !important; } .havn-crm-auto-sub { font-size: 12.5px; color: var(--c-ink-2); margin: 0; max-width: 560px; } .havn-crm-auto-controls { display: flex; align-items: center; gap: 12px; } .havn-crm-auto-count { font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); padding: 5px 11px; background: var(--c-bg-warm); border-radius: 999px; } .havn-crm-auto-section-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; } .havn-crm-auto-section-eyebrow { font: 700 10.5px/1 "Inter", sans-serif; color: var(--c-gold-deep); text-transform: uppercase; letter-spacing: 0.12em; } .havn-crm-auto-section-line { flex: 1; height: 1px; background: var(--c-border); } .havn-crm-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .havn-crm-auto-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 18px 18px 16px; box-shadow: var(--c-shadow-sm); transition: all 0.18s; } .havn-crm-auto-card:hover { box-shadow: var(--c-shadow-md); border-color: var(--c-border-strong); } .havn-crm-auto-card.is-on { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold-soft), var(--c-shadow-sm); } .havn-crm-auto-card.is-locked { opacity: 0.6; } .havn-crm-auto-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; } .havn-crm-auto-card-titleblock { flex: 1; min-width: 0; } .havn-crm-auto-card-title { font-family: "Fraunces", serif; font-size: 16px; font-weight: 500; color: var(--c-ink); margin: 6px 0 2px; text-transform: none !important; line-height: 1.2; } .havn-crm-auto-card-trigger { font-size: 11px; color: var(--c-ink-3); margin: 0; } .havn-crm-auto-card-desc { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.45; margin: 0 0 12px; } /* iOS-style toggle */ .havn-crm-auto-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; display: inline-block; } .havn-crm-auto-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .havn-crm-auto-toggle input:disabled { cursor: not-allowed; } .havn-crm-auto-toggle-track { position: absolute; inset: 0; background: var(--c-border-strong); border-radius: 999px; transition: background 0.18s; } .havn-crm-auto-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .havn-crm-auto-toggle input:checked + .havn-crm-auto-toggle-track { background: linear-gradient(135deg, var(--c-gold-grad-1), var(--c-gold-grad-2)); } .havn-crm-auto-toggle input:checked + .havn-crm-auto-toggle-track::after { transform: translateX(16px); } .havn-crm-auto-card-templates { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--c-border); } .havn-crm-auto-template { background: var(--c-bg-warm); border-radius: 10px; padding: 9px 12px; } .havn-crm-auto-template-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .havn-crm-auto-template-kind { font: 700 9.5px/1 "Inter", sans-serif; color: var(--c-gold-deep); letter-spacing: 0.12em; } .havn-crm-auto-template-edit { font-size: 10.5px; font-weight: 600; color: var(--c-ink-2); background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 5px; } .havn-crm-auto-template-edit:hover { background: var(--c-surface); color: var(--c-ink); } .havn-crm-auto-template-subject { font-size: 12px; color: var(--c-ink); font-weight: 600; margin: 0 0 2px; } .havn-crm-auto-template-body { font-size: 11.5px; color: var(--c-ink-2); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .havn-crm-auto-paperwork { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border); font-size: 11px; color: var(--c-ink-3); display: flex; align-items: center; gap: 6px; } .havn-crm-auto-paperwork .havn-crm-ico { width: 13px; height: 13px; color: var(--c-gold-deep); } .havn-crm-auto-lock-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,247,242,0.4), rgba(250,247,242,0.95)); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); border-radius: 14px; backdrop-filter: blur(2px); } .havn-crm-auto-lock-overlay .havn-crm-ico { color: var(--c-lock); } /* Template editor modal */ .havn-crm-tpl-modal { position: fixed; inset: 0; background: rgba(31,27,22,0.55); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); } .havn-crm-tpl-modal-inner { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 24px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); font-family: "Inter", sans-serif; color: var(--c-ink); } .havn-crm-tpl-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .havn-crm-tpl-modal-head h3 { font-family: "Fraunces", serif; font-size: 20px; font-weight: 500; margin: 0; text-transform: none !important; } .havn-crm-tpl-modal-close { background: transparent; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--c-ink-3); padding: 0 6px; } .havn-crm-tpl-modal-close:hover { color: var(--c-ink); } .havn-crm-tpl-label { display: block; font-size: 11px; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0 6px; } .havn-crm-tpl-input, .havn-crm-tpl-textarea { width: 100%; padding: 10px 12px; background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: 8px; font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.5; color: var(--c-ink); outline: none; resize: vertical; } .havn-crm-tpl-textarea { min-height: 120px; } .havn-crm-tpl-input:focus, .havn-crm-tpl-textarea:focus { border-color: var(--c-gold); background: var(--c-surface); } .havn-crm-tpl-merge-hint { margin-top: 10px; padding: 8px 12px; background: var(--c-gold-soft); border-radius: 8px; font-size: 11px; color: var(--c-gold-deep); font-family: ui-monospace, "Menlo", monospace; } .havn-crm-tpl-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-border); } /* Dark mode variants */ .havn-mc:not(.is-light) .havn-crm .havn-crm-auto-lock-overlay { background: linear-gradient(180deg, rgba(7,8,11,0.4), rgba(7,8,11,0.95)); } .havn-mc:not(.is-light) .havn-crm .havn-crm-auto-template { background: rgba(255,255,255,0.04); } .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-modal-inner { background: #11131A; border-color: rgba(255,255,255,0.12); } .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-input, .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #F4F4F5; } /* Stage chip in the CRM contact list — sits below the sub line. */ .havn-crm .havn-crm-contact-row .row-stage { margin-top: 4px; } .havn-crm .havn-crm-contact-row .row-stage .havn-stage-chip { font-size: 9.5px; padding: 2px 6px; } .havn-crm .havn-crm-contact-row .row-stage .havn-stage-chip__dot { width: 5px; height: 5px; } /* Templates / Reports — the "view loaded" check sometimes fires before the markup is injected; ensure the empty container doesn't take height and the user sees a clean fallback. */ .havn-crm-view:not(.is-active) { display: none; } .havn-crm-view.is-active { display: block; min-height: 320px; } /* ============================================================ v2.2.12 — VISIBILITY / CONTRAST PASS Fixes the "ghosted text everywhere" issues seen across light and dark mode: pipeline column headers, templates rail, AI insights body + Skip button, message bubbles, activity timeline icons, conversion funnel labels. ============================================================ */ /* ----------------- LIGHT MODE ----------------- */ /* Activity timeline event icons — the pale pink/cream squares were bleeding into the warm page background. Tighten with a subtle border and a slightly stronger background tint. */ .havn-crm .havn-crm-event-icon, .havn-mc.is-light .havn-crm .havn-crm-event-icon { border: 1px solid rgba(31,27,22,0.08); box-shadow: 0 1px 0 rgba(31,27,22,0.03); } .havn-mc.is-light .havn-crm .havn-crm-event-icon.sms { background: #F2CFC3 !important; color: #9F3B27 !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon.email { background: #C7D6E8 !important; color: #1F4471 !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon.call { background: #C8D5BC !important; color: #3F4F36 !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon.match { background: #ECCE93 !important; color: #6E5320 !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon.task { background: #F2D58F !important; color: #6E5320 !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon.note { background: #E6DCC6 !important; color: #34302A !important; } .havn-mc.is-light .havn-crm .havn-crm-event-icon svg { width: 14px; height: 14px; stroke-width: 2; } /* Pipeline board — column headers were rendering at ink-3 (#8A8071) on a warm cream background, basically invisible. Force them dark. */ .havn-mc.is-light .havn-crm .havn-crm-board-head .name { color: #1F1B16 !important; font-weight: 800 !important; } .havn-mc.is-light .havn-crm .havn-crm-board-head .name::before { width: 8px !important; height: 8px !important; } .havn-mc.is-light .havn-crm .havn-crm-board-head .count { color: #2A2520 !important; background: #FFFFFF !important; border-color: #DCD3C2 !important; } .havn-mc.is-light .havn-crm .havn-crm-board-head .total { color: #3D352C !important; font-weight: 600 !important; } .havn-mc.is-light .havn-crm .havn-crm-board-col { background: #F1ECDF !important; border-color: #DCD3C2 !important; } /* Templates left rail — the SMS / EMAIL list was rendering at 30% opacity somewhere. Hard-set the colours. */ .havn-mc.is-light .havn-crm .havn-crm-tpl-section { color: #6E6452 !important; font-weight: 700 !important; opacity: 1 !important; } .havn-mc.is-light .havn-crm .havn-crm-tpl-item { color: #1F1B16 !important; opacity: 1 !important; } .havn-mc.is-light .havn-crm .havn-crm-tpl-item:hover { background: #F4EFE6 !important; } .havn-mc.is-light .havn-crm .havn-crm-tpl-item.is-on { background: #F0E2BD !important; color: #1F1B16 !important; font-weight: 600 !important; } /* AI INSIGHTS — the body text and Skip button were getting eaten by the gold gradient background. Force readable contrast. */ .havn-mc.is-light .havn-crm .havn-crm-ai { background: linear-gradient(135deg, #F4DBA2, #F0E2BD) !important; border-color: #B8924A !important; } .havn-mc.is-light .havn-crm .havn-crm-ai .insight { color: #2A1F0A !important; font-weight: 500 !important; } .havn-mc.is-light .havn-crm .havn-crm-ai .havn-crm-btn { background: #FFFFFF !important; color: #1F1B16 !important; border-color: #B8924A !important; } .havn-mc.is-light .havn-crm .havn-crm-ai .havn-crm-btn.is-primary { background: #1F1B16 !important; color: #FFFFFF !important; } /* Side card label + source */ .havn-mc.is-light .havn-crm .havn-crm-side-card .lbl { color: #5A5240 !important; } .havn-mc.is-light .havn-crm .havn-crm-side-card .lbl .src { color: #8A8071 !important; } /* Message bubbles — make incoming bubbles solid white with dark text, outgoing keep the gold tint but with strong contrast. */ .havn-mc.is-light .havn-crm .havn-crm-msg .bubble { background: #FFFFFF !important; color: #1F1B16 !important; border-color: #DCD3C2 !important; } .havn-mc.is-light .havn-crm .havn-crm-msg.out .bubble { background: #F0E2BD !important; color: #1F1B16 !important; border-color: #B8924A !important; } .havn-mc.is-light .havn-crm .havn-crm-msg .meta { color: #5A5240 !important; } /* Performance reports & conversion funnel — labels were unreadable. */ .havn-mc.is-light .havn-crm .havn-crm-funnel-step { background: #F4EFE6 !important; } .havn-mc.is-light .havn-crm .havn-crm-funnel-label { color: #1F1B16 !important; font-weight: 600 !important; } .havn-mc.is-light .havn-crm .havn-crm-funnel-count { color: #3D352C !important; } .havn-mc.is-light .havn-crm .havn-crm-section-head .title { color: #1F1B16 !important; } .havn-mc.is-light .havn-crm .havn-crm-section-head .sub { color: #4A4338 !important; } /* "Top sources" + chart labels */ .havn-mc.is-light .havn-crm .havn-crm-source-row { color: #1F1B16 !important; } .havn-mc.is-light .havn-crm .havn-crm-source-row .sub { color: #5A5240 !important; } .havn-mc.is-light .havn-crm .havn-crm-source-row .val { color: #1F1B16 !important; font-weight: 600 !important; } /* Empty-state placeholder text in views */ .havn-mc.is-light .havn-crm .havn-crm-empty, .havn-mc.is-light .havn-crm-empty { color: #5A5240 !important; } /* Tier-preview row was too washed out */ .havn-mc.is-light .havn-crm .havn-crm-tier-row { background: #ECE6DA !important; } .havn-mc.is-light .havn-crm .havn-crm-tier-row label, .havn-mc.is-light .havn-crm .havn-crm-tier-note { color: #3D352C !important; } .havn-mc.is-light .havn-crm .havn-crm-tier-select { color: #1F1B16 !important; background: #FFFFFF !important; border-color: #B5AB99 !important; } /* Inbox row text */ .havn-mc.is-light .havn-crm .havn-crm-inbox-item .name { color: #1F1B16 !important; } .havn-mc.is-light .havn-crm .havn-crm-inbox-item .snippet { color: #3D352C !important; } .havn-mc.is-light .havn-crm .havn-crm-smart-item { color: #3D352C !important; } .havn-mc.is-light .havn-crm .havn-crm-smart-item.is-on { color: #1F1B16 !important; font-weight: 600 !important; } /* "Type a message…" textarea readable */ .havn-mc.is-light .havn-crm .havn-crm-composer textarea, .havn-mc.is-light .havn-crm .havn-crm-composer-row input { color: #1F1B16 !important; background: #FFFFFF !important; } .havn-mc.is-light .havn-crm .havn-crm-composer textarea::placeholder, .havn-mc.is-light .havn-crm .havn-crm-composer-row input::placeholder { color: #8A8071 !important; } /* ----------------- DARK MODE ----------------- */ /* Stronger ink tokens — the 0.55 / 0.32 alpha values were too faint. */ .havn-mc:not(.is-light) .havn-crm { --c-ink-2: rgba(244,244,245,0.90) !important; --c-ink-3: rgba(244,244,245,0.70) !important; --c-ink-4: rgba(244,244,245,0.50) !important; } /* Pipeline column headers in dark — force bright white. */ .havn-mc:not(.is-light) .havn-crm .havn-crm-board-head .name { color: #FFFFFF !important; font-weight: 800 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-board-head .count { color: #F4F4F5 !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-board-head .total { color: #E8DCC0 !important; } /* Templates rail in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-section { color: #D4B370 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-item { color: #F4F4F5 !important; opacity: 1 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-tpl-item.is-on { background: rgba(212,179,112,0.18) !important; color: #FFFFFF !important; } /* AI INSIGHTS in dark — stronger contrast on the gold gradient. */ .havn-mc:not(.is-light) .havn-crm .havn-crm-ai { background: linear-gradient(135deg, rgba(212,179,112,0.22), rgba(184,146,74,0.14)) !important; border-color: #B8924A !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-ai .insight { color: #F8E9C8 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-ai .havn-crm-btn { background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.24) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-ai .havn-crm-btn.is-primary { background: #D4B370 !important; color: #1A1305 !important; border-color: #D4B370 !important; } /* Message bubbles in dark — solid surfaces, no ghost. */ .havn-mc:not(.is-light) .havn-crm .havn-crm-msg .bubble { background: rgba(255,255,255,0.07) !important; color: #F4F4F5 !important; border-color: rgba(255,255,255,0.14) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-msg.out .bubble { background: rgba(212,179,112,0.20) !important; color: #FFF6DC !important; border-color: #B8924A !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-msg .meta { color: rgba(244,244,245,0.65) !important; } /* Performance reports + funnel labels in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-funnel-step { background: rgba(255,255,255,0.05) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-funnel-label { color: #F4F4F5 !important; font-weight: 600 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-funnel-count { color: rgba(244,244,245,0.78) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-section-head .title { color: #FFFFFF !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-section-head .sub { color: rgba(244,244,245,0.78) !important; } /* Top sources rows in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-source-row { color: #F4F4F5 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-source-row .sub { color: rgba(244,244,245,0.65) !important; } /* Empty state */ .havn-mc:not(.is-light) .havn-crm .havn-crm-empty { color: rgba(244,244,245,0.70) !important; } /* Tier-preview row */ .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-row { background: rgba(255,255,255,0.05) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-row label, .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-note { color: rgba(244,244,245,0.78) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-tier-select { color: #F4F4F5 !important; background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.20) !important; } /* Inbox rows in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-inbox-item .name { color: #F4F4F5 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-inbox-item .snippet { color: rgba(244,244,245,0.75) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-smart-item { color: rgba(244,244,245,0.78) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-smart-item.is-on { color: #FFFFFF !important; } /* Composer textarea in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-composer textarea, .havn-mc:not(.is-light) .havn-crm .havn-crm-composer-row input { color: #F4F4F5 !important; background: rgba(255,255,255,0.06) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-composer textarea::placeholder, .havn-mc:not(.is-light) .havn-crm .havn-crm-composer-row input::placeholder { color: rgba(244,244,245,0.45) !important; } /* Activity timeline event icons in dark — give them a real fill so they don't look like blank dark squares. */ .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon { border: 1px solid rgba(255,255,255,0.10); } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.sms { background: rgba(200,85,61,0.28) !important; color: #F8C3B8 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.email { background: rgba(45,90,135,0.32) !important; color: #B9D4F4 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.call { background: rgba(110,128,104,0.32) !important; color: #C9DAB9 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.match { background: rgba(212,179,112,0.30) !important; color: #F4D58F !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.task { background: rgba(216,155,63,0.30) !important; color: #F4D58F !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon.note { background: rgba(255,255,255,0.10) !important; color: #F4F4F5 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-icon svg { width: 14px; height: 14px; stroke-width: 2; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-title { color: #F4F4F5 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-event-desc { color: rgba(244,244,245,0.78) !important; } /* Contact row stage chip + sub line had washed-out tokens in dark mode */ .havn-mc:not(.is-light) .havn-crm .havn-crm-contact-row .name { color: #F4F4F5 !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-contact-row .sub { color: rgba(244,244,245,0.70) !important; } /* Side-card LBL header in dark */ .havn-mc:not(.is-light) .havn-crm .havn-crm-side-card .lbl { color: rgba(244,244,245,0.72) !important; } .havn-mc:not(.is-light) .havn-crm .havn-crm-side-card .lbl .src { color: rgba(244,244,245,0.50) !important; } /* Pipeline view top KPIs in dark — make sure they render solid */ .havn-mc:not(.is-light) .havn-crm .havn-crm-pipe-summary .havn-crm-kpi .val, .havn-mc:not(.is-light) .havn-crm .havn-crm-pipe-summary .havn-crm-kpi .lbl { color: #F4F4F5 !important; } /* ========================================================================= * v2.2.36 — unified template library: header action, repeat row, custom * cards, new/edit template modal * ====================================================================== */ .havn-crm-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .havn-crm-pagehead-actions{flex:none;padding-top:6px} .havn-crm .havn-crm-newtpl{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:11px 20px!important;border-radius:11px!important;border:none!important; background:linear-gradient(135deg,#D4B370,#E8CD9A)!important;color:#1a1305!important; font-size:13px!important;font-weight:700!important;letter-spacing:.02em!important; text-transform:none!important;box-shadow:none!important;transition:filter .2s,transform .15s} .havn-crm .havn-crm-newtpl:hover{filter:brightness(1.06);transform:translateY(-1px)} .havn-crm .havn-crm-newtpl .havn-crm-ico{width:14px;height:14px} .havn-crm .havn-crm-linklike{background:none;border:none;padding:0;cursor:pointer;font:inherit; color:#D4B370;text-decoration:underline} .havn-crm-auto-empty{padding:22px;border:1px dashed rgba(212,179,112,.35);border-radius:14px; color:inherit;opacity:.85;font-size:14px;line-height:1.6} /* Repeat (recurring) row on every card */ .havn-crm-auto-recurring{display:flex;align-items:center;gap:10px;margin-top:14px; padding-top:12px;border-top:1px dashed rgba(128,128,128,.25)} .havn-crm-auto-recurring-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600} .havn-crm-auto-recurring-label .havn-crm-ico{width:13px;height:13px;opacity:.7} .havn-crm-auto-recurring-label em{font-style:normal;font-weight:400;font-size:11px;opacity:.55} .havn-crm-recurring-select{margin-left:auto;padding:6px 26px 6px 10px;border-radius:8px; font-size:12px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 9px center} .havn-crm-recurring-select:disabled{opacity:.45;cursor:not-allowed} /* Custom cards */ .havn-crm-auto-card-custom{border-style:dashed} .havn-crm-auto-card-custom.is-on{border-style:solid} .havn-crm-auto-custom-actions{display:flex;gap:10px;margin-top:12px} .havn-crm-auto-template-edit.is-danger{color:#ff7b72} /* New / edit template modal */ .havn-crm-tpl-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px} .havn-crm-tpl-modal[hidden]{display:none} .havn-crm-tpl-modal-scrim{position:absolute;inset:0;background:rgba(5,5,8,.7);backdrop-filter:blur(3px)} .havn-crm-tpl-modal-card{position:relative;width:min(620px,100%);max-height:88vh;overflow-y:auto; background:#16161c;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.6);color:#f4f4f5} .havn-crm-tpl-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .havn-crm-tpl-modal-head h3{margin:0;font-size:19px} .havn-crm-tpl-modal-x{background:none;border:none;color:inherit;font-size:26px;line-height:1;cursor:pointer;opacity:.7;padding:0} .havn-crm-tpl-modal-x:hover{opacity:1} .havn-crm-tpl-field{display:block;font-size:12.5px;font-weight:600;margin-bottom:12px;color:rgba(244,244,245,.8)} .havn-crm-tpl-field input,.havn-crm-tpl-field select,.havn-crm-tpl-field textarea{ display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:400; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#f4f4f5} .havn-crm-tpl-field textarea{resize:vertical} .havn-crm-tpl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.havn-crm-tpl-row{grid-template-columns:1fr}} .havn-crm-tpl-tags{font-size:11.5px;opacity:.65;margin:2px 0 14px} .havn-crm-tpl-tags code{background:rgba(212,179,112,.14);color:#E8CD9A;padding:1px 6px;border-radius:5px;margin-right:3px} .havn-crm-tpl-modal-foot{display:flex;align-items:center;gap:12px} .havn-crm-tpl-cancel{background:none;border:1px solid rgba(255,255,255,.16);color:inherit;border-radius:10px; padding:10px 16px;font-size:13px;cursor:pointer} .havn-crm-tpl-cancel:hover{background:rgba(255,255,255,.06)} /* Light mode */ .havn-mc:not(.is-light) .havn-crm .havn-crm-recurring-select{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#f4f4f5} .havn-mc.is-light .havn-crm .havn-crm-recurring-select{background-color:rgba(15,15,20,.04);border:1px solid rgba(15,15,20,.16);color:#1d1d22} .havn-mc.is-light .havn-crm-tpl-modal-card{background:#fff;color:#16161c;border-color:rgba(15,15,20,.12)} .havn-mc.is-light .havn-crm-tpl-field{color:rgba(22,22,28,.75)} .havn-mc.is-light .havn-crm-tpl-field input,.havn-mc.is-light .havn-crm-tpl-field select,.havn-mc.is-light .havn-crm-tpl-field textarea{ background:rgba(15,15,20,.03);border-color:rgba(15,15,20,.16);color:#16161c} .havn-mc.is-light .havn-crm-tpl-cancel{border-color:rgba(15,15,20,.2)} /* ========================================================================= * v2.2.37 — template library accordion: collapsed category rows that expand * to reveal the message copy + the Delivery panel (Auto + Repeat) * ====================================================================== */ .havn-tpl-list{display:flex;flex-direction:column;gap:12px;margin-bottom:30px} .havn-tpl-card{ border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)); transition:border-color .3s,box-shadow .3s,transform .3s} .havn-tpl-card:hover{border-color:rgba(212,179,112,.3)} .havn-tpl-card[open]{border-color:rgba(212,179,112,.45);box-shadow:0 18px 44px rgba(0,0,0,.3)} .havn-tpl-card.is-on{border-left:3px solid #D4B370} .havn-tpl-card-custom{border-style:dashed} .havn-tpl-card-custom[open],.havn-tpl-card-custom.is-on{border-style:solid} /* summary row */ .havn-tpl-card summary{ list-style:none;display:flex;align-items:center;gap:16px; padding:16px 20px;cursor:pointer;user-select:none} .havn-tpl-card summary::-webkit-details-marker{display:none} .havn-tpl-sum-chip{flex:none;width:118px} .havn-tpl-sum-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .havn-tpl-sum-titles strong{ font-family:Fraunces,Georgia,serif;font-size:16.5px;font-weight:600;letter-spacing:-.01em} .havn-tpl-sum-titles small{font-size:11.5px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .havn-tpl-sum-states{display:flex;align-items:center;gap:7px;flex:none} .havn-tpl-state{ display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px; font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase} .havn-tpl-state .havn-crm-ico{width:10px;height:10px} .havn-tpl-state.is-auto{background:rgba(212,179,112,.16);color:#E8CD9A} .havn-tpl-state.is-rec{background:rgba(138,180,248,.14);color:#A9C8FF} .havn-tpl-state.is-idle{background:rgba(255,255,255,.06);color:rgba(244,244,245,.5)} .havn-tpl-state.is-lock{background:rgba(255,255,255,.06);color:rgba(244,244,245,.55)} .havn-tpl-chev{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(255,255,255,.05);color:rgba(244,244,245,.6); transition:transform .35s cubic-bezier(.16,1,.3,1),background .2s,color .2s} .havn-tpl-chev svg{width:10px;height:6px} .havn-tpl-card[open] .havn-tpl-chev{transform:rotate(180deg);background:rgba(212,179,112,.18);color:#E8CD9A} /* expanded body */ .havn-tpl-body{padding:2px 20px 20px;border-top:1px solid rgba(255,255,255,.07)} .havn-tpl-card[open] .havn-tpl-body{animation:havnTplIn .4s cubic-bezier(.16,1,.3,1)} @keyframes havnTplIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .havn-tpl-desc{font-size:13px;line-height:1.6;opacity:.7;margin:14px 0 14px} /* Delivery panel */ .havn-tpl-delivery{ margin-top:16px;padding:16px 18px;border-radius:13px; background:rgba(212,179,112,.05);border:1px solid rgba(212,179,112,.18)} .havn-tpl-delivery-eyebrow{ display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#D4B370;margin-bottom:12px} .havn-tpl-opt{display:flex;align-items:center;gap:16px;padding:10px 0} .havn-tpl-opt + .havn-tpl-opt{border-top:1px dashed rgba(212,179,112,.18)} .havn-tpl-opt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .havn-tpl-opt-text strong{font-size:13.5px;font-weight:600} .havn-tpl-opt-text small{font-size:11.5px;opacity:.55} /* Segmented repeat control */ .havn-tpl-seg{display:inline-flex;flex:none;padding:3px;border-radius:999px;gap:2px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .havn-tpl-seg button{ border:none;background:transparent;color:rgba(244,244,245,.6);cursor:pointer; padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em; transition:background .25s,color .25s} .havn-tpl-seg button:hover{color:#f4f4f5} .havn-tpl-seg button.is-on{background:linear-gradient(135deg,#D4B370,#E8CD9A);color:#1a1305} .havn-tpl-seg.is-locked{opacity:.45} .havn-tpl-seg.is-locked button{cursor:not-allowed} .havn-tpl-locknote{display:flex;align-items:center;gap:8px;margin-top:12px; font-size:12px;opacity:.65} .havn-tpl-locknote .havn-crm-ico{width:13px;height:13px} /* tighten the message blocks inside the accordion */ .havn-tpl-body .havn-crm-auto-card-templates{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:760px){ .havn-tpl-body .havn-crm-auto-card-templates{grid-template-columns:1fr} .havn-tpl-sum-chip{display:none} .havn-tpl-sum-states .havn-tpl-state.is-idle{display:none} .havn-tpl-opt{flex-wrap:wrap} } /* light mode */ .havn-mc.is-light .havn-tpl-card{background:rgba(15,15,20,.02);border-color:rgba(15,15,20,.1)} .havn-mc.is-light .havn-tpl-sum-titles small{opacity:.6} .havn-mc.is-light .havn-tpl-state.is-idle,.havn-mc.is-light .havn-tpl-state.is-lock{background:rgba(15,15,20,.06);color:rgba(22,22,28,.55)} .havn-mc.is-light .havn-tpl-chev{background:rgba(15,15,20,.05);color:rgba(22,22,28,.55)} .havn-mc.is-light .havn-tpl-body{border-top-color:rgba(15,15,20,.08)} .havn-mc.is-light .havn-tpl-delivery{background:rgba(212,179,112,.07);border-color:rgba(176,141,74,.3)} .havn-mc.is-light .havn-tpl-seg{background:rgba(15,15,20,.04);border-color:rgba(15,15,20,.12)} .havn-mc.is-light .havn-tpl-seg button{color:rgba(22,22,28,.6)} .havn-mc.is-light .havn-tpl-seg button:hover{color:#16161c}