/* site-chrome.css — shared Diagrams.so header + footer for the docs. * Hand-authored static replica of the main app's Navigation.tsx / Footer.tsx * (same Outfit font, brand violet #7c3aed, surface tokens). Injected on every * docs page by site-chrome.js. Scoped under .ds-* so it never touches Mintlify. * Dark mode binds to (Mintlify's toggle). */ :root { --ds-header-h: 60px; } /* ---- stack our header above Mintlify's navbar ---- */ /* Only the site header stays fixed. Mintlify's search/tabs bar is un-stuck so it scrolls away with the page (like the gallery filter bar); the sidebar then sticks just below the site header. */ html { --mintlify-slot-header-height: var(--ds-header-h); } #navbar { position: static !important; } /* search/tabs bar scrolls away, not fixed */ #navbar-transition, #navbar .flex-1 { border: 0 !important; } /* no divider line under the header (seamless, like the gallery) */ #navbar a[href="/developers/"], #navbar a[href="/"] { display: none !important; } /* dedupe: site header has the logo */ #navbar a[href^="mailto:"] { display: none !important; } /* dedupe: Support lives in the footer */ #topbar-cta-button { display: none !important; } /* dedupe: site header has Sign in / Get Started */ #footer { display: none !important; } /* we render the full site footer instead */ /* ===================== HEADER ===================== */ .ds-header{ position: sticky; top: 0; z-index: 60; height: var(--ds-header-h); display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 0 16px; font-family: 'Outfit', system-ui, sans-serif; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 0; } html.dark .ds-header{ background: rgba(9,9,11,.9); } @media (min-width: 1024px){ .ds-header{ padding: 0 40px; } } .ds-header a{ text-decoration: none; } .ds-left{ display: flex; align-items: center; min-width: 0; } .ds-logo{ display: flex; align-items: center; gap: 8px; margin-right: 8px; } .ds-logo img{ height: 32px; width: auto; display: block; } .ds-logo span{ font-size: 18px; font-weight: 700; color: #18181b; } html.dark .ds-logo span{ color: #fff; } @media (min-width: 1024px){ .ds-logo{ margin-right: 40px; } } .ds-nav{ display: none; align-items: center; gap: 2px; } @media (min-width: 1024px){ .ds-nav{ display: flex; } } .ds-navlink, .ds-navbtn{ display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: #52525b; transition: background-color .15s, color .15s; } .ds-navlink:hover, .ds-navbtn:hover{ background: #f4f4f5; color: #18181b; } html.dark .ds-navlink, html.dark .ds-navbtn{ color: rgba(255,255,255,.7); } html.dark .ds-navlink:hover, html.dark .ds-navbtn:hover{ background: rgba(255,255,255,.1); color: #fff; } .ds-navlink.is-active, .ds-navbtn.is-active{ color: #7c3aed; } html.dark .ds-navlink.is-active, html.dark .ds-navbtn.is-active{ color: #a78bfa; } .ds-navbtn svg{ width: 14px; height: 14px; transition: transform .15s; } .ds-item.is-open .ds-navbtn svg{ transform: rotate(180deg); } .ds-spacer{ flex: 1 1 auto; min-width: 0; } .ds-item{ position: relative; } .ds-menu{ position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 50; min-width: 210px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid #e4e4e7; box-shadow: 0 12px 32px rgba(0,0,0,.12); display: none; } html.dark .ds-menu{ background: #18181b; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.5); } .ds-item.is-open .ds-menu{ display: block; } .ds-menu a{ display: block; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #3f3f46; transition: background-color .15s, color .15s; } .ds-menu a:hover{ background: #f4f4f5; color: #18181b; } html.dark .ds-menu a{ color: rgba(255,255,255,.8); } html.dark .ds-menu a:hover{ background: rgba(255,255,255,.1); color: #fff; } .ds-cta{ display: none; align-items: center; gap: 8px; flex-shrink: 0; } @media (min-width: 1024px){ .ds-cta{ display: flex; } } .ds-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .2s; white-space: nowrap; } .ds-btn-ghost{ border: 1px solid #e4e4e7; background: transparent; color: #52525b; } .ds-btn-ghost:hover{ background: #f4f4f5; color: #18181b; } html.dark .ds-btn-ghost{ border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.7); } html.dark .ds-btn-ghost:hover{ background: rgba(255,255,255,.1); color: #fff; } .ds-btn-primary{ border: 1px solid #8b5cf6; color: #fff; background: linear-gradient(to bottom right, #7c3aed, #8b5cf6); } .ds-btn-primary:hover{ box-shadow: 0 4px 20px rgba(139,92,246,.3); } /* ---- mobile header ---- */ .ds-burger{ display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: #3f3f46; } .ds-burger:hover{ background: #f4f4f5; } html.dark .ds-burger{ color: #fff; } html.dark .ds-burger:hover{ background: rgba(255,255,255,.1); } @media (min-width: 1024px){ .ds-burger{ display: none; } } .ds-burger svg{ width: 24px; height: 24px; } .ds-mobile{ display: none; position: fixed; left: 0; right: 0; top: var(--ds-header-h); z-index: 55; max-height: calc(100dvh - var(--ds-header-h)); overflow-y: auto; padding: 12px 16px 20px; font-family: 'Outfit', system-ui, sans-serif; background: rgba(255,255,255,.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid #e4e4e7; } html.dark .ds-mobile{ background: rgba(9,9,11,.98); border-bottom-color: rgba(255,255,255,.1); } .ds-mobile.is-open{ display: block; } @media (min-width: 1024px){ .ds-mobile{ display: none !important; } } .ds-mrow{ display: block; width: 100%; text-align: left; padding: 12px 12px; border: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; color: #18181b; border-radius: 8px; cursor: pointer; } html.dark .ds-mrow{ color: #fff; } .ds-mrow:hover{ background: #f4f4f5; } html.dark .ds-mrow:hover{ background: rgba(255,255,255,.1); } .ds-mgroup > .ds-mrow{ display: flex; align-items: center; justify-content: space-between; } .ds-mgroup > .ds-mrow svg{ width: 16px; height: 16px; transition: transform .15s; } .ds-mgroup.is-open > .ds-mrow svg{ transform: rotate(180deg); } .ds-msub{ display: none; padding: 2px 0 8px 12px; } .ds-mgroup.is-open .ds-msub{ display: block; } .ds-msub a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 15px; color: #52525b; } .ds-msub a:hover{ background: #f4f4f5; color: #18181b; } html.dark .ds-msub a{ color: rgba(255,255,255,.8); } html.dark .ds-msub a:hover{ background: rgba(255,255,255,.1); color: #fff; } .ds-mcta{ margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4e4e7; display: grid; gap: 10px; } html.dark .ds-mcta{ border-top-color: rgba(255,255,255,.1); } .ds-mcta .ds-btn{ width: 100%; padding: 12px; font-size: 16px; } /* ===================== FOOTER ===================== */ .ds-footer{ font-family: 'Outfit', system-ui, sans-serif; background: #f4f4f5; color: #18181b; border-top: 1px solid #e4e4e7; } html.dark .ds-footer{ background: #09090b; color: #fff; border-top-color: rgba(255,255,255,.06); } .ds-footer a{ text-decoration: none; } .ds-fwrap{ max-width: 1280px; margin: 0 auto; padding: 48px 24px; box-sizing: border-box; } @media (min-width: 1024px){ .ds-fwrap{ padding: 64px 24px; } } .ds-fgrid{ display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 640px){ .ds-fgrid{ grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px){ .ds-fgrid{ grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } } .ds-fbrand .ds-logo span{ color: #18181b; } html.dark .ds-fbrand .ds-logo span{ color: #fff; } .ds-fbrand p{ margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #52525b; } html.dark .ds-fbrand p{ color: rgba(255,255,255,.6); } .ds-fbrand p.ds-fsmall{ margin-top: 8px; font-size: 12px; color: #71717a; } html.dark .ds-fbrand p.ds-fsmall{ color: rgba(255,255,255,.5); } .ds-fbrand a.ds-femail{ display: inline-block; margin-top: 8px; font-size: 12px; color: #7c3aed; } html.dark .ds-fbrand a.ds-femail{ color: #a78bfa; } .ds-fcol h3{ margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #18181b; } html.dark .ds-fcol h3{ color: #fff; } .ds-fcol ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ds-fcol a{ font-size: 14px; color: #52525b; transition: color .15s; } .ds-fcol a:hover{ color: #7c3aed; } html.dark .ds-fcol a{ color: rgba(255,255,255,.6); } html.dark .ds-fcol a:hover{ color: #a78bfa; } .ds-fbot{ margin-top: 40px; padding-top: 24px; border-top: 1px solid #e4e4e7; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } html.dark .ds-fbot{ border-top-color: rgba(255,255,255,.06); } @media (min-width: 640px){ .ds-fbot{ flex-direction: row; align-items: center; justify-content: space-between; } } .ds-fbot p{ margin: 0; font-size: 12px; color: #71717a; } html.dark .ds-fbot p{ color: rgba(255,255,255,.4); } .ds-fbot .ds-flinks{ display: flex; gap: 16px; } .ds-fbot .ds-flinks a{ font-size: 12px; color: #71717a; } .ds-fbot .ds-flinks a:hover{ color: #7c3aed; } html.dark .ds-fbot .ds-flinks a{ color: rgba(255,255,255,.4); } html.dark .ds-fbot .ds-flinks a:hover{ color: #a78bfa; } .ds-fdisc{ margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: #71717a; } html.dark .ds-fdisc{ color: rgba(255,255,255,.4); }