/* ============================================================ Janison Insights help — brand overrides for MkDocs Material Tuned to match the content-page prototype: white topbar with teal accent, lighter typography, soft admonitions, and Janison area colour accents. ============================================================ */ /* iOS Safari rubber-band overscroll fix. When the user scrolls past the bottom of the page, the area below the footer shows the element's background. By default that's white, which gives an ugly empty rectangle. Setting it to the footer's midnight colour makes the overscroll area look like the footer simply extending downward. */ html { background-color: #002C41; } [data-md-color-scheme="slate"] html { background-color: #0F1620; } /* ----- Font stack matches the prototype: Segoe UI on Windows, San Francisco on Mac, Roboto on Android. ----- */ body, .md-typeset, .md-header, .md-tabs, .md-search, .md-search__input, .md-nav, input, button, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .md-typeset code, .md-typeset pre, .md-typeset kbd { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } :root { /* Janison brand colours */ --jn-midnight: #002C41; --jn-midnight-2: #003A56; --jn-teal: #00A88D; --jn-teal-dark: #007A67; --jn-teal-light: #6FE3CC; --jn-teal-tint: #E6F7F3; /* Neutrals (matching the prototype) */ --jn-ink: #1A2421; --jn-ink-2: #4A5856; --jn-ink-3: #8A9593; --jn-bg: #F7F8F8; --jn-border: rgba(0, 0, 0, 0.08); --jn-border-2: rgba(0, 0, 0, 0.15); /* Area accents (from colour-scheme.md) */ --jn-people-bg: #E6F6F4; --jn-people-fg: #00A88D; --jn-author-bg: #E6EAED; --jn-author-fg: #002C41; --jn-deliver-bg: #EDF7F8; --jn-deliver-fg: #41B0B4; --jn-mark-bg: #FDF0ED; --jn-mark-fg: #F15C3C; --jn-report-bg: #FDE9ED; --jn-report-fg: #EE2B4B; --jn-integration-bg: #EEEAF8; --jn-integration-fg: #6B4FA0; /* Academy area aliases. Mapped to existing Insights hues so the brand palette stays unified across products. Change these here only if Academy needs to diverge visually from Insights. */ --jn-learning-bg: var(--jn-deliver-bg); --jn-learning-fg: var(--jn-deliver-fg); --jn-design-bg: var(--jn-author-bg); --jn-design-fg: var(--jn-author-fg); --jn-social-bg: var(--jn-mark-bg); --jn-social-fg: var(--jn-mark-fg); --jn-settings-bg: #EAEEF2; --jn-settings-fg: #2E5266; /* Map Material's palette to a MIDNIGHT topbar (matches janison.com brand). In Material's variable naming: --md-primary-fg-color is the SURFACE colour of the header (background), --md-primary-bg-color is the TEXT colour on it. The names look backwards but that's Material's convention. */ --md-primary-fg-color: var(--jn-midnight); --md-primary-fg-color--light: #1B2330; --md-primary-fg-color--dark: #00131D; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: var(--jn-teal); --md-accent-fg-color--transparent: var(--jn-teal-tint); --md-accent-bg-color: #ffffff; --md-default-fg-color: var(--jn-ink); --md-default-fg-color--light: var(--jn-ink-2); --md-default-fg-color--lighter: var(--jn-ink-3); --md-default-fg-color--lightest: var(--jn-border); --md-typeset-a-color: var(--jn-teal-dark); } /* ============================================================ Custom search modal (replaces Material's built-in search). Matches the search prototype: synonym hints, AI row, section filters, prototype-styled result cards. ============================================================ */ .jn-search-modal-bg { position: fixed; inset: 0; background: rgba(10, 30, 25, 0.4); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; padding: 80px 16px 16px; z-index: 1000; } .jn-search-modal-bg.open { display: flex; } .jn-search-modal { background: #ffffff; border-radius: 14px; width: 100%; max-width: 640px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 30, 25, 0.25), 0 10px 20px -10px rgba(0, 30, 25, 0.15); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .jn-search-input-wrap { padding: 14px 16px; border-bottom: 1px solid var(--jn-border); display: flex; align-items: center; gap: 12px; } .jn-search-icon { width: 20px; height: 20px; fill: var(--jn-ink-3); flex-shrink: 0; } .jn-search-modal input { flex: 1; border: none; outline: none; font-size: 16px; color: var(--jn-ink); background: transparent; font-family: inherit; } /* Rendered as a