/* ═══════════════════════════════════════════════════════════ BASE THEME — the OS foundation (grey/white, ink accent). Originally from zacky-os-redesign-mockup.html ("warm redesign"). Applied when All overrides use the mockup's exact tokens mapped to OS classes. ═══════════════════════════════════════════════════════════ */ /* ─── Tokens: grey/white palette, ink accent ─── */ [data-palette="base"] { --bg: #F5F5F5; --surface: #F5F5F5; --surface-2: #EBEBEA; --surface-3: #E5E5E3; --card: #FFFFFF; --card-hover: #F9F9F9; --border: rgba(0,0,0,0.07); --border-2: rgba(0,0,0,0.12); --border-strong: rgba(0,0,0,0.18); --text: #1A1A1A; --text-2: #3A3A3A; --text-3: #888888; --text-4: #BBBBBB; --text-5: #DEDEDE; --text-soft: var(--text-2); --muted: var(--text-3); --muted-2: var(--text-4); /* Accent = dark ink (matches mockup --terra: #2A2A2A) */ --a: #2A2A2A; --a-2: #1A1A1A; --a-3: #444444; --a-soft: rgba(26,26,26,0.06); --a-soft-2: rgba(26,26,26,0.10); --a-soft-3: rgba(26,26,26,0.16); --a-shadow: rgba(26,26,26,0.22); --green: #6BAB7A; --green-soft: rgba(107,171,122,0.14); --red: #C0504A; --red-soft: rgba(192,80,74,0.11); --amber: #D4A820; --amber-soft: rgba(212,168,32,0.14); --txt-green: #4D8C5C; --txt-red: #C0504A; --txt-amber: #A07800; --shadow: 0 1px 3px rgba(26,26,26,0.04); --shadow-sm: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04); --shadow-md: 0 4px 18px rgba(26,26,26,0.09), 0 0 0 1px rgba(26,26,26,0.05); --shadow-lg: 0 18px 44px rgba(26,26,26,0.12); --shadow-2: var(--shadow-md); --shadow-gold: var(--shadow-md); --shadow-a: var(--shadow-md); --grid-line: rgba(26,26,26,0.05); --fg-neutral: rgba(26,26,26,0.05); --header-grad: linear-gradient(135deg, #2C2C2C 0%, #1A1A1A 100%); } /* ─── Base: parchment body ─── */ [data-palette="base"] body { font-family: 'Inter', system-ui, sans-serif; } /* ─── Sidebar ─── */ [data-palette="base"] .ct-sidebar { background: #FFFFFF !important; border-right-color: var(--border) !important; } /* ─── Brand mark: ink block, serif Z ─── */ [data-palette="base"] .ct-brand-mark { background: #1A1A1A !important; box-shadow: none !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 15px !important; color: #FFFFFF !important; } [data-palette="base"] .ct-brand-mark::after { display: none; } [data-palette="base"] .ct-brand-text h3 { font-family: 'Playfair Display', Georgia, serif !important; font-size: 14px !important; font-weight: 700 !important; color: #1A1A1A !important; letter-spacing: 0.02em !important; } [data-palette="base"] .ct-brand-text p { font-size: 9.5px !important; font-weight: 500 !important; color: #A89F94 !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; } /* ─── Search input ─── */ [data-palette="base"] .zc-search-input, [data-palette="base"] .ct-cmdk-trigger { background: transparent !important; border-color: rgba(26,26,26,0.13) !important; color: #1A1A1A !important; } [data-palette="base"] .zc-search-input::placeholder { color: #C8C0B8 !important; } /* ─── Nav items ─── */ [data-palette="base"] .ct-nav-label { color: #C8C0B8 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; letter-spacing: 0.13em !important; } [data-palette="base"] .ct-nav-item { color: #5A5550 !important; border-left: 2px solid transparent; border-radius: 0 !important; padding-left: 16px !important; } [data-palette="base"] .ct-nav-item .icon { color: #5A5550 !important; opacity: 0.8; } [data-palette="base"] .ct-nav-item:hover { background: rgba(26,26,26,0.04) !important; color: #2C2C2C !important; } [data-palette="base"] .ct-nav-item:hover .icon { opacity: 1 !important; color: #2C2C2C !important; } [data-palette="base"] .ct-nav-item.active { background: rgba(26,26,26,0.06) !important; color: #1A1A1A !important; border-left-color: #1A1A1A !important; font-weight: 600 !important; } [data-palette="base"] .ct-nav-item.active .icon { color: #1A1A1A !important; opacity: 1 !important; } /* ─── Sidebar footer / avatar ─── */ [data-palette="base"] .ct-sidebar-footer { border-top-color: var(--border) !important; } [data-palette="base"] .ct-avatar-img { background: #1A1A1A !important; color: #FFFFFF !important; } [data-palette="base"] .ct-avatar-text strong { color: #1A1A1A !important; } [data-palette="base"] .ct-avatar-text span { color: #A89F94 !important; } /* ─── Topbar ─── */ [data-palette="base"] .ct-topbar { background: rgba(245,240,232,0.85) !important; backdrop-filter: blur(8px) !important; border-bottom-color: rgba(26,26,26,0.13) !important; } [data-palette="base"] .ct-breadcrumb strong { color: #1A1A1A !important; } [data-palette="base"] .ct-breadcrumb span { color: #A89F94 !important; } /* ─── Page header ─── */ [data-palette="base"] .ct-page-header { padding: 28px 28px 0 !important; } [data-palette="base"] .eyebrow { font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #A89F94 !important; margin-bottom: 5px !important; } [data-palette="base"] .ct-page-title { font-family: 'Playfair Display', Georgia, serif !important; font-size: 22px !important; font-weight: 600 !important; color: #1A1A1A !important; letter-spacing: -0.01em !important; line-height: 1.1 !important; } [data-palette="base"] .ct-page-sub { font-size: 12px !important; color: #A89F94 !important; margin-top: 3px !important; } /* ─── Hero block (heatmap): transparent wrapper, card on the inner grid ─── */ [data-palette="base"] .ct-hero { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 28px !important; padding: 0 !important; border-radius: 0 !important; } [data-palette="base"] .ct-hero::before { display: none !important; } [data-palette="base"] .ct-hero-glow { display: none !important; } /* Eyebrow becomes a section-head row */ [data-palette="base"] .ct-hero-eyebrow { display: flex !important; align-items: center !important; gap: 7px !important; padding: 22px 0 12px !important; font-size: 10px !important; } [data-palette="base"] .ct-hero-eyebrow .pulse { display: none !important; } [data-palette="base"] .ct-hero-eyebrow-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #A89F94; white-space: nowrap; } [data-palette="base"] .ct-hero-eyebrow-dot { width: 3px; height: 3px; border-radius: 50%; background: #C8C0B8; flex-shrink: 0; } [data-palette="base"] .ct-hero-eyebrow-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #C8C0B8; letter-spacing: 0.04em; white-space: nowrap; } [data-palette="base"] .ct-hero-eyebrow-divider { flex: 1; height: 1px; background: rgba(26,26,26,0.07); } /* Heatmap grid gets the card treatment */ [data-palette="base"] .zc-heatmap { background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.10) !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04) !important; border-radius: 14px !important; padding: 18px 20px !important; } /* Legend sits below the card, plain */ [data-palette="base"] .zc-legend { padding: 10px 0 0 !important; } /* ─── Section headers (inline styled in current OS — override via .zc-wn-header) ─── */ [data-palette="base"] .zc-wn-header, [data-palette="base"] .zc-wn-label { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #A89F94 !important; } [data-palette="base"] .zc-wn-count { color: #C8C0B8 !important; } /* ─── What's Next section: full-width neumorphic inset band ─── */ [data-palette="base"] .zc-wn-section { background: transparent !important; border: none !important; padding: 12px 0 12px !important; margin-top: 4px !important; } [data-palette="base"] .zc-wn-header { padding: 0 20px 8px !important; } [data-palette="base"] .zc-wn-wrapper { background: #F5F5F5 !important; border-radius: 0 !important; border: none !important; box-shadow: inset 0 7px 14px rgba(0,0,0,0.13), inset 0 -7px 14px rgba(0,0,0,0.10) !important; margin: 0 !important; padding: 10px 0 !important; height: fit-content !important; min-height: 0 !important; } [data-palette="base"] .zc-wn-track { padding: 2px 20px 2px !important; gap: 10px !important; } [data-palette="base"] .zc-wn-right-fade { display: none !important; } /* ─── WN cards: white, shadow-sm, 224px, left-edge type stripe ─── */ [data-palette="base"] .zc-wn-card { width: 224px !important; min-height: 142px !important; height: auto !important; background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.13) !important; border-radius: 12px !important; padding: 14px 16px !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04) !important; gap: 0 !important; display: flex !important; flex-direction: column !important; } [data-palette="base"] .zc-wn-card:hover { box-shadow: 0 4px 18px rgba(26,26,26,0.09), 0 0 0 1px rgba(26,26,26,0.05) !important; transform: translateY(-2px) !important; border-color: rgba(26,26,26,0.13) !important; } /* Left-edge stripe via ::before */ [data-palette="base"] .zc-wn-card::before { content: '' !important; position: absolute !important; inset: unset !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; border-radius: 12px 0 0 12px !important; pointer-events: none !important; background: transparent !important; } [data-palette="base"] .zc-wn-card[data-level="red"]::before { background: #C0504A !important; } [data-palette="base"] .zc-wn-card[data-level="amber"]::before { background: #D4A820 !important; } [data-palette="base"] .zc-wn-card[data-level="green"]::before { background: #6BAB7A !important; } [data-palette="base"] .zc-wn-card[data-level="neutral"]::before { background: #C8C0B8 !important; } /* ─── WN chip (icon circle) ─── */ [data-palette="base"] .zc-wn-chip { width: 32px !important; height: 32px !important; border-radius: 8px !important; margin-bottom: 12px !important; } /* ─── WN card text ─── */ [data-palette="base"] .zc-wn-card-proj { font-family: 'JetBrains Mono', monospace !important; font-size: 8.5px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #A89F94 !important; margin-bottom: 3px !important; } [data-palette="base"] .zc-wn-card-priority { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 6px !important; } [data-palette="base"] .zc-wn-card-body { font-size: 13px !important; font-weight: 500 !important; color: #1A1A1A !important; line-height: 1.4 !important; } :root:not([data-theme="dark"])[data-palette="base"] .zc-wn-card-body { color: #1A1A1A !important; } :root:not([data-theme="dark"])[data-palette="base"] .zc-wn-card-proj { color: #A89F94 !important; } :root:not([data-theme="dark"])[data-palette="base"] .zc-wn-card { border-color: rgba(26,26,26,0.13) !important; } /* ─── WN add-task card ─── */ [data-palette="base"] .zc-wn-add { width: 200px !important; height: auto !important; min-height: unset !important; border: 1px dashed #D8D0C8 !important; border-radius: 10px !important; color: #C8C0B8 !important; background: transparent !important; box-shadow: none !important; padding: 10px 12px !important; } [data-palette="base"] .zc-wn-add:hover { border-color: #1A1A1A !important; color: #1A1A1A !important; } /* ─── KPI tiles: neumorphic inset ─── */ [data-palette="base"] .ct-tile { background: #FFFFFF !important; border: none !important; box-shadow: inset 4px 4px 10px rgba(0,0,0,0.13), inset -3px -3px 8px rgba(255,255,255,0.88) !important; } [data-palette="base"] .ct-tile:hover { box-shadow: inset 5px 5px 12px rgba(0,0,0,0.16), inset -3px -3px 9px rgba(255,255,255,0.92) !important; } /* ─── Project grid / cards ─── */ [data-palette="base"] .zc-proj-grid { padding: 0 28px 28px !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; } [data-palette="base"] .zc-proj-card, [data-palette="base"] .zc-proj-card-glow { background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.13) !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04) !important; border-radius: 12px !important; } [data-palette="base"] .zc-proj-card:hover, [data-palette="base"] .zc-proj-card-glow:hover { border-color: rgba(26,26,26,0.13) !important; box-shadow: 0 4px 18px rgba(26,26,26,0.09), 0 0 0 1px rgba(26,26,26,0.05) !important; transform: translateY(-1px); } /* Project client tag — inverted */ [data-palette="base"] .zc-tag, [data-palette="base"] .ct-proj-tag, [data-palette="base"] .proj-client-tag { background: #1A1A1A !important; color: #FFFFFF !important; border: none !important; } /* Project phase bars: dark ink fill */ [data-palette="base"] .zc-proj-block-done { background: #1A1A1A !important; opacity: 0.85 !important; } [data-palette="base"] .zc-proj-block-active { background: #1A1A1A !important; opacity: 0.28 !important; animation: none !important; } [data-palette="base"] .zc-proj-block-upcoming { background: #E5DFD3 !important; border-color: rgba(26,26,26,0.10) !important; } [data-palette="base"] .zc-proj-phase-label { color: #D8D0C8 !important; } [data-palette="base"] .zc-proj-phase-label.active { color: #1A1A1A !important; font-weight: 700 !important; } /* Project milestones */ [data-palette="base"] .zc-proj-milestone.done .zc-proj-mi { color: #6BAB7A !important; } [data-palette="base"] .zc-proj-milestone.active .zc-proj-mi { color: #1A1A1A !important; } [data-palette="base"] .zc-proj-milestone.active .zc-proj-mt { color: #1A1A1A !important; font-weight: 500 !important; } [data-palette="base"] .zc-proj-milestone.next .zc-proj-mi { color: #D8D0C8 !important; } /* ─── Heatmap tag ─── */ [data-palette="base"] .zc-tag { background: #E5DFD3 !important; color: #1A1A1A !important; } /* ─── Primary button: blue ─── */ [data-palette="base"] .ct-btn-primary { background: #4A80C4 !important; border-color: #4A80C4 !important; box-shadow: 0 2px 10px rgba(74,128,196,0.22) !important; } [data-palette="base"] .ct-btn-primary:hover { background: #3A6FB3 !important; border-color: #3A6FB3 !important; box-shadow: 0 5px 20px rgba(74,128,196,0.28) !important; } /* ─── Hide topbar (title repeated in page content) ─── */ [data-palette="base"] .ct-topbar { display: none !important; } /* ─── Search bar: neumorphic inset ─── */ [data-palette="base"] .zc-search-row { background: #F5F5F5 !important; box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 6px rgba(255,255,255,0.80) !important; border: none !important; } [data-palette="base"] .zc-search-row:focus-within { box-shadow: inset 4px 4px 9px rgba(0,0,0,0.16), inset -2px -2px 7px rgba(255,255,255,0.85) !important; } /* ─── Workflow cards: white, no left border ─── */ [data-palette="base"] .zc-wf-card { background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.10) !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04) !important; } [data-palette="base"] .zc-wf-card:hover { box-shadow: 0 4px 18px rgba(26,26,26,0.09), 0 0 0 1px rgba(26,26,26,0.05) !important; } /* ─── Active filter tabs: ink not yellow ─── */ [data-palette="base"] .zc-subview-btn.active { background: rgba(26,26,26,0.07) !important; color: #1A1A1A !important; border-color: transparent !important; } [data-palette="base"] .zc-tx-tab.active { color: #4D8C5C !important; background: rgba(107,171,122,0.10) !important; border-bottom-color: #4D8C5C !important; } [data-palette="base"] .zc-tx-tab.active .zc-tx-tab-count { color: #4D8C5C !important; background: rgba(107,171,122,0.14) !important; } /* ─── Client cards: white background ─── */ [data-palette="base"] .zc-client-card { background: #FFFFFF !important; } /* ─── Phase tracker: thin capsule bars ─── */ [data-palette="base"] .zc-pd-phase { gap: 7px !important; } [data-palette="base"] .zc-pd-phase-block { height: 6px !important; border-radius: 99px !important; animation: none !important; } [data-palette="base"] .zc-pd-phase.done .zc-pd-phase-block { background: #4A80C4 !important; opacity: 1 !important; } [data-palette="base"] .zc-pd-phase.active .zc-pd-phase-block { background: #4A80C4 !important; opacity: 0.45 !important; animation: zcBlockPulse 2s ease-in-out infinite !important; } [data-palette="base"] .zc-pd-phase.upcoming .zc-pd-phase-block { background: #E2DED9 !important; border: none !important; } [data-palette="base"] .zc-pd-phase.done .zc-pd-phase-name { color: #4A80C4 !important; font-weight: 600 !important; } [data-palette="base"] .zc-pd-phase.active .zc-pd-phase-name { color: #4A80C4 !important; font-weight: 600 !important; } [data-palette="base"] .zc-pd-phase.upcoming .zc-pd-phase-name { color: #C8C0B8 !important; font-weight: 400 !important; } /* ─── Action item cards ─── */ [data-palette="base"] .zc-pd-ai-card { width: 280px !important; height: 200px !important; padding: 16px 18px 16px 22px !important; border-radius: 12px !important; background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.10) !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07) !important; } [data-palette="base"] .zc-pd-ai-card::before { content: '' !important; position: absolute !important; inset: unset !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; border-radius: 0 !important; pointer-events: none; } [data-palette="base"] .zc-pd-ai-card[data-level="green"]::before { background: #6BAB7A !important; } [data-palette="base"] .zc-pd-ai-card[data-level="amber"]::before { background: #D4A820 !important; } [data-palette="base"] .zc-pd-ai-card[data-level="neutral"]::before { background: #A89F94 !important; } [data-palette="base"] .zc-pd-ai-done::before { background: #6BAB7A !important; } [data-palette="base"] .zc-pd-ai-card:hover { border-color: rgba(26,26,26,0.18) !important; } [data-palette="base"] .zc-pd-ai-done { border: 2px dashed rgba(26,26,26,0.25) !important; box-shadow: none !important; background: #FFFFFF !important; } [data-palette="base"] .zc-pd-ai-done::before { background: none !important; } [data-palette="base"] .zc-pd-ai-chip { background: rgba(26,26,26,0.06) !important; } [data-palette="base"] .zc-pd-ai-chip svg { stroke: #1A1A1A !important; } [data-palette="base"] .zc-pd-ai-done .zc-pd-ai-chip { background: rgba(107,171,122,0.18) !important; } [data-palette="base"] .zc-pd-ai-done .zc-pd-ai-chip svg { stroke: #4D8C5C !important; } [data-palette="base"] .zc-pd-ai-num { color: #C8C0B8 !important; } [data-palette="base"] .zc-pd-ai-status { color: #A89F94 !important; } [data-palette="base"] .zc-pd-ai-done .zc-pd-ai-status { color: #4D8C5C !important; } [data-palette="base"] .zc-pd-ai-body { color: #1A1A1A !important; } [data-palette="base"] .zc-pd-ai-done .zc-pd-ai-body { color: #C8C0B8 !important; } [data-palette="base"] .zc-pd-ai-add { border-color: rgba(26,26,26,0.12) !important; } /* ─── Inset cards (Contact/Cost/Files): match KPI tile depth ─── */ [data-palette="base"] .zc-inset-card { background: #F5F5F5 !important; box-shadow: inset 4px 4px 10px rgba(0,0,0,0.13), inset -3px -3px 8px rgba(255,255,255,0.88) !important; } /* ─── Links using --a var: ink not gold ─── */ [data-palette="base"] span[style*="color:var(--a)"], [data-palette="base"] button[style*="color:var(--a)"], [data-palette="base"] .zc-client-email { color: #1A1A1A !important; } /* ─── Contact cards on client detail page: white not grey ─── */ [data-palette="base"] .zc-contact-card { background: #FFFFFF !important; } /* ─── Theme switch knob: no orange ─── */ [data-palette="base"] .ct-theme-switch::after { background: #A89F94 !important; } /* ═══════════════════════════════════════════════════════ MOCKUP PROJECT CARD STRUCTURE (base palette only) .proj-card added alongside .zc-proj-card in JS ═══════════════════════════════════════════════════════ */ [data-palette="base"] .proj-card { display: flex !important; flex-direction: column !important; gap: 0 !important; height: auto !important; min-height: 210px !important; padding: 18px !important; } [data-palette="base"] .proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } [data-palette="base"] .proj-status { margin-left: auto; } [data-palette="base"] .proj-client-tag { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2A2A2A; background: rgba(26,26,26,0.07); padding: 3px 7px; border-radius: 3px; } [data-palette="base"] .proj-status { width: 7px; height: 7px; border-radius: 50%; background: #6BAB7A; box-shadow: 0 0 0 2px rgba(107,171,122,0.25); flex-shrink: 0; margin-top: 2px; animation: basestatuspulse 2.8s ease-in-out infinite; } [data-palette="base"] .proj-status.inactive { background: #C8C0B8; box-shadow: none; animation: none; } @keyframes basestatuspulse { 0%,100% { box-shadow: 0 0 0 2px rgba(107,171,122,0.25); } 50% { box-shadow: 0 0 0 4px rgba(107,171,122,0); } } [data-palette="base"] .proj-name { font-size: 14px; font-weight: 600; color: #1A1A1A; line-height: 1.3; margin-bottom: 3px; } [data-palette="base"] .proj-phase { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #A89F94; letter-spacing: 0.06em; margin-bottom: 12px; } [data-palette="base"] .proj-progress-wrap { margin-bottom: 10px; } [data-palette="base"] .proj-progress-meta { display: flex; justify-content: space-between; margin-bottom: 5px; } [data-palette="base"] .proj-progress-phase, [data-palette="base"] .proj-progress-pct { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #A89F94; letter-spacing: 0.04em; } [data-palette="base"] .proj-progress-track { height: 6px; background: #E8E4DC; border-radius: 99px; overflow: hidden; } [data-palette="base"] .proj-progress-fill { height: 100%; background: #4A80C4; border-radius: 99px; } [data-palette="base"] .proj-tasks { flex: 1; overflow: hidden; } [data-palette="base"] .proj-task { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: #A89F94; padding: 2.5px 0; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-palette="base"] .proj-task-dot { width: 4px; height: 4px; border-radius: 50%; background: #D8D0C8; flex-shrink: 0; margin-top: 5px; } [data-palette="base"] .proj-task-dot.done { background: #6BAB7A; } [data-palette="base"] .proj-task-dot.next { background: #1A1A1A; } /* ═══════════════════════════════════════════════════════════ CONDENSED LAYOUT — tighter spacing throughout ═══════════════════════════════════════════════════════════ */ /* ─── Page header: compact, hide timestamp eyebrow ─── */ [data-palette="base"] .ct-page-header { padding: 14px 20px 10px !important; } [data-palette="base"] .ct-page-header .eyebrow { display: none !important; } [data-palette="base"] .ct-page-title { font-size: 17px !important; line-height: 1.2 !important; } [data-palette="base"] .ct-page-sub { font-size: 11px !important; margin-top: 1px !important; } /* ─── KPI tiles: inline value + label, shorter ─── */ [data-palette="base"] .ct-tile { padding: 9px 12px !important; display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 10px !important; } [data-palette="base"] .ct-tile-header { flex: 1 !important; margin-bottom: 0 !important; justify-content: flex-start !important; } [data-palette="base"] .ct-tile-label { font-size: 10px !important; } [data-palette="base"] .ct-kpi-value { font-size: 20px !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } [data-palette="base"] .ct-kpi-footer { display: none !important; } /* ─── WN cards: chip left, text right via CSS grid ─── */ [data-palette="base"] .zc-wn-card { display: grid !important; grid-template-columns: 26px 1fr !important; grid-template-rows: auto auto auto !important; column-gap: 9px !important; width: 200px !important; height: auto !important; min-height: unset !important; padding: 10px 12px !important; } [data-palette="base"] .zc-wn-chip { grid-column: 1 !important; grid-row: 1 / 4 !important; width: 26px !important; height: 26px !important; border-radius: 6px !important; margin-bottom: 0 !important; align-self: start !important; margin-top: 1px !important; } [data-palette="base"] .zc-wn-card-proj { grid-column: 2 !important; grid-row: 1 !important; margin-bottom: 1px !important; } [data-palette="base"] .zc-wn-card-priority { grid-column: 2 !important; grid-row: 2 !important; margin-bottom: 4px !important; } [data-palette="base"] .zc-wn-card-body { grid-column: 2 !important; grid-row: 3 !important; font-size: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Heatmap host: tighter top margin */ [data-palette="base"] #zcHeatmapHost { margin-top: 0 !important; } [data-palette="base"] .ct-hero-eyebrow { padding: 14px 0 8px !important; } /* ─── Project grid: tighter gap + padding ─── */ [data-palette="base"] .zc-proj-grid { padding: 0 20px 20px !important; gap: 8px !important; } /* ─── Project cards: compact padding ─── */ [data-palette="base"] .proj-card { padding: 11px 12px !important; height: 210px !important; min-height: unset !important; overflow: hidden !important; } [data-palette="base"] .proj-card-top { margin-bottom: 7px !important; } [data-palette="base"] .proj-name { font-size: 13px; margin-bottom: 2px !important; } [data-palette="base"] .proj-phase { margin-bottom: 8px !important; } [data-palette="base"] .proj-progress-track { height: 5px !important; } [data-palette="base"] .proj-progress-wrap { margin-bottom: 8px !important; } [data-palette="base"] .proj-task { padding: 1.5px 0 !important; font-size: 11px !important; } /* ═══════════════════════════════════════════════════════════ DARK MODE — Deep Navy Applied when Higher specificity (0,2,0) beats base-light overrides (0,1,0) ═══════════════════════════════════════════════════════════ */ /* ─── Tokens ─── */ [data-palette="base"][data-theme="dark"] { --bg: #0B1120; --surface: #121D32; --surface-2: #162038; --surface-3: #1A253E; --card: #1A253E; --card-hover: #1F2C48; --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.18); --text: #EEF2FF; --text-2: #A0B4CC; --text-3: #6B83A8; --text-4: #4A6080; --text-5: #2E4060; --text-soft: var(--text-2); --muted: var(--text-3); --a: #4D7BFF; --a-2: #3A66E8; --a-3: #6B93FF; --a-soft: rgba(77,123,255,0.12); --a-soft-2: rgba(77,123,255,0.18); --green: #34C98A; --green-soft: rgba(52,201,138,0.14); --red: #F06B6B; --red-soft: rgba(240,107,107,0.14); --amber: #FBBF24; --amber-soft: rgba(251,191,36,0.14); --txt-green: #34C98A; --txt-red: #F06B6B; --txt-amber: #FBBF24; --shadow: 0 1px 3px rgba(0,0,0,0.40); --shadow-sm: 0 1px 4px rgba(0,0,0,0.50); --shadow-md: 0 4px 18px rgba(0,0,0,0.55); --shadow-lg: 0 18px 44px rgba(0,0,0,0.65); --header-grad: linear-gradient(135deg, #0A0F1C 0%, #111622 100%); --grid-line: rgba(255,255,255,0.05); --fg-neutral: rgba(255,255,255,0.05); } /* ─── Body ─── */ [data-palette="base"][data-theme="dark"] body { background: #0B1120 !important; color: #EEF2FF !important; } /* ─── Sidebar ─── */ [data-palette="base"][data-theme="dark"] .ct-sidebar { background: #111A2E !important; border-right-color: rgba(255,255,255,0.07) !important; } [data-palette="base"][data-theme="dark"] .ct-brand-mark { background: #EEF2FF !important; color: #0F1117 !important; } [data-palette="base"][data-theme="dark"] .ct-brand-text h3 { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .ct-brand-text p { color: #6B7FA3 !important; } [data-palette="base"][data-theme="dark"] .ct-nav-label { color: #5B6E90 !important; } [data-palette="base"][data-theme="dark"] .ct-nav-item { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .ct-nav-item .icon { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .ct-nav-item:hover { background: rgba(255,255,255,0.05) !important; color: #8B9DC3 !important; } [data-palette="base"][data-theme="dark"] .ct-nav-item.active { background: rgba(255,255,255,0.07) !important; color: #EEF2FF !important; border-left-color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .ct-nav-item.active .icon { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .ct-sidebar-footer { border-top-color: rgba(255,255,255,0.07) !important; } [data-palette="base"][data-theme="dark"] .ct-avatar-img { background: #EEF2FF !important; color: #0F1117 !important; } [data-palette="base"][data-theme="dark"] .ct-avatar-text strong { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .ct-avatar-text span { color: #6B7FA3 !important; } [data-palette="base"][data-theme="dark"] .zc-scheme-picker { background: #121D32 !important; border-color: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-theme="dark"] .zc-scheme-picker-label { color: #6B83A8 !important; } [data-palette="base"][data-theme="dark"] .zc-scheme-name { color: #EEF2FF !important; } /* ─── Page header ─── */ [data-palette="base"][data-theme="dark"] .eyebrow { color: #6B83A8 !important; } [data-palette="base"][data-theme="dark"] .ct-page-title { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .ct-page-sub { color: #6B83A8 !important; } /* ─── Search bar ─── */ [data-palette="base"][data-theme="dark"] .zc-search-row { background: #0B1120 !important; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.55), inset -2px -2px 5px rgba(255,255,255,0.04) !important; } [data-palette="base"][data-theme="dark"] .zc-search-input, [data-palette="base"][data-theme="dark"] .ct-cmdk-trigger { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-search-input::placeholder { color: #4A6080 !important; } /* ─── KPI tiles ─── */ [data-palette="base"][data-theme="dark"] .ct-tile { background: #1A253E !important; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.50), inset -2px -2px 6px rgba(255,255,255,0.04) !important; } /* ─── Heatmap ─── */ [data-palette="base"][data-theme="dark"] .zc-heatmap { background: #1A253E !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.40) !important; } [data-palette="base"][data-theme="dark"] .ct-hero-eyebrow-label { color: #6B83A8; } [data-palette="base"][data-theme="dark"] .ct-hero-eyebrow-count { color: #4A6080; } [data-palette="base"][data-theme="dark"] .ct-hero-eyebrow-divider { background: rgba(255,255,255,0.06); } /* ─── WN section / tray ─── */ [data-palette="base"][data-theme="dark"] .zc-wn-header, [data-palette="base"][data-theme="dark"] .zc-wn-label { color: #6B83A8 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-count { color: #4A6080 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-wrapper { background: #0B1120 !important; box-shadow: inset 0 7px 14px rgba(0,0,0,0.55), inset 0 -7px 14px rgba(0,0,0,0.40) !important; } /* ─── WN cards ─── */ [data-palette="base"][data-theme="dark"] .zc-wn-card { background: #1A253E !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; } [data-palette="base"][data-theme="dark"] .zc-wn-card:hover { border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.55) !important; } [data-palette="base"][data-theme="dark"] .zc-wn-card-proj { color: #6B83A8 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-card-body { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-wn-add { border-color: rgba(255,255,255,0.10) !important; color: #4A6080 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-add:hover { border-color: rgba(255,255,255,0.25) !important; color: #EEF2FF !important; } /* ─── Project cards ─── */ [data-palette="base"][data-theme="dark"] .zc-proj-card, [data-palette="base"][data-theme="dark"] .zc-proj-card-glow { background: #1A253E !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.40) !important; } [data-palette="base"][data-theme="dark"] .proj-client-tag { background: rgba(255,255,255,0.10) !important; color: #8B9DC3 !important; } [data-palette="base"][data-theme="dark"] .proj-name { color: #EEF2FF; } [data-palette="base"][data-theme="dark"] .proj-phase { color: #6B83A8; } [data-palette="base"][data-theme="dark"] .proj-progress-track { background: rgba(255,255,255,0.08); } [data-palette="base"][data-theme="dark"] .proj-progress-fill { background: #EEF2FF; } [data-palette="base"][data-theme="dark"] .proj-task { color: #6B83A8; } [data-palette="base"][data-theme="dark"] .proj-task-dot { background: #4A6080; } [data-palette="base"][data-theme="dark"] .proj-task-dot.done { background: #34C98A; } [data-palette="base"][data-theme="dark"] .proj-task-dot.next { background: #EEF2FF; } [data-palette="base"][data-theme="dark"] .zc-proj-block-upcoming { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.05) !important; } [data-palette="base"][data-theme="dark"] .zc-proj-phase-label { color: #4A6080 !important; } /* ─── Workflow / client cards ─── */ [data-palette="base"][data-theme="dark"] .zc-wf-card { background: #1A253E !important; border-color: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-theme="dark"] .zc-client-card { background: #1A253E !important; } /* ─── Section labels ─── */ [data-palette="base"][data-theme="dark"] .zc-wn-header, [data-palette="base"][data-theme="dark"] .zc-wn-label, [data-palette="base"][data-theme="dark"] .zc-proj-section-label { color: #6B83A8 !important; } /* ─── Project detail section panels ─── */ [data-palette="base"][data-theme="dark"] .zc-pd-section { background: #1A253E !important; border-color: rgba(255,255,255,0.07) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-section-label { color: #6B83A8 !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* ─── Inset cards (Contact/Cost/Files) ─── */ [data-palette="base"][data-theme="dark"] .zc-inset-card { background: #0B1120 !important; box-shadow: inset 4px 4px 10px rgba(0,0,0,0.55), inset -3px -3px 8px rgba(255,255,255,0.04) !important; } /* ─── Phase tracker ─── */ [data-palette="base"][data-theme="dark"] .zc-pd-phase.done .zc-pd-phase-block { background: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-pd-phase.active .zc-pd-phase-block { background: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-pd-phase.done .zc-pd-phase-name, [data-palette="base"][data-theme="dark"] .zc-pd-phase.active .zc-pd-phase-name { color: #EEF2FF !important; } /* ─── Action item cards ─── */ [data-palette="base"][data-theme="dark"] .zc-pd-ai-card { background: #1A253E !important; border-color: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-done { background: #1A253E !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-chip { background: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-chip svg { stroke: #8B9DC3 !important; } html[data-palette="base"][data-theme="dark"] .zc-pd-ai-body { color: #EEF2FF !important; } html[data-palette="base"][data-theme="dark"] .zc-pd-ai-done .zc-pd-ai-body { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-num { color: #4A6080 !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-status { color: #6B83A8 !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-done-stamp { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-done .zc-pd-ai-chip { background: rgba(255,255,255,0.10) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-done .zc-pd-ai-chip svg { stroke: #A0B4CC !important; } /* ─── Warm active task card text (uses different elements to zc-pd-ai-body) ─── */ [data-palette="base"][data-theme="dark"] .zc-pd-ai-title { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-desc { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-date { color: #A0B4CC !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-avatar { background: rgba(255,255,255,0.18) !important; color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-footer { border-top-color: rgba(255,255,255,0.14) !important; } [data-palette="base"][data-theme="dark"] .zc-pd-ai-dots { color: rgba(255,255,255,0.45) !important; } /* ─── Primary button ─── */ [data-palette="base"][data-theme="dark"] .ct-btn-primary { background: #4D7BFF !important; border-color: #4D7BFF !important; box-shadow: 0 2px 14px rgba(77,123,255,0.35) !important; } [data-palette="base"][data-theme="dark"] .ct-btn-primary:hover { background: #3A66E8 !important; border-color: #3A66E8 !important; } /* ─── Theme switch ─── */ [data-palette="base"][data-theme="dark"] .ct-theme-switch::after { background: #6B83A8 !important; } /* ═══════════════════════════════════════════════════════════ PROJECT DETAIL — Editorial panels ═══════════════════════════════════════════════════════════ */ /* Sections become bordered panels */ [data-palette="base"] .zc-pd-section { border: 1px solid rgba(26,26,26,0.09) !important; border-radius: 6px !important; background: #FFFFFF !important; padding: 0 !important; margin: 0 20px 14px !important; overflow: hidden !important; } [data-palette="base"] .zc-pd-header + .zc-pd-section { margin-top: 18px !important; } [data-palette="base"] .zc-pd-section:last-child { padding-bottom: 50vh !important; } /* Section label = panel header */ [data-palette="base"] .zc-pd-section-label { display: block !important; padding: 11px 16px !important; border-bottom: 1px solid rgba(26,26,26,0.07) !important; font-size: 9.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; color: #A89F94 !important; font-family: 'JetBrains Mono', monospace !important; margin-bottom: 0 !important; } /* Action items header div (has counter) */ [data-palette="base"] .zc-pd-section > div[style*="align-items:baseline"] { padding: 11px 16px !important; border-bottom: 1px solid rgba(26,26,26,0.07) !important; margin-bottom: 0 !important; } [data-palette="base"] #zcAiCounter { color: #C8C0B8 !important; font-size: 10px !important; } /* Content padding per section type */ [data-palette="base"] .zc-pd-tracker { padding: 16px !important; } [data-palette="base"] .zc-pd-ai-track { padding: 16px !important; gap: 10px !important; } [data-palette="base"] .zc-ai-tile-wrapper > div { padding: 0 !important; } [data-palette="base"] .zc-wf-grid { padding: 16px !important; } [data-palette="base"] .zc-platform-chips { padding: 14px 16px !important; } [data-palette="base"] .zc-pd-section > div[style*="gap:14px"] { padding: 16px !important; } /* Inset cards (Contact / Cost / Files): flat bordered */ [data-palette="base"] .zc-inset-card { border-radius: 5px !important; border: 1px solid rgba(26,26,26,0.09) !important; background: #FFFFFF !important; box-shadow: none !important; } /* ─── AI cards: editorial flex layout ─── */ [data-palette="base"] .zc-pd-ai-card { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; grid-template-rows: unset !important; width: 280px !important; height: 200px !important; min-height: unset !important; padding: 16px 18px 16px 22px !important; border-radius: 12px !important; border-left: none !important; box-shadow: 0 1px 4px rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04) !important; gap: 0 !important; overflow: hidden !important; } [data-palette="base"] .zc-pd-ai-card:hover { box-shadow: 0 4px 18px rgba(26,26,26,0.09), 0 0 0 1px rgba(26,26,26,0.05) !important; transform: translateY(-2px) !important; } [data-palette="base"] .zc-pd-ai-card::before { display: block !important; } /* Card header row: chip + task number */ [data-palette="base"] .zc-pd-ai-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; flex-shrink: 0 !important; } [data-palette="base"] .zc-pd-ai-tag { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; font-family: 'JetBrains Mono', monospace !important; padding: 4px 9px !important; border-radius: 4px !important; } [data-palette="base"] .zc-pd-ai-num { font-size: 9px !important; color: #C8C0B8 !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; letter-spacing: 0.08em !important; grid-column: unset !important; grid-row: unset !important; margin-bottom: 0 !important; } /* Title: bold task name */ [data-palette="base"] .zc-pd-ai-title { font-size: 13.5px !important; font-weight: 700 !important; color: #1A1A1A !important; line-height: 1.4 !important; margin-bottom: 5px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } /* Description: notes text */ [data-palette="base"] .zc-pd-ai-desc { font-size: 11.5px !important; font-weight: 400 !important; color: #888888 !important; line-height: 1.5 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; flex: 1 !important; } /* Three-dot menu indicator */ [data-palette="base"] .zc-pd-ai-dots { font-size: 16px !important; color: #C8C0B8 !important; line-height: 1 !important; letter-spacing: 0 !important; cursor: pointer !important; } /* Footer: avatar + date */ [data-palette="base"] .zc-pd-ai-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid rgba(0,0,0,0.07) !important; } [data-palette="base"] .zc-pd-ai-avatar { width: 26px !important; height: 26px !important; border-radius: 6px !important; background: #2A2A2A !important; color: #FFFFFF !important; font-size: 10px !important; font-weight: 700 !important; font-family: 'JetBrains Mono', monospace !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } [data-palette="base"] .zc-pd-ai-date { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-family: 'JetBrains Mono', monospace !important; color: #A89F94 !important; } /* Body: kept for done card ghost text */ [data-palette="base"] .zc-pd-ai-body { grid-column: unset !important; grid-row: unset !important; font-size: 13px !important; font-weight: 600 !important; color: #1A1A1A !important; line-height: 1.45 !important; overflow: hidden !important; align-self: unset !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; text-decoration: none !important; flex: 1 !important; margin-top: 0 !important; } [data-palette="base"] .zc-pd-ai-card:not(.zc-pd-ai-done) .zc-pd-ai-body { grid-row: unset !important; } /* Done card: dissolves into background */ [data-palette="base"] .zc-pd-ai-done { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; background: #EFEFED !important; background-image: repeating-linear-gradient( -55deg, transparent, transparent 8px, rgba(26,26,26,0.028) 8px, rgba(26,26,26,0.028) 9px ) !important; border-color: rgba(26,26,26,0.05) !important; box-shadow: none !important; opacity: 1 !important; } [data-palette="base"] .zc-pd-ai-done:hover { transform: none !important; box-shadow: none !important; border-color: rgba(26,26,26,0.08) !important; } [data-palette="base"] .zc-pd-ai-done-inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; margin-bottom: 6px !important; } [data-palette="base"] .zc-pd-ai-done-stamp { font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; color: #C8C0B8 !important; text-transform: uppercase !important; } [data-palette="base"] .zc-pd-ai-done .zc-pd-ai-body { grid-column: unset !important; grid-row: unset !important; align-self: unset !important; font-size: 10px !important; font-weight: 400 !important; color: rgba(26,26,26,0.18) !important; text-decoration: none !important; text-align: center !important; -webkit-line-clamp: 2 !important; margin-top: 0 !important; flex: unset !important; } /* Add task card */ [data-palette="base"] .zc-pd-ai-add { width: 250px !important; height: 185px !important; min-height: 185px !important; padding: 14px 16px !important; border: 1px dashed #D8D0C8 !important; border-radius: 5px !important; color: #C8C0B8 !important; background: transparent !important; box-shadow: none !important; } /* ─── Client detail — content inside zero-padding card sections ─── */ /* Contacts: flat rows with dividers — no nested card borders */ [data-palette="base"] #zcContactsList { padding: 0 !important; background: transparent !important; } [data-palette="base"] .zc-contact-wrapper { border-radius: 0 !important; /* overflow stays hidden — required for swipe-to-delete mechanism */ } [data-palette="base"] .zc-contact-card { background: var(--card) !important; /* opaque: keeps delete btn hidden behind card */ border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 14px 20px !important; box-shadow: none !important; } [data-palette="base"] .zc-contact-wrapper:last-of-type .zc-contact-card { border-bottom: none !important; } [data-palette="base"] #zcAddContactBtn { margin: 10px 20px 14px !important; } /* Address section */ [data-palette="base"] #zcAddrList { padding: 0 20px !important; } [data-palette="base"] #zcAddAddressBtn { margin: 0 20px 14px !important; } /* Projects grid */ [data-palette="base"] #zcClientProjGrid { padding: 12px 16px 16px !important; } /* Operational sections — content margins from card edges */ [data-palette="base"] .zc-billing-card { margin: 0 16px 16px !important; } [data-palette="base"] .zc-billing-nodata { padding: 0 20px 16px !important; } [data-palette="base"] .zc-wf-cd-summary, [data-palette="base"] .zc-inv-cd-summary { padding: 8px 20px 4px !important; } [data-palette="base"] .zc-cd-wf-health { margin: 0 16px 16px !important; } [data-palette="base"] .zc-pd-section .ct-table { margin: 0 16px 16px !important; width: calc(100% - 32px) !important; } /* Next Action: flatten inner card — section IS the card already */ [data-palette="base"] .zc-next-action-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 20px !important; } [data-palette="base"] .zc-next-action-card:focus-within { box-shadow: none !important; } [data-palette="base"] .zc-next-action-footer { border-top-color: var(--border) !important; } /* ═══════════════════════════════════════════════════════════ BLUE SCHEME — periwinkle accent over the base structure Selector specificity 0,2,0 + !important beats all base rules ═══════════════════════════════════════════════════════════ */ [data-palette="base"][data-scheme="blue"] { --a: #6366F1; --a-2: #818CF8; --a-3: #A5B4FC; --a-soft: rgba(99,102,241,0.09); --a-soft-2: rgba(99,102,241,0.16); --a-soft-3: rgba(99,102,241,0.26); --a-shadow: rgba(99,102,241,0.32); --header-grad: linear-gradient(135deg, #6366F1 0%, #4338CA 100%); --cpe: #6366F1; --cpe-soft: rgba(99,102,241,0.10); --ld: #4338CA; --ld-soft: rgba(67,56,202,0.10); --bg: #EEF2FF; --surface-2:#E8EDFF; --border: rgba(99,102,241,0.12); } /* Brand mark */ [data-palette="base"][data-scheme="blue"] .ct-brand-mark { background: #6366F1 !important; box-shadow: 0 3px 14px rgba(99,102,241,0.32) !important; } /* Sidebar active nav item */ [data-palette="base"][data-scheme="blue"] .ct-nav-item.active { background: rgba(99,102,241,0.09) !important; color: #6366F1 !important; border-left-color: #6366F1 !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item.active .icon { color: #6366F1 !important; } /* Avatar */ [data-palette="base"][data-scheme="blue"] .ct-avatar-img { background: #6366F1 !important; } /* Primary button */ [data-palette="base"][data-scheme="blue"] .ct-btn-primary { background: #6366F1 !important; border-color: #6366F1 !important; box-shadow: 0 2px 10px rgba(99,102,241,0.32) !important; } [data-palette="base"][data-scheme="blue"] .ct-btn-primary:hover { background: #4F52D9 !important; border-color: #4F52D9 !important; box-shadow: 0 5px 20px rgba(99,102,241,0.40) !important; } /* Overview card progress fill */ [data-palette="base"][data-scheme="blue"] .proj-progress-fill { background: #6366F1 !important; } /* Active task dot */ [data-palette="base"][data-scheme="blue"] .proj-task-dot.next { background: #6366F1 !important; } /* Project detail phase tracker */ [data-palette="base"][data-scheme="blue"] .zc-pd-phase.done .zc-pd-phase-block, [data-palette="base"][data-scheme="blue"] .zc-pd-phase.active .zc-pd-phase-block { background: #6366F1 !important; } [data-palette="base"][data-scheme="blue"] .zc-pd-phase.done .zc-pd-phase-name, [data-palette="base"][data-scheme="blue"] .zc-pd-phase.active .zc-pd-phase-name { color: #6366F1 !important; } /* Active milestone icon */ [data-palette="base"][data-scheme="blue"] .zc-proj-milestone.active .zc-proj-mi, [data-palette="base"][data-scheme="blue"] .zc-proj-milestone.active .zc-proj-mt { color: #6366F1 !important; } /* Action item chip (active state) */ [data-palette="base"][data-scheme="blue"] .zc-pd-ai-chip svg { stroke: #6366F1 !important; } /* WN add button hover */ [data-palette="base"][data-scheme="blue"] .zc-wn-add:hover { border-color: #6366F1 !important; color: #6366F1 !important; } /* ── Blue scheme: semantic colors → indigo scale ── */ [data-palette="base"][data-scheme="blue"] { --red: #4338CA; --red-soft: rgba(67,56,202,0.12); --amber: #6366F1; --amber-soft: rgba(99,102,241,0.10); --green: #818CF8; --green-soft: rgba(129,140,248,0.12); --txt-red: #3730A3; --txt-amber: #4338CA; --txt-green: #6366F1; } /* WN card left strips */ [data-palette="base"][data-scheme="blue"] .zc-wn-card[data-level="red"]::before { background: #4338CA !important; } [data-palette="base"][data-scheme="blue"] .zc-wn-card[data-level="amber"]::before { background: #6366F1 !important; } [data-palette="base"][data-scheme="blue"] .zc-wn-card[data-level="green"]::before { background: #818CF8 !important; } /* WN badge pills (beats index.html inline !important via higher specificity) */ [data-palette="base"][data-scheme="blue"] .zc-wn-badge[data-level="red"] { background: rgba(67,56,202,0.12) !important; color: #3730A3 !important; } [data-palette="base"][data-scheme="blue"] .zc-wn-badge[data-level="amber"] { background: rgba(99,102,241,0.10) !important; color: #4338CA !important; } [data-palette="base"][data-scheme="blue"] .zc-wn-badge[data-level="green"] { background: rgba(129,140,248,0.14)!important; color: #6366F1 !important; } [data-palette="base"][data-scheme="blue"] .zc-wn-badge[data-level="neutral"] { background: rgba(99,102,241,0.07) !important; color: #818CF8 !important; } /* Project status dot + done task dot */ [data-palette="base"][data-scheme="blue"] .proj-status { background: #818CF8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.25) !important; } [data-palette="base"][data-scheme="blue"] .proj-task-dot.done { background: #818CF8 !important; } /* Milestone done icon */ [data-palette="base"][data-scheme="blue"] .zc-proj-milestone.done .zc-proj-mi { color: #818CF8 !important; } /* Project detail action item done states */ [data-palette="base"][data-scheme="blue"] .zc-pd-ai-done .zc-pd-ai-chip { background: rgba(129,140,248,0.18) !important; } [data-palette="base"][data-scheme="blue"] .zc-pd-ai-done .zc-pd-ai-chip svg { stroke: #818CF8 !important; } [data-palette="base"][data-scheme="blue"] .zc-pd-ai-done .zc-pd-ai-status { color: #818CF8 !important; } [data-palette="base"][data-scheme="blue"] .zc-pd-ai-card[data-level="green"]::before { background: #818CF8 !important; } [data-palette="base"][data-scheme="blue"] .zc-pd-ai-card[data-level="amber"]::before { background: #6366F1 !important; } /* Background override for blue scheme */ [data-palette="base"][data-scheme="blue"] body, [data-palette="base"][data-scheme="blue"] .ct-main, [data-palette="base"][data-scheme="blue"] .zc-wn-wrapper { background: #EEF2FF !important; } [data-palette="base"][data-scheme="blue"] .ct-sidebar { background: #FFFFFF !important; border-right-color: rgba(99,102,241,0.15) !important; } /* Blue scheme: dark indigo sidebar */ [data-palette="base"][data-scheme="blue"] .ct-sidebar { background: #312E81 !important; border-right-color: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-scheme="blue"] .ct-brand-mark { background: rgba(255,255,255,0.15) !important; box-shadow: none !important; } [data-palette="base"][data-scheme="blue"] .ct-brand-text h3 { color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-brand-text p { color: rgba(255,255,255,0.45) !important; } [data-palette="base"][data-scheme="blue"] .ct-brand { border-bottom-color: rgba(255,255,255,0.08) !important; } [data-palette="base"][data-scheme="blue"] .zc-search-input, [data-palette="base"][data-scheme="blue"] .ct-cmdk-trigger { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; color: #3A3A3A !important; } [data-palette="base"][data-scheme="blue"] .zc-search-input::placeholder { color: #A89F94 !important; } [data-palette="base"][data-scheme="blue"] .zc-search-row .icon { color: #A89F94 !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-label { color: rgba(255,255,255,0.55) !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item { color: rgba(255,255,255,0.85) !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item .icon { color: rgba(255,255,255,0.75) !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item:hover { background: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item:hover .icon { color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item.active { background: rgba(255,255,255,0.16) !important; color: #FFFFFF !important; border-left-color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-nav-item.active .icon { color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-sidebar-footer { border-top-color: rgba(255,255,255,0.10) !important; } [data-palette="base"][data-scheme="blue"] .ct-avatar-img { background: rgba(255,255,255,0.20) !important; } [data-palette="base"][data-scheme="blue"] .ct-avatar-text strong { color: #FFFFFF !important; } [data-palette="base"][data-scheme="blue"] .ct-avatar-text span { color: rgba(255,255,255,0.60) !important; } /* ── Dark mode: missing text colour fixes ── */ /* WN card text (inline styles use hardcoded rgba(0,0,0,...)) */ [data-palette="base"][data-theme="dark"] .zc-wn-card-title { color: #EEF2FF !important; } [data-palette="base"][data-theme="dark"] .zc-wn-card-desc { color: #7A8BA5 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-date-tag { color: #556070 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-card-footer { border-top-color: rgba(255,255,255,0.07) !important; } [data-palette="base"][data-theme="dark"] .zc-wn-menu-btn { color: rgba(255,255,255,0.25) !important; } /* WN section header labels */ [data-palette="base"][data-theme="dark"] .zc-wn-label { color: #7A8BA5 !important; } [data-palette="base"][data-theme="dark"] .zc-wn-count { color: #556070 !important; } /* Heatmap eyebrow + section heads */ [data-palette="base"][data-theme="dark"] .ct-hero-eyebrow-label { color: #7A8BA5 !important; } [data-palette="base"][data-theme="dark"] .ct-hero-eyebrow-count { color: #556070 !important; } /* Heatmap row labels (use var(--text-2) which is warm dark grey) */ [data-palette="base"][data-theme="dark"] .zc-row-label { color: #8B9DC3 !important; } /* Project card progress text */ [data-palette="base"][data-theme="dark"] .proj-progress-phase, [data-palette="base"][data-theme="dark"] .proj-progress-pct { color: #7A8BA5 !important; } /* Overview section heads ("In Flight", "Workflow Health") */ [data-palette="base"][data-theme="dark"] .zc-overview-section-head span { color: #7A8BA5 !important; }