/* ============================================================================= * CortexBuild Docs — Material theme brand overrides * * Single source of truth for brand tokens is website/assets/css/tokens.css. * Values here MIRROR that file; do NOT diverge. Update tokens.css first. * * WCAG 2.1 AA contrast (computed on #FFFFFF): * #6C5CE7 (primary-500) ............ 4.86:1 -> PASS for body/link text (>=4.5:1) * #5A4BD6 (primary-600) ............ 5.92:1 -> PASS, used for hover/active text * #22D3EE (accent-400) ............. 1.81:1 -> FAIL for text. Gradient / non-text * accents ONLY. Never used for text or links. * ========================================================================== */ :root { /* Primary brand — used for header, primary UI, and link text (AA on white). */ --md-primary-fg-color: #6C5CE7; --md-primary-fg-color--light: #8B7CF0; --md-primary-fg-color--dark: #5A4BD6; /* Accent (hover/active interactions). Darkened violet keeps text AA; cyan is reserved for the signature gradient below, never for accent text. */ --md-accent-fg-color: #5A4BD6; --md-accent-fg-color--transparent: rgba(108, 92, 231, 0.10); /* Link text — explicit, AA-compliant violet (4.86:1 on white). */ --md-typeset-a-color: #6C5CE7; /* Brand typography (mirrors tokens.css). */ --md-text-font: "Inter"; --md-code-font: "JetBrains Mono"; } /* Link hover/focus uses the darker violet (5.92:1) — still AA, never cyan. */ .md-typeset a:hover, .md-typeset a:focus { color: #5A4BD6; } /* ----------------------------------------------------------------------------- * Material ALWAYS stamps data-md-color-primary (default "indigo") and * data-md-color-scheme on as soon as a `palette` exists in mkdocs.yml. * Those body-scoped rules (e.g. [data-md-color-primary="indigo"], specificity * 0,1,0) outrank the :root brand vars above (0,0,1), so without this block links * render Material indigo, not brand violet. Re-assert brand primary at higher * specificity — `body` + two attributes = (0,2,1) — so brand wins in the DEFAULT * scheme regardless of Material's default palette stamp. ------------------------ */ body[data-md-color-scheme][data-md-color-primary] { --md-primary-fg-color: #6C5CE7; --md-primary-fg-color--light: #8B7CF0; --md-primary-fg-color--dark: #5A4BD6; --md-accent-fg-color: #5A4BD6; --md-accent-fg-color--transparent: rgba(108, 92, 231, 0.10); --md-typeset-a-color: #6C5CE7; } /* Signature gradient — the ONLY place cyan (#22D3EE) appears, as a non-text decorative accent (hero rule under the page title / section dividers). */ .md-typeset h1 { position: relative; } .md-typeset h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 0.4rem; border-radius: 999px; background: linear-gradient(135deg, #6C5CE7 0%, #22D3EE 100%); } /* Header keeps brand violet; ensure the title/logo region reads cleanly. */ .md-header { background: linear-gradient(135deg, #6C5CE7 0%, #5A4BD6 100%); } /* ============================================================================= * Dark mode (Material `slate` scheme). * * Brand primary #6C5CE7 has 4.86:1 on WHITE but only ~3.0:1 on the slate * surface (#1E2129), which FAILS AA for body/link text. So in slate we promote * link AND primary-colored text to the LIGHTER brand violet #8B7CF0, which is * AA-compliant on the dark surface, while keeping the header and the decorative * gradient on the canonical #6C5CE7 -> #22D3EE brand ramp (those use literal * colors, so they are scheme-independent). * Cyan #22D3EE remains a non-text gradient accent ONLY — never link/body text. * * Selector is `body[data-md-color-scheme="slate"][data-md-color-primary]` * (specificity 0,2,1) so it outranks Material's body-scoped slate palette rule * `[data-md-color-scheme="slate"][data-md-color-primary="indigo"]` (0,2,0). * * WCAG 2.1 AA contrast on the slate body surface (#1E2129, Material default): * #8B7CF0 (primary-300) ............ 4.77:1 -> PASS for body/link text (>=4.5:1) * #A99BF5 (lighter violet) ......... 6.65:1 -> PASS for hover/active text * Material default slate body text (#E2E4E9 @82% on #1E2129) ~8.9:1 -> PASS. * ========================================================================== */ body[data-md-color-scheme="slate"][data-md-color-primary] { /* Lighter violet for ALL primary/link text so it clears AA on the dark surface. Header/gradient accents stay brand via their own literal-color rules. */ --md-primary-fg-color: #8B7CF0; --md-primary-fg-color--light: #A99BF5; --md-primary-fg-color--dark: #6C5CE7; --md-accent-fg-color: #A99BF5; --md-accent-fg-color--transparent: rgba(139, 124, 240, 0.10); /* AA-compliant link text on slate (4.77:1). */ --md-typeset-a-color: #8B7CF0; } /* Slate link hover/focus uses the brighter violet (6.65:1) — still AA, never cyan. */ body[data-md-color-scheme="slate"] .md-typeset a:hover, body[data-md-color-scheme="slate"] .md-typeset a:focus { color: #A99BF5; } /* ============================================================================= * Left navigation — hierarchy, indentation & active-state (FIX: nav had no * indentation and no parent/child distinction). * * navigation.sections is intentionally OFF in mkdocs.yml so Material renders a * collapsible, indented tree. These rules make the parent -> child hierarchy * obvious and professional, scoped to the PRIMARY sidebar only (the right-hand * table-of-contents in .md-sidebar--secondary is left untouched). * * Colors reuse the brand violet tokens already proven AA in this file: * light active text #6C5CE7 (4.86:1 on white) -> PASS * slate active text #8B7CF0 (4.77:1 on slate) -> PASS * Cyan #22D3EE is never used for text here. * ========================================================================== */ /* Parent / section labels: slightly bolder, larger, with letter-spacing so a section header reads as a header, not just another leaf link. */ .md-sidebar--primary .md-nav__item--nested > .md-nav__link, .md-sidebar--primary .md-nav__item--section > .md-nav__link { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--md-default-fg-color); } /* Nested lists get a subtle vertical guide line + indentation so children are visually tucked under their parent. */ .md-sidebar--primary .md-nav__list .md-nav__list { margin-left: 0.6rem; padding-left: 0.35rem; border-left: 1px solid var(--md-default-fg-color--lightest); } /* Leaf (child) links sit a touch lighter and smaller than their parent label. */ .md-sidebar--primary .md-nav__list .md-nav__list .md-nav__link { font-weight: 400; font-size: 0.7rem; } /* Active / current page: brand violet text, bold, with a left accent bar that lines up with the guide line so the current location is unmistakable. */ .md-sidebar--primary .md-nav__link--active, .md-sidebar--primary .md-nav__link--active:hover { color: var(--md-primary-fg-color); font-weight: 700; border-left: 2px solid var(--md-primary-fg-color); margin-left: -1px; /* overlap the guide line cleanly */ padding-left: 0.4rem; } /* Hover affordance on any nav link (kept subtle, AA-safe). */ .md-sidebar--primary .md-nav__link:hover { color: var(--md-primary-fg-color); }