/* ============================================================================= Lead Prosper — Help Center (Help Scout Docs) custom theme · AUTO LIGHT/DARK ClickUp: TP-35630 — matches "Lead Prosper KB Style Guide" ----------------------------------------------------------------------------- This theme ships a Light / Dark / System control in the header (built by setupThemeToggle() in the JS). The visitor's choice is stored and re-applied on every page as a data-theme attribute on : · no attribute / data-theme="light" → the :root light palette below · data-theme="dark" → the dark palette block further down "System" is resolved in JS (it reads prefers-color-scheme and flips the attribute live), so the dark palette lives in ONE place. Without JS the page renders in the light palette. ----------------------------------------------------------------------------- HOW TO USE 1. Help Scout → Docs → your site → Settings → Styles → Custom CSS. 2. Paste this whole file in. (The @import at the very top loads the fonts — keep it as the first line; Help Scout strips @import that isn't first.) 3. Paste helpscout-leadprosper.js into Settings → Styles → Custom JavaScript (or Custom HTML/Footer) — it builds the "On this page" panel + callout labels + scroll-spy that pure CSS can't. 4. Branding tab: upload a logo that reads on a LIGHT background (dark/colored logo). In dark mode the header goes dark; the `.brand img` rule in the `.brand img` note below shows how to invert a monochrome logo so it stays legible on the dark header (leave it as-is for multi-color logos). Built against Help Scout's DEFAULT Docs theme markup (#mainNav, #docsSearch, #fullArticle h1.title, .callout-*, aside#sidebar.span3, .articleFoot …). ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap'); /* ── DESIGN TOKENS ──────────────────────────────────────────────────────────── Theme switching is driven by data-theme on (set by the header toggle): · :root below = LIGHT theme (also the default when no attribute is set) · the :root[data-theme="dark"] block further down flips every token to the original style-guide DARK palette. Every color the rest of the file uses is a token, so this is the only place you edit to retune either palette. ──────────────────────────────────────── */ :root { --bg-page: #ffffff; --bg-header: #ffffff; --bg-nav: #f7f5fc; --bg-content: #ffffff; --bg-toc: #ffffff; --border-header: #e7e3f1; --border-subtle: #e7e3f1; --section-rule: #ece8f4; --text-primary: #1b1233; --text-secondary: #4a4459; --text-muted: #8a82a0; --text-logo: #1b1233; --accent: #7c3aed; --accent-hover: #6d28d9; --link-color: #7c3aed; --on-accent: #ffffff; /* text/icon color sitting on an --accent fill */ --nav-text: #5b5470; --nav-cat-text: #9a93ab; --nav-active-text: #6d28d9; --nav-active-bg: rgba(124,58,237,0.08); --nav-active-border: #7c3aed; --nav-hover-bg: rgba(0,0,0,0.035); --toc-text: #8a82a0; --toc-active: #6d28d9; --toc-border: #ece8f4; --code-bg: #f3f0fb; --code-text: #6d28d9; --code-block-bg: #f7f5fc; --code-block-text:#3a2f5c; --table-head-bg: #f7f5fc; --table-row-alt: rgba(0,0,0,0.018); --table-border: #ece8f4; --img-border: #e7e3f1; --img-shadow: rgba(27,18,51,0.10); --search-bg: #f7f5fc; --search-text: #9a93ab; --search-border: #e0dcec; --breadcrumb: #9a93ab; --spec-bg: #f7f5fc; --spec-border: #ece8f4; --spec-label: #8a82a0; /* effects */ --selection-bg: rgba(124,58,237,0.20); --selection-fg: #1b1233; --hero-glow: rgba(124,58,237,0.12); --hero-dot: rgba(27,18,51,0.045); /* homepage hero dot-grid texture */ --focus-ring: rgba(124,58,237,0.18); --card-shadow: rgba(27,18,51,0.12); /* document glyph used for article-list links (tinted via mask + currentColor) */ --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E"); /* homepage glyphs (tinted via mask + currentColor / accent) */ --book-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); /* badges */ --badge-basic-bg:#f3f0fb; --badge-basic-text:#7c3aed; --badge-rec-bg: #dcfce7; --badge-rec-text: #15803d; --badge-val-bg: #dbeafe; --badge-val-text: #1d4ed8; --badge-loc-bg: #fef3c7; --badge-loc-text: #b45309; --badge-adv-bg: #ede9fe; --badge-adv-text: #6d28d9; --badge-sec-bg: #fee2e2; --badge-sec-text: #b91c1c; /* callout accents (note / important / warning / success) */ --cq-note-bg:#eff6ff; --cq-note-bd:#3b82f6; --cq-note-fg:#1d4ed8; --cq-imp-bg: #fffbeb; --cq-imp-bd: #f59e0b; --cq-imp-fg: #b45309; --cq-warn-bg:#fef2f2; --cq-warn-bd:#ef4444; --cq-warn-fg:#b91c1c; --cq-ok-bg: #f0fdf4; --cq-ok-bd: #22c55e; --cq-ok-fg: #15803d; } /* ── DARK THEME (Lead Prosper design-system palette) ──────────────────────── Applied when JS sets data-theme="dark" on — either the visitor chose Dark in the header toggle, or they're on "System" and their OS prefers dark (setupThemeToggle() resolves that and keeps it in sync live). This is the ONLY place the dark palette is declared. Sourced from the LP design system (claude.design): a cool, slate-tinted neutral surface stack (neutral-950 #0b0b10 → #14141b → #1c1c25 → #25252e) with translucent-white hairlines, and the purple accent shifted up to the lighter end of the brand scale (purple-300 #c4b5fd / purple-400 #a78bfa) so it reads cleanly on dark. Semantic + badge/callout hues derive from the system's success / warning / danger / info scales. ───────────────────────── */ :root[data-theme="dark"] { --bg-page: #0b0b10; /* neutral-950 (bg-app) */ --bg-header: #0b0b10; --bg-nav: #14141b; /* bg-surface */ --bg-content: #0b0b10; --bg-toc: #0b0b10; --border-header: rgba(255,255,255,0.10); /* border */ --border-subtle: rgba(255,255,255,0.08); --section-rule: rgba(255,255,255,0.06); /* border-subtle */ --text-primary: #f5f5f7; /* fg-primary */ --text-secondary: #b5b5c2; /* fg-secondary */ --text-muted: #8a8a98; /* fg-tertiary */ --text-logo: #f5f5f7; --accent: #a78bfa; /* purple-400 (border-brand) */ --accent-hover: #6250a9; /* purple-300 */ --link-color: #c4b5fd; /* purple-300 (fg-link) */ --on-accent: #16161d; /* neutral-900 — dark text on light-purple fill */ --nav-text: #b5b5c2; --nav-cat-text: #8a8a98; --nav-active-text: #c4b5fd; --nav-active-bg: rgba(124,58,237,0.18); /* bg-brand-soft analog */ --nav-active-border: #a78bfa; --nav-hover-bg: rgba(255,255,255,0.05); --toc-text: #8a8a98; --toc-active: #c4b5fd; --toc-border: rgba(255,255,255,0.10); --code-bg: #1c1c25; /* bg-elevated */ --code-text: #c4b5fd; --code-block-bg: #14141b; /* bg-surface */ --code-block-text:#e2e2e8; /* neutral-200 */ --table-head-bg: #1c1c25; --table-row-alt: rgba(255,255,255,0.025); --table-border: rgba(255,255,255,0.10); --img-border: rgba(255,255,255,0.10); --img-shadow: rgba(0,0,0,0.50); --search-bg: #1c1c25; --search-text: #8a8a98; --search-border: rgba(255,255,255,0.10); --breadcrumb: #8a8a98; --spec-bg: #14141b; --spec-border: rgba(255,255,255,0.10); --spec-label: #8a8a98; /* effects */ --selection-bg: rgba(139,92,246,0.30); /* purple-500 */ --selection-fg: #f5f5f7; --hero-glow: rgba(139,92,246,0.22); --hero-dot: rgba(255,255,255,0.04); --focus-ring: rgba(167,139,250,0.35); /* DS --ring */ --card-shadow: rgba(0,0,0,0.50); /* badges — neutral base for brand, semantic tints elsewhere */ --badge-basic-bg:#1c1c25; --badge-basic-text:#c4b5fd; --badge-rec-bg: #06281c; --badge-rec-text: #34d399; /* success */ --badge-val-bg: #0d2440; --badge-val-text: #60a5fa; /* info */ --badge-loc-bg: #2a1d05; --badge-loc-text: #fbbf24; /* warning */ --badge-adv-bg: #1c1c25; --badge-adv-text: #c4b5fd; /* brand */ --badge-sec-bg: #2a0f0f; --badge-sec-text: #f87171; /* danger */ /* callout accents — bd = semantic-500, fg = lightened for dark contrast */ --cq-note-bg:#0d1a2e; --cq-note-bd:#3b82f6; --cq-note-fg:#93c5fd; /* info */ --cq-imp-bg: #241a05; --cq-imp-bd: #f59e0b; --cq-imp-fg: #fcd34d; /* warning */ --cq-warn-bg:#2a0f0f; --cq-warn-bd:#ef4444; --cq-warn-fg:#fca5a5; /* danger */ --cq-ok-bg: #06281c; --cq-ok-bd: #22c55e; --cq-ok-fg: #6ee7b7; /* success */ } * { box-sizing: border-box; } /* ── BASE ─────────────────────────────────────────────────────────────────── */ html, body { background: var(--bg-page) !important; color: var(--text-primary); color-scheme: light dark; /* native controls (selects, scrollbars) follow the theme */ } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; -webkit-font-smoothing: antialiased; line-height: 1.7; } body:after { display: none !important; } /* kill default theme bg image layer */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } a, a:hover, a:focus { color: var(--link-color); } /* Kill the harsh default focus outline on links/buttons/etc. that shows on click. Keep an accessible, on-brand ring for keyboard users via :focus-visible only. */ a, button, [role="button"], input, select, textarea, summary, .hs-onthispage a, .nav-list a { outline: none; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, .hs-onthispage a:focus-visible, .nav-list a:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--focus-ring); } h1, h2, h3, h4, h5, p, span { color: var(--text-primary); } /* Full-bleed bars, centered content. The default Help Scout theme caps .container-fluid at ~1250px; we drop that cap here, then re-apply our own centered --content-max box on the header inner + the article row below so the page reads like a major docs site (full-width header bar, centered content) instead of content pinned to the left edge on wide monitors. */ .container-fluid, .row-fluid { max-width: none !important; margin-left: 0; margin-right: 0; } /* ── PAGE GUTTER + CONTENT WIDTH ─────────────────────────────────────────────── --gutter drives horizontal alignment (header logo, sidebar text, article all line up to --gutter from the centered box edge). --content-max caps the whole three-column layout and the header content, centered on wide screens so the columns don't stretch into dead space. ──────────────────────────────────────────────────────────────────────────── */ :root { --gutter: 32px; --content-max: 1560px; } /* ── HEADER / TOP NAV (#mainNav.navbar) ───────────────────────────────────── */ #mainNav.navbar, #mainNav .navbar-inner { background: var(--bg-header) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--border-header) !important; } /* keep the header pinned while the page scrolls under it */ #mainNav.navbar { position: sticky; top: 0; z-index: 1000; } /* full-width header BAR (background + bottom border span the viewport), but its inner content is centered in the same --content-max box as the article row, so the logo lines up over the left category rail. */ /* zero the default navbar-inner side padding so the centered .container-fluid below sits flush to the bar edge — then its own --gutter padding is the ONLY horizontal offset, lining the logo up exactly with the left rail (Categories) and the toggles up with the right TOC rail. */ #mainNav .navbar-inner { max-width: none; padding-left: 0 !important; padding-right: 0 !important; } #mainNav .container-fluid { max-width: var(--content-max) !important; /* beats the global .container-fluid max-width:none */ margin: 0 auto; /* padding: 0 var(--gutter); */ min-height: 66px; display: flex; align-items: center; gap: 22px; } #mainNav .nav-collapse { display: flex; align-items: center; gap: 22px; flex: 0 1 auto; } #mainNav .brand, #mainNav .brand span { color: var(--text-logo) !important; font-weight: 700; letter-spacing: -.01em; text-shadow: none !important; padding: 0; } #mainNav .brand { display: inline-flex; align-items: center; } #mainNav .brand img { height: 42px; width: auto; } /* "Knowledge Base" label injected next to the logo by setupBrand(); a thin divider separates it from the logo mark (matches the nav divider above). */ #mainNav .lp-brand-text { position: relative; margin-left: 13px; padding-left: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-logo) !important; white-space: nowrap; } #mainNav .lp-brand-text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: var(--border-header); } /* vertical divider between the logo and the nav links (matches style guide) */ #mainNav .nav { position: relative; } #mainNav .nav::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--border-header); } /* Logo: a dark/colored wordmark is uploaded (reads on the light header). In dark mode the header goes dark, so flatten the logo to pure white so it stays crisp. brightness(0) crushes every pixel to black, then invert(1) flips it to flat white — ignoring the original tones (no gray "PROSPER" half). */ :root[data-theme="dark"] #mainNav .brand img, :root[data-theme="dark"] .lp-drawer-brand img { filter: brightness(0) invert(1); } #mainNav .nav li a { color: var(--text-primary) !important; font-size: 15px; font-weight: 600; padding: 6px 4px; background: transparent !important; text-shadow: none !important; } #mainNav .nav li a:hover { color: var(--accent) !important; background: transparent !important; } #mainNav .nav li.active a { color: var(--text-primary) !important; background: transparent !important; } .btn-navbar { background: var(--search-bg) !important; border-color: var(--search-border) !important; box-shadow: none !important; } .btn-navbar .icon-bar { background: var(--text-muted) !important; box-shadow: none !important; } /* Hide the auto-generated collection links in the header (Getting Started, Core Concepts, …). Help Scout lists every collection here as