/* * Exterview docs - layout and knowledge-base list styling. * * Mintlify auto-includes any .css file in the content directory on every page; * it does not need referencing from docs.json. * * Selectors for Mintlify's own containers (#content-area, #content-side-layout) * were read off Mintlify's rendered DOM (2026-08-17). Mintlify documents that * "the references and styling of common elements are subject to change", so * re-check those two rules after a Mintlify platform upgrade. The .kb-links * rules below are our own class and are not affected by Mintlify changes. */ /* ── Page width ─────────────────────────────────────────────────────────── * Mintlify centres the article column with * #content-area { max-width: 43.5rem (lg:max-w-174); * margin-left: max(0px, calc(50vw - 348px - 14rem)); } * On wide screens that calc pushes the column toward the middle and leaves * large empty gutters either side. Ashby instead runs a ~680px column tight * against the sidebar, so the page reads as full-width. */ @media (min-width: 1024px) { #content-area { max-width: 58rem; margin-left: 2rem; } #content-side-layout { max-width: none; } } @media (min-width: 1536px) { #content-area { max-width: 64rem; } } /* ── Knowledge-base link lists ──────────────────────────────────────────── * Section indexes are icon link lists with no bullet, a bold underlined title, * generous row spacing, and a hanging indent so a title that wraps aligns with * the text above it rather than tucking under the icon. * * Applied only inside

so ordinary bulleted lists * elsewhere in the docs keep their bullets. */ .kb-links ul { list-style: none; padding-left: 0; margin: 0.5rem 0 0; } /* * Alignment: .kb-ico pins each icon to a fixed box and the hanging indent * matches that box exactly, so every title starts on the same vertical and a * wrapped title lines up under itself rather than tucking beneath the icon. * * This box originally existed because emoji have no common advance width - * 🧭, 🚀 and 🗂️ all measured differently, leaving the text column ragged. The * icons are now Lucide SVGs at a uniform 18px (STD-DESIGN-SYSTEM-001 §2.1a), so * the widths are already equal; the box is retained because the hanging indent * still needs a fixed offset to align wrapped titles against. */ /* * Mintlify draws its own bullet, so `list-style: none` and `::marker` cannot * remove it. Its prose rules are: * * .prose :where(ul) { list-style-type: none } * .prose :where(ul>li) { position: relative; padding-left: 2em !important } * .prose :where(ul>li):before { content: ""; border-radius: 50%; * background-color: rgb(var(--gray-400)); * width: .375em; height: .375em; * position: absolute; top: .6875em; left: .5em } * * Two consequences we have to answer: * 1. the bullet is a ::before circle, so it must be switched off explicitly; * 2. that padding-left is !important, so our own padding was dropped while our * negative text-indent still applied. That pulled the icon left, on top of * the bullet, which is what made the two overlap. * * So: kill the pseudo-bullet, and express the hanging indent in the SAME 2em * unit Mintlify forces, rather than a 2rem value it overrides. */ .kb-links li::before { content: none; display: none; } .kb-links li { /* padding-left is Mintlify's forced 2em; match it so wrapped lines align */ text-indent: -2em; margin: 0 0 0.9rem; line-height: 1.55; } .kb-links .kb-ico { display: inline-block; width: 2em; /* must equal the li's padding-left (Mintlify forces 2em) */ text-indent: 0; font-style: normal; text-align: left; line-height: 1; } /* * Mintlify renders as an

…

* * so `.frame + .frame` never matches, the WRAPPERS are the siblings, not the * frames. Selecting the wrapper needs :has(). Anchored on the stable * `data-name="frame"` hook rather than the utility classes beside it. * * Only a wrapper that directly follows another frame wrapper is affected: 4 such * pairs exist site-wide (3 on the Darwinbox partner page, 1 on ex-voice), and a * lone screenshot keeps its normal spacing. */ .mdx-content div:has(> [data-name="frame"]) + div:has(> [data-name="frame"]) { margin-top: 1.5rem; } /* ── Smaya mascot ───────────────────────────────────────────────────────── * The mascot appears in two forms: a hero above a page's first section, and * an inline icon in .kb-links rows whose link names Smaya itself. * * Mintlify renders the frontmatter `title` as the page H1 ABOVE the MDX body, * so the hero sits directly under the title rather than above it. There is no * supported hook to inject content between the breadcrumb and the H1, and the * CSS that would do it would target Mintlify's own DOM — the same fragility * the note at the top of this file warns about. * * The .kb-ico rule above sets opacity 0.65 on `svg` only, so the mascot keeps * full colour: it is an identity mark, not a supporting glyph. */ .smaya-hero { display: block; margin: 0 0 1.5rem; /* left-aligned to the text column */ width: 200px; height: 200px; } .smaya-hero-sm { width: 96px; height: 96px; margin-bottom: 1rem; } /* * Sized to match Mintlify's inline 16px svg so rows stay aligned, with * a touch more room because the mascot is a filled shape rather than a stroke. */ .kb-links .kb-ico img.smaya-ico { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }

​What it is designed to do

​What you can use today

What it is designed to do

What you can use today