/* * CogniSwitch brand theme layer for mkdocs-material. * * Palette and font identity lifted from https://cogniswitch.ai/'s shipped * CSS custom properties. This file is additive/override-only on top of the * mkdocs-material base theme (see mkdocs.yml theme.palette for the closest * built-in scheme this sits on top of). * * Brand tokens (from cogniswitch.ai :root): * --color-primary / --color-accent : #0808ba (deep indigo) * --color-ink : #272048 (near-black, indigo-tinted body text) * --color-ink-dim : #6b7280 * --color-ink-light : #9ca3af * --background / --color-paper : #f4f4f0 (warm off-white page background) * --color-paper-light : #fcfcf9 * --color-paper-muted : #e5e5e0 * --color-highlight : #e0e7ff * * Derived shades (computed here, not sourced from the marketing site): * Light-mode primary tint #3939c8 = #0808ba mixed 20% toward white * Light-mode primary shade #060695 = #0808ba mixed 20% toward black * Light-mode accent #2d2dc4 = #0808ba mixed 15% toward white * Dark-mode ink-black bg #17132b = #272048 mixed 40% toward black * Dark-mode card/code bg #1d1836 = #272048 mixed 25% toward black * Dark-mode header bg #1d1836 = same as card/code bg, for contrast * Dark-mode accent/link #9c9ce3 = #0808ba mixed 60% toward white * Dark-mode body text #e4e2f1 = light indigo-tinted near-white * * (A lighter dark-mode variant, mixing #272048 toward white instead of * black, was tried and reverted per feedback -- the near-black version * below reads better against this brand's ink/indigo family.) */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* * mkdocs-material's own base rule is `:root,[data-md-color-scheme=default]{...}` * — at runtime it stamps `data-md-color-scheme="default"` directly onto * , so a plain `:root` override here only reaches via * inheritance and loses to that rule's direct match on the element itself. * Mirror the same compound selector so this overrides at equal specificity. */ :root, [data-md-color-scheme="default"] { /* Brand font stacks */ --font-newsreader: "Newsreader", "Iowan Old Style", Georgia, serif; --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-jetbrains: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* mkdocs-material primary/accent overrides -> cogniswitch.ai #0808ba family */ --md-primary-fg-color: #0808ba; --md-primary-fg-color--light: #3939c8; --md-primary-fg-color--dark: #060695; --md-primary-bg-color: #fcfcf9; --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-accent-fg-color: #2d2dc4; --md-accent-fg-color--transparent: rgba(8, 8, 186, 0.1); --md-accent-bg-color: #fcfcf9; --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); /* Page background / text ink, from cogniswitch.ai's paper/ink tokens */ --md-default-bg-color: #f4f4f0; --md-default-fg-color: #272048; --md-default-fg-color--light: #6b7280; --md-default-fg-color--lighter: #9ca3af; --md-default-fg-color--lightest: rgba(39, 32, 72, 0.12); /* Cards / code surfaces */ --md-code-bg-color: #e5e5e0; --md-code-fg-color: #272048; /* Links */ --md-typeset-a-color: #0808ba; /* Admonitions / highlight */ --md-typeset-mark-color: #e0e7ff; } /* Dark mode (mkdocs-material's slate scheme) */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #4b4bd6; --md-primary-fg-color--light: #6b6bde; --md-primary-fg-color--dark: #2f2fa8; --md-primary-bg-color: #f4f4f0; --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-accent-fg-color: #9c9ce3; --md-accent-fg-color--transparent: rgba(156, 156, 227, 0.15); --md-accent-bg-color: #17132b; --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-default-bg-color: #17132b; --md-default-fg-color: #e4e2f1; --md-default-fg-color--light: #b3aecf; --md-default-fg-color--lighter: #8b85ab; --md-default-fg-color--lightest: rgba(228, 226, 241, 0.1); --md-code-bg-color: #1d1836; --md-code-fg-color: #e4e2f1; --md-typeset-a-color: #9c9ce3; --md-typeset-mark-color: rgba(156, 156, 227, 0.25); } /* Typography: Inter for body/UI, Newsreader for headings, JetBrains Mono for code */ body, .md-typeset { font-family: var(--font-inter); } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6, .md-header__title, .md-nav__title, .md-nav__link--index, .md-ellipsis { font-family: var(--font-newsreader); font-weight: 600; } .md-typeset h1 { font-weight: 700; } .md-typeset code, .md-typeset pre, .md-typeset kbd, .md-typeset pre code { font-family: var(--font-jetbrains); } /* Surfaces that need to sit on top of the warm off-white / dark-ink backgrounds without clashing: admonitions, tables, footer. */ .md-typeset .admonition, .md-typeset details { background-color: var(--md-default-bg-color); border-color: var(--md-default-fg-color--lightest); } .md-typeset table:not([class]) { background-color: var(--md-default-bg-color); } .md-typeset table:not([class]) th { background-color: var(--md-code-bg-color); color: var(--md-default-fg-color); } .md-footer { background-color: var(--md-primary-fg-color--dark); } .md-search__input { background-color: var(--md-code-bg-color); } /* * Header chrome: cogniswitch.ai's own site header is a light warm-gray bar * (a shade darker than the page background), not a solid indigo band, so * scope --md-primary-fg-color/--md-primary-bg-color locally to .md-header * only -- this keeps the indigo brand color everywhere else (links, active * nav item, buttons) while making the header itself match the marketing * site's real nav bar. */ .md-header { --md-primary-fg-color: #e5e5e0; --md-primary-bg-color: #272048; /* Collapsed search box placeholder/icon read var(--md-primary-bg-color--light) directly (mkdocs-material assumes a dark header + near-white text here); left at the theme default hsla(0,0%,100%,.7) this rendered near-invisible white-on-light-gray once the header itself went light. */ --md-primary-bg-color--light: rgba(39, 32, 72, 0.7); } [data-md-color-scheme="slate"] .md-header { --md-primary-fg-color: #1d1836; --md-primary-bg-color: #e4e2f1; --md-primary-bg-color--light: rgba(228, 226, 241, 0.7); } /* * The real cogniswitch.ai wordmark logo (docs/images/cogniswitch-logo.png, * fetched directly from the site) is solid black on a transparent ground. * That reads fine on the light-mode header's light-gray bar, but needs to * flip to light-on-dark for the dark-mode header. */ .md-header__button.md-logo img { height: 1.5rem; width: auto; } [data-md-color-scheme="slate"] .md-header__button.md-logo img { filter: invert(1); }