/* ONE content width. Everything shares the same left AND right edge: prose, code, tables. A paragraph at 680px beside a code block at 938px gives a page three different right edges, which looks like a bug, not a decision. The column is narrowed at the GRID level instead, so the measure is readable and nothing sticks out. Wide tables and code scroll inside their own box. */ /* Material normally sets these in its fonts partial; that partial is off (font: false) so the docs can load the product's exact weights instead. Declare them here or the theme falls back to a system stack. */ :root { --md-text-font: "Public Sans"; --md-code-font: "JetBrains Mono"; } /* Loading the product's faces means ONLY 400/600/800 and no italics: one font request shared with the product pages. Consequence, deliberate: Material asks for 300 on `h1,h2` and 700 on ~12 selectors, so each resolves to the nearest loaded face and renders one step heavier, and is a synthetic oblique. Not pinned in CSS; weight fallback is deterministic. */ .md-grid { max-width: 56rem; } /* 1120px, deliberately wider than the product pages' 1024px, so the logo sits at 160 here against 208 on /pricing. The frame is what makes a page read as reference rather than a centred marketing column. Do NOT widen the MEASURE to "fix" it: at 1120 the prose already runs ~87 characters per line against the 45-75 guideline (Stripe 503px, Cloudflare 648, Material's own docs and FastAPI 688). Width here buys navigation room, not line length. */ /* Material wraps every table in an inline-block .md-typeset__table, which sizes to content and so breaks the shared right edge. Make the wrapper a full-width scroll container and the table fill it, as site.css does. */ .md-typeset__table { display: block; width: 100%; overflow-x: auto; } /* Land the logo on the frame's OWN left edge. Material insets the mark by 16px (4px of .md-header__inner padding + 4px margin + 8px padding on .md-logo), so it sat 16px inside a frame whose tabs, sidebar and content all start flush. This aligns the logo with THIS surface, not with the product pages: the docs frame is 1120px and theirs is 1024px, so our logo is at 160 and theirs at 208, deliberately (see the .md-grid note above). Scoped to the wide breakpoint: below it the grid is not centred and that same padding is the only thing keeping the logo off the screen edge. */ @media screen and (min-width: 76.25em) { .md-header__inner { padding-left: 0; padding-right: 0; } /* Same job on the footer strip. The meta row carries .2rem of padding and .md-copyright another .75rem of margin, which put the generator credit at 176 and our copyright's right edge at 1264, so the footer sat inside the frame on BOTH sides while the header, tabs, sidebar and content all sat on it. */ .md-footer-meta__inner { padding-left: 0; padding-right: 0; } .md-copyright { margin-left: 0; margin-right: 0; } /* .md-header__button.md-logo, not .md-logo: Material sets the inset through the two-class selector, which outranks a single class and silently won the first time. */ .md-header__button.md-logo { margin-left: 0; padding-left: 0; } /* The tabs row is a SEPARATE grid container, so aligning the logo alone left the tabs 16px right of it: .md-tabs__list adds .2rem and .md-tabs__item .6rem. Cancel the 12px item padding so the first tab's TEXT starts on the frame edge, spacing unchanged. [dir=ltr] is required: Material's own rule carries it and outranks a plain class. */ [dir=ltr] .md-tabs__list { margin-left: -0.6rem; } /* Federal sources documents the government's systems, not ours, so it sits apart from the six product tabs rather than merely last among them. It is last in the nav, so :last-child is the same thing the tab order already says. */ .md-tabs__item:last-child { margin-left: auto; } } /* The wordmark reads "GovCon API Docs", the last word quieter. Appended here rather than set in site_name so it carries its own colour and stays out of the logo link's title= and aria-label=. Two render points: the desktop header and the mobile drawer title. :first-child matters, the SECOND .md-header__topic holds the page title shown on scroll. On every page deliberately; see WORK-LOG 2026-09-22 for why it is not scoped. */ .md-header__topic:first-child .md-ellipsis::after, .md-nav--primary > .md-nav__title::after { content: " Docs"; color: var(--md-primary-bg-color--light); /* #cbd5e1, the product's --muted */ font-weight: 400; } .md-typeset__table > table:not([class]) { display: table; width: 100%; } /* A heading should sit on the content it introduces, so give sections air rather than boxes. */ .md-typeset h2 { margin-top: 2.4em; } .md-typeset h3 { margin-top: 1.8em; } /* ─── Brand ────────────────────────────────────────────────────────────────── The same tokens the product pages use (static/css/site.css :root), so the docs read as part of the product and not as a documentation template. One accent, used for action; status colours are for status only. */ :root { --md-primary-fg-color: #020617; /* --bg, the dark product bar */ --md-primary-fg-color--light: #212e4d; /* --surface */ --md-primary-fg-color--dark: #020617; --md-primary-bg-color: #f8fafc; /* --text on the dark bar */ --md-primary-bg-color--light: #cbd5e1; /* --muted */ --md-accent-fg-color: #c2410c; /* --accent, the one high-contrast accent */ --md-accent-fg-color--transparent: rgba(194, 65, 12, .1); --md-accent-bg-color: #ffffff; /* --on-accent */ --md-typeset-a-color: #c2410c; /* links carry the accent, not the near-black primary */ /* The footer is the SAME near-black as the header, as on the product pages. Material's defaults are rgba(0,0,0,.87) for the footer and rgba(0,0,0,.32) for the meta strip, which stacked as two different greys with a visible seam, and neither was our brand. */ --md-footer-bg-color: #020617; --md-footer-bg-color--dark: #020617; --md-footer-fg-color: #f8fafc; /* --text */ --md-footer-fg-color--light: #cbd5e1; /* --muted */ --md-footer-fg-color--lighter:#94a3b8; /* --subtle */ --md-code-bg-color: #f3f4f6; /* matches seo-utility.css code chips */ --md-code-fg-color: #1f2937; } /* The header is the product's bar: dark, full-bleed, with the tab row inside it rather than a second stripe in a different tone. */ .md-header { border-bottom: 1px solid #2c3a52; } .md-tabs { background: var(--md-primary-fg-color); border-bottom: 1px solid #2c3a52; } /* The search field sits ON the dark bar, so it needs its own surface. */ .md-search__form { background: #212e4d; } .md-search__form:hover { background: #2e3d61; } /* Status colours, from the product tokens. Used by admonitions only. */ :root { --md-typeset-mark-color: rgba(194, 65, 12, .18); } /* Height on .md-header__inner ONLY, never on .md-header. With navigation.tabs.sticky the outer header CONTAINS the tab row, and Material's JS reads its height to place the sticky sidebar and the back-to-top button. Pinning the outer box while its contents are taller makes JS read the wrong number and lands five things in the wrong place. 77px matches the product bar. See ARCHITECTURE 6.11. */ .md-header__inner { height: 77px; } /* The ONE thing Material hardcodes rather than measures, so the one thing that needs an override. Anchor landing is scroll-margin-top: calc(--md-scroll-margin - --md-scroll-offset), 6rem - 0.2rem = 116px under sticky tabs, sized for Material's own 4.8rem chrome. Ours is 126px, so a clicked heading landed 10px beneath the stripe. 7.5rem puts it 20px clear. Everything else Material derives by measuring the header, so it follows the height above on its own. The selector has to carry .md-header--lifted ~ .md-container and the media query, because that is the rule being overridden. */ @media screen and (min-width: 76.25em) { .md-header--lifted ~ .md-container .md-typeset :target { --md-scroll-margin: 7.5rem; } } /* Product lockup: 26px mark, 9px gap, then the wordmark. Material ships 8px of button padding plus a 20px title margin, which is a 32px gap. */ .md-header__button.md-logo { padding-right: 0; } .md-header__button.md-logo img { width: 26px; height: 26px; } /* Material's rule is `[dir=ltr] .md-header__title`, an attribute selector, so a plain class loses on specificity no matter the load order. Match it. */ .md-header__button.md-logo { margin-right: 0; } [dir=ltr] .md-header__title { margin-left: 9px; } /* Match the product bar: brand 15px/600, nav 14px (measured on /pricing). */ .md-header__title, .md-header__title .md-ellipsis { font-size: 15px; font-weight: 600; letter-spacing: 0; } .md-tabs__link { font-size: 14px; } /* The tab row continues the same dark block rather than starting a new stripe. */ .md-tabs__link { opacity: .78; } .md-tabs__link--active, .md-tabs__link:hover { opacity: 1; } /* The rail doubles as the page TOC (toc.integrate), so its labels are heading text rather than short nav words, and they need the width. */ @media screen and (min-width: 76.25em) { .md-sidebar { width: 15.5rem; } /* Remove the CONSTRAINT, do not out-width it. Material holds the nav to 11.5rem with `[dir=ltr] .md-sidebar__inner{padding-right:calc(100% - 11.5rem)}`. Forcing .md-nav wider instead made the content 8px wider than its 302px wrapper, so the rail scrolled horizontally and clipped labels mid-word. Chromium only: Material's rule is inside @supports selector(::-webkit-scrollbar) and does not apply in Firefox. */ [dir=ltr] .md-sidebar__inner { padding-right: 0; } /* One right edge, matching the one left edge. Everything in the frame starts at 160 (logo, tabs, sidebar, footer) but the content stopped at 1264 against the frame's 1280, because Material gives .md-content__inner `margin: 0 .8rem 0 1.2rem`. The left 1.2rem is the gutter from the sidebar and stays; the right .8rem only pulled the text off the frame edge, which is the "page is narrower than the header" mismatch. Scoped to the wide breakpoint: below it the frame reaches the viewport and that margin is what keeps text off the screen edge. */ .md-content__inner { margin-right: 0; } .md-nav__link { line-height: 1.45; } } /* The rust is for calls to action only. Material paints the scrollbar thumb with the accent on hover, which puts it on every scroll container on the page. */ ::-webkit-scrollbar-thumb:hover { background-color: var(--md-default-fg-color--light); } .md-sidebar__scrollwrap:hover, .md-search__scrollwrap:hover, .md-typeset pre > code:hover, .md-typeset__table:hover { scrollbar-color: var(--md-default-fg-color--light) transparent; } /* ─── Footer band ──────────────────────────────────────────────────────────── One dark footer, continuous with Material's own strip below it (same background token), so it reads as the product's footer rather than a white panel bolted above a dark one. Carries the feedback affordance, which used to be an inline note on 10 of 114 pages in five wordings, none of which worked. */ .gc-foot { background: var(--md-footer-bg-color, #020617); color: var(--md-footer-fg-color--light, #cbd5e1); padding: 30px 32px 26px; } .gc-foot__inner { max-width: 1120px; margin: 0 auto; /* = .md-grid, so it ends on the frame edge */ display: flex; gap: 48px; justify-content: space-between; align-items: flex-start; } .gc-foot__col { flex: 1 1 0; min-width: 0; } .gc-foot__col--end { text-align: right; } /* The product pages' link treatment, value for value from static/css/site.css: a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px } with hover to --text Body text in this band is already --muted, so a link is the same colour as its sentence and is marked by the underline alone, exactly as it reads on a product page. */ .gc-foot a { color: #cbd5e1; /* --muted */ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .gc-foot a:hover { color: #f8fafc; } /* --text */ @media screen and (max-width: 45em) { .gc-foot__inner { flex-direction: column; gap: 20px; } .gc-foot__col--end { text-align: left; } } .gc-foot__lead { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--md-footer-fg-color, #f8fafc); } .gc-foot__hint { margin: 0; font-size: 13px; } /* the only rule in the footer is the one above the meta strip */ .gc-foot kbd { display: inline-block; padding: 3px 7px; margin: 0 1px; font: 11px/1 var(--md-code-font-family, ui-monospace, monospace); color: #f8fafc; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-bottom-width: 2px; border-radius: 4px; } /* Material's meta strip carries the credit. Same ground as the band above it, with one hairline between, so the footer reads as one block like the product's does. */ .md-footer-meta { background: var(--md-footer-bg-color); border-top: 1px solid rgba(255,255,255,.08); } /* One meta line, opposite ends: generator credit left, our copyright right. NOT flex: "Made with" is a bare text node and the link is an element, so flex makes them two separate items and row-reverse renders "Material for MkDocs Made with". A float leaves the credit's inline flow untouched. */ /* .md-copyright is a flex ITEM of .md-footer-meta__inner, so it is only as wide as its text and a float lands right beside the credit. Make it span first. */ .md-footer-meta__inner { display: flex; } .md-copyright { flex: 1 1 auto; font-size: 12px; } .md-copyright__highlight { display: inline; float: right; } @media screen and (max-width: 45em) { .md-copyright__highlight { float: none; display: block; } } /* Changelog dateline. The source used