/* ========================================================================== Alpha theme documentation — visual layer -------------------------------------------------------------------------- Everything here is local. No @import, no @font-face, no external URL, no runtime request to any host but this one, which is why `theme.font` stays `false` in mkdocs.yml: Material's own font handling would fetch from Google. Nothing on this page depends on JavaScript. Every rule below is layout, color and type; with scripts off the site keeps the whole design, because the color scheme is written into the `` tag at build time rather than applied by the palette script. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Typefaces -------------------------------------------------------------------------- The reader's own system fonts, in the standard modern order: San Francisco on Apple, Segoe UI on Windows, Roboto on Android and most Linux. Nothing is downloaded, so text is painted on the first frame — which matters more to a merchant on a phone in a shop than any particular letterform would. That means the design cannot lean on a distinctive typeface, and every one of these three faces is a different width at the same size. So the work is done by the things that hold across all of them: the size steps, the weight at each step, the tracking, the line height, the measure, and the vertical rhythm. Those are set in section 3 and section 4, and they are the design. Two practical consequences of a system stack, both handled below: - Only 400 and 600 are safe weights. Roboto has no 600 and would synthesize it, so nothing here asks for 450, 500 or 590. - San Francisco and Segoe UI already tighten their own tracking at display sizes. The negative tracking on headings is therefore modest: the values a webfont would need here would over-tighten these faces. -------------------------------------------------------------------------- */ :root { --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial; --md-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono"; } body, input, button, select, textarea { font-feature-settings: "kern", "liga"; } /* -------------------------------------------------------------------------- 2. Color schemes -------------------------------------------------------------------------- Two custom schemes, `alpha` and `alpha-dark`, replacing Material's default and slate. The neutrals are warm: the theme this site documents is built on a warm linen paper (#F5F1EA) and a warm near-black ink (#1D1B18), and the docs share that temperature without copying the ground — a reading surface wants more light than a storefront, and screenshots of the theme editor need a neutral mount. One accent, an evergreen taken from the theme's own primary button, and it appears in exactly four places: links, the active navigation item, the active heading in the table of contents, and the focus ring. Measured contrast (WCAG 2.x relative luminance), light / dark: body text on page 16.74 / 15.58 secondary text on page 9.60 / 10.56 muted text on page 5.48 / 6.61 faint text on page 4.53 / 5.45 accent as text on page 7.70 / 9.73 control borders on page 3.34 / 3.44 (AA non-text is 3.0) Card, table and divider hairlines are decorative: the content beside them carries the boundary, so they are tuned for quiet, not for 3:1. -------------------------------------------------------------------------- */ [data-md-color-scheme="alpha"] { color-scheme: light; --alpha-bg: #fcfcfb; --alpha-sunken: #f5f4f1; --alpha-hover: #efede8; --alpha-hairline: #e6e3dc; --alpha-border: #d6d1c7; --alpha-border-control: #8f8a81; --alpha-text: #1d1b18; --alpha-text-2: #46433d; --alpha-muted: #6b6760; --alpha-faint: #78746c; --alpha-accent: #1a5c43; --alpha-accent-hover: #123f2e; --alpha-accent-soft: #eaf1ed; --alpha-accent-ring: rgb(26 92 67 / 0.32); --alpha-info-bg: #e4ecf7; --alpha-info-fg: #1e3a5f; --alpha-success-bg: #ddf3e4; --alpha-success-fg: #0f5132; --alpha-warning-bg: #fff1c2; --alpha-warning-fg: #664200; --alpha-error-bg: #fbe3e0; --alpha-error-fg: #8c1d13; } [data-md-color-scheme="alpha-dark"] { color-scheme: dark; --alpha-bg: #131211; --alpha-sunken: #1b1a18; --alpha-hover: #232120; --alpha-hairline: #2c2a26; --alpha-border: #3d3a35; --alpha-border-control: #736e66; --alpha-text: #edeae4; --alpha-text-2: #c7c2ba; --alpha-muted: #9e9990; --alpha-faint: #8f8a81; --alpha-accent: #86c9a6; --alpha-accent-hover: #a8dcc1; --alpha-accent-soft: #1a2a22; --alpha-accent-ring: rgb(134 201 166 / 0.38); --alpha-info-bg: #17202b; --alpha-info-fg: #a9c7ec; --alpha-success-bg: #152219; --alpha-success-fg: #8fd3ab; --alpha-warning-bg: #241d0f; --alpha-warning-fg: #e7c46a; --alpha-error-bg: #261917; --alpha-error-fg: #f0a69b; } /* Map the scheme onto Material's own variables. Both schemes share this block, so a color is defined once and only the two palettes above differ. */ [data-md-color-scheme="alpha"], [data-md-color-scheme="alpha-dark"] { --md-default-bg-color: var(--alpha-bg); --md-default-bg-color--light: var(--alpha-sunken); --md-default-bg-color--lighter: var(--alpha-hover); --md-default-bg-color--lightest: var(--alpha-hairline); --md-default-fg-color: var(--alpha-text); --md-default-fg-color--light: var(--alpha-muted); --md-default-fg-color--lighter: var(--alpha-border); --md-default-fg-color--lightest: var(--alpha-hairline); /* The header and the tab bar sit on the page ground rather than a slab of brand color. On every reference site the top of the page is the quietest part of it; a colored bar is the single loudest thing Material ships. */ --md-primary-fg-color: var(--alpha-bg); --md-primary-fg-color--light: var(--alpha-sunken); --md-primary-fg-color--dark: var(--alpha-hover); --md-primary-bg-color: var(--alpha-text); --md-primary-bg-color--light: var(--alpha-muted); --md-accent-fg-color: var(--alpha-accent-hover); --md-accent-fg-color--transparent: var(--alpha-accent-soft); --md-accent-bg-color: var(--alpha-bg); --md-accent-bg-color--light: var(--alpha-muted); --md-typeset-color: var(--alpha-text); --md-typeset-a-color: var(--alpha-accent); --md-typeset-mark-color: var(--alpha-warning-bg); --md-typeset-del-color: var(--alpha-error-bg); --md-typeset-ins-color: var(--alpha-success-bg); --md-typeset-table-color: var(--alpha-hairline); --md-typeset-kbd-color: var(--alpha-sunken); --md-typeset-kbd-accent-color: var(--alpha-bg); --md-typeset-kbd-border-color: var(--alpha-border); --md-code-fg-color: var(--alpha-text-2); --md-code-bg-color: var(--alpha-sunken); --md-code-hl-color: var(--alpha-accent-soft); --md-code-hl-number-color: var(--alpha-error-fg); --md-code-hl-special-color: var(--alpha-error-fg); --md-code-hl-function-color: var(--alpha-info-fg); --md-code-hl-constant-color: var(--alpha-info-fg); --md-code-hl-keyword-color: var(--alpha-error-fg); --md-code-hl-string-color: var(--alpha-accent); --md-code-hl-name-color: var(--alpha-text); --md-code-hl-operator-color: var(--alpha-muted); --md-code-hl-punctuation-color: var(--alpha-muted); --md-code-hl-comment-color: var(--alpha-muted); --md-code-hl-generic-color: var(--alpha-muted); --md-code-hl-variable-color: var(--alpha-text); --md-footer-fg-color: var(--alpha-text); --md-footer-fg-color--light: var(--alpha-muted); --md-footer-fg-color--lighter: var(--alpha-faint); --md-footer-bg-color: var(--alpha-bg); --md-footer-bg-color--dark: var(--alpha-bg); /* Depth comes from hairlines and tone, not from drop shadows. The two shadows that survive belong to things that genuinely float above the page: the search panel and the mobile navigation drawer. */ --md-shadow-z1: 0 0 0 1px var(--alpha-hairline); --md-shadow-z2: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.08); --md-shadow-z3: 0 2px 4px rgb(0 0 0 / 0.05), 0 16px 40px rgb(0 0 0 / 0.12); } /* -------------------------------------------------------------------------- 3. Type scale -------------------------------------------------------------------------- Material sets the root to 125%, so 1rem is 20px here and .8rem is 16px. The scale is the 1.2 ratio the theme's own design system uses, capped well below the storefront's display sizes: a documentation page has no hero. body 16px / 1.7 small 14px h1 32px 600 -0.021em h2 22px 600 -0.014em h3 18px 600 -0.008em h4 16px 600 eyebrow 11px 600 +0.06em uppercase Weight tops out at 600. The references that read as premium — Linear's changelog, Resend's docs — set headings at 500-600 and let size and space do the work; 700 on a 32px heading reads as a shout. -------------------------------------------------------------------------- */ .md-typeset { font-size: 0.8rem; line-height: 1.7; letter-spacing: 0; } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { color: var(--alpha-text); font-weight: 600; scroll-margin-top: 4.6rem; } .md-typeset h1 { margin: 0 0 0.5rem; font-size: 1.6rem; line-height: 1.22; letter-spacing: -0.018em; } /* A hairline above every top-level section. It separates far more cheaply than extra whitespace does, and on a phone it is the only thing that tells a reader mid-scroll that a new subject has started. */ .md-content__inner > h2 { margin: 2.4rem 0 0.9rem; padding-top: 1.9rem; border-top: 1px solid var(--alpha-hairline); font-size: 1.1rem; line-height: 1.32; letter-spacing: -0.011em; } .md-content__inner > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .md-typeset h3 { margin: 1.9rem 0 0.6rem; font-size: 0.9rem; line-height: 1.4; letter-spacing: -0.006em; } .md-typeset h4 { margin: 1.5rem 0 0.5rem; font-size: 0.8rem; line-height: 1.45; letter-spacing: -0.002em; } .md-typeset h5, .md-typeset h6 { margin: 1.3rem 0 0.4rem; color: var(--alpha-muted); font-size: 0.7rem; letter-spacing: 0.02em; text-transform: none; } .md-typeset p, .md-typeset ul, .md-typeset ol { margin: 0 0 0.9rem; } .md-typeset li { margin-bottom: 0.35rem; } .md-typeset li > ul, .md-typeset li > ol { margin-top: 0.35rem; } /* The standfirst under a page title. One class, applied with attr_list. */ .md-typeset .lede { max-width: 24rem; margin-bottom: 1.6rem; color: var(--alpha-muted); font-size: 0.88rem; line-height: 1.6; letter-spacing: -0.005em; } .md-typeset hr { margin: 1.6rem 0; border-bottom: 1px solid var(--alpha-hairline); } .md-typeset a { color: var(--alpha-accent); text-decoration: underline; text-decoration-color: var(--alpha-border); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 120ms, text-decoration-color 120ms; } .md-typeset a:hover, .md-typeset a:focus-visible { color: var(--alpha-accent-hover); text-decoration-color: currentcolor; } .md-typeset strong, .md-typeset b { font-weight: 600; } /* The page title carries no anchor. The permalink is the page's own URL, and the invisible pilcrow reserves enough width to wrap a long title onto a second, empty line on a phone. */ .md-typeset h1 .headerlink { display: none; } .md-typeset .headerlink { color: var(--alpha-border); transition: color 120ms; } .md-typeset :hover > .headerlink, .md-typeset :target > .headerlink, .md-typeset .headerlink:focus { color: var(--alpha-accent); } /* Anything numeric lines up in columns: prices, sizes, step numbers. Taken straight from the theme's own type rules. */ .md-typeset table, .md-typeset code, .md-typeset kbd { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 4. Measure and page frame -------------------------------------------------------------------------- The reading column is capped at 560px, measured rather than guessed: at 16px that is 72 characters a line in San Francisco, which sets the most characters of the three faces, and about 68 in the widest of them. The whole 65 to 75 range therefore holds on every platform. Wider than that and a reader loses the line return; this audience is reading with the Shopify theme editor open beside the browser, often in half a screen. The outer grid is deliberately wider than the reading column. Both navigation rails stay pinned to the edges of the window while the prose sits in the middle of a large empty field — the arrangement Mintlify and Resend both use, and the cheapest way to make content dominate without shrinking the navigation to the point of uselessness. -------------------------------------------------------------------------- */ .md-grid { max-width: 68rem; } .md-content__inner { max-width: 28rem; margin: 0 auto; padding: 1.4rem 0.8rem 2.4rem; } .md-content__inner::before { display: none; /* Material's spacer; the padding above replaces it */ } .md-main__inner { margin-top: 0; } /* -------------------------------------------------------------------------- 5. Header, tabs and search -------------------------------------------------------------------------- */ .md-header { background-color: var(--alpha-bg); box-shadow: none; border-bottom: 1px solid var(--alpha-hairline); color: var(--alpha-text); transition: none; } .md-header--shadow { box-shadow: none; border-bottom-color: var(--alpha-hairline); } .md-header__title { font-size: 0.72rem; font-weight: 600; letter-spacing: -0.009em; margin-left: 0.6rem; } .md-header__topic:first-child { font-weight: 600; } .md-header__button { color: var(--alpha-muted); opacity: 1; transition: color 120ms; } .md-header__button:hover { color: var(--alpha-text); opacity: 1; } /* Tabs: no filled bar, no uppercase. The active tab is marked by a two-pixel accent rule under it, the way every current docs site marks it. */ .md-tabs { background-color: var(--alpha-bg); border-bottom: 1px solid var(--alpha-hairline); color: var(--alpha-muted); overflow: visible; } .md-tabs__list { margin-left: 0.4rem; } .md-tabs__item { padding: 0; margin-right: 1rem; } .md-tabs__link { margin-top: 0; padding: 0.5rem 0; font-size: 0.68rem; font-weight: 400; opacity: 1; color: var(--alpha-muted); border-bottom: 2px solid transparent; transition: color 120ms, border-color 120ms; } .md-tabs__link:hover, .md-tabs__link:focus-visible { color: var(--alpha-text); } .md-tabs__link--active, .md-tabs__item--active .md-tabs__link { color: var(--alpha-text); border-bottom-color: var(--alpha-accent); } /* Search input: a bordered pill on the page ground rather than a translucent well cut into a colored bar. */ .md-search__form { background-color: var(--alpha-bg); border: 1px solid var(--alpha-border-control); border-radius: 999px; box-shadow: none; height: 1.5rem; transition: border-color 120ms, background-color 120ms; } .md-search__form:hover { background-color: var(--alpha-bg); border-color: var(--alpha-text-2); } [data-md-toggle="search"]:checked ~ .md-header .md-search__form { background-color: var(--alpha-bg); border-color: var(--alpha-accent); box-shadow: 0 0 0 3px var(--alpha-accent-ring); } .md-search__input { font-size: 0.68rem; color: var(--alpha-text); } .md-search__input::placeholder { color: var(--alpha-faint); } .md-search__icon, .md-search__options .md-icon { color: var(--alpha-muted); } .md-search__output { border-radius: 10px; box-shadow: var(--md-shadow-z2); border: 1px solid var(--alpha-hairline); } .md-search-result__meta { color: var(--alpha-muted); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background-color: var(--alpha-sunken); } .md-search-result__article { padding-left: 1.4rem; } .md-search-result__link:focus, .md-search-result__link:hover, .md-search-result__more summary:hover { background-color: var(--alpha-hover); } .md-search-result__title { font-weight: 600; color: var(--alpha-text); } .md-search-result__teaser { color: var(--alpha-muted); } .md-search-result mark { color: var(--alpha-accent); background-color: transparent; font-weight: 600; } /* Version picker, when mike publishes more than one version. */ .md-version__current { color: var(--alpha-muted); font-size: 0.62rem; font-weight: 400; padding: 0.1rem 0.5rem; border: 1px solid var(--alpha-border); border-radius: 999px; margin-left: 0.5rem; } .md-version__list { border-radius: 8px; border: 1px solid var(--alpha-hairline); box-shadow: var(--md-shadow-z2); background-color: var(--alpha-bg); } .md-version__link { color: var(--alpha-text-2); font-size: 0.66rem; } .md-version__link:hover, .md-version__link:focus { color: var(--alpha-accent); opacity: 1; } /* -------------------------------------------------------------------------- 6. Navigation sidebar -------------------------------------------------------------------------- Small, muted and unboxed. The active page is the only thing in the rail with any color: a soft accent tint and an accent label. Section labels are an 11px tracked eyebrow, which is the theme's own uppercase label treatment (0.06em tracking) reused here. -------------------------------------------------------------------------- */ .md-sidebar { padding-top: 1.4rem; } .md-sidebar--primary { width: 12.1rem; } .md-nav { font-size: 0.65rem; line-height: 1.5; } .md-nav__title { padding: 0 0.6rem 0.4rem; color: var(--alpha-faint); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: none; } .md-nav__item { padding: 0; } .md-nav__list { padding-left: 0; } .md-nav__link { display: flex; align-items: center; margin: 1px 0; padding: 0.24rem 0.5rem; border-radius: 6px; color: var(--alpha-muted); font-weight: 400; transition: color 120ms, background-color 120ms; } .md-nav__link:hover, .md-nav__link:focus-visible { color: var(--alpha-text); background-color: var(--alpha-hover); } .md-nav__link--active, .md-nav__link[href].md-nav__link--active:hover { color: var(--alpha-accent); background-color: var(--alpha-accent-soft); font-weight: 600; } .md-nav--primary .md-nav__title { background-color: transparent; color: var(--alpha-faint); } /* Nested sections indent against a hairline instead of a bullet or a chevron. */ .md-nav__item--nested > .md-nav { margin-left: 0.5rem; padding-left: 0.4rem; border-left: 1px solid var(--alpha-hairline); } /* The mobile drawer. Below 1220px the primary rail becomes a sheet, and it is the one surface that genuinely floats, so it keeps its shadow. */ @media screen and (max-width: 76.1875em) { .md-nav--primary .md-nav__title { background-color: var(--alpha-sunken); border-bottom: 1px solid var(--alpha-hairline); box-shadow: none; color: var(--alpha-text); font-size: 0.7rem; letter-spacing: -0.008em; text-transform: none; line-height: 2.4rem; height: 2.4rem; padding: 0 0.8rem; } .md-nav--primary .md-nav__title .md-nav__button { display: none; } .md-nav--primary .md-nav__link { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0; font-size: 0.7rem; } .md-nav--primary, .md-nav--primary .md-nav { background-color: var(--alpha-bg); } .md-nav__source { background-color: var(--alpha-sunken); } } /* -------------------------------------------------------------------------- 7. Table of contents -------------------------------------------------------------------------- The lightest thing on the page. It is a wayfinding aid, not a second navigation, so it is a step smaller than the left rail and carries a thin active rule rather than a fill. -------------------------------------------------------------------------- */ .md-sidebar--secondary .md-nav__title { padding-left: 0.75rem; } .md-sidebar--secondary .md-nav__link { margin: 0; padding: 0.22rem 0.6rem; border-left: 2px solid transparent; border-radius: 0; font-size: 0.63rem; color: var(--alpha-faint); } .md-sidebar--secondary .md-nav__link:hover { background-color: transparent; color: var(--alpha-text); } .md-sidebar--secondary .md-nav__link--active, .md-sidebar--secondary .md-nav__link--passed.md-nav__link--active { background-color: transparent; border-left-color: var(--alpha-accent); color: var(--alpha-accent); font-weight: 600; } /* -------------------------------------------------------------------------- 8. Card grid -------------------------------------------------------------------------- Used on the landing page for the three routes a merchant can take. Hairline border, 10px radius, no shadow, and the whole card lifts a step on hover so it reads as one target even though only the link inside it is clickable. -------------------------------------------------------------------------- */ .md-typeset .grid { grid-gap: 0.7rem; /* Cards stay one to a row at the reading measure. A 560px column split two or three ways gives a 25-character line, which is a worse read than a tall card, and three routes in a two-column grid always orphan one. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); margin: 1.2rem 0 1.6rem; } /* On a wide screen the row can have the space the prose does not want. The reading measure is left-aligned in its column, so there is a deep empty field between it and the table of contents; the card row grows into that field and nowhere else. The breakpoint is derived, not chosen: at this width the content column is wide enough that a 640px band still clears the table of contents by more than a gutter, so the row can never grow underneath it. Below the breakpoint the cards stack, which is also what they do on a phone. */ @media screen and (min-width: 83.25em) { .md-typeset .grid.cards { width: 40rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } } .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { margin: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--alpha-hairline); border-radius: 10px; background-color: var(--alpha-bg); box-shadow: none; transition: border-color 140ms, background-color 140ms; } .md-typeset .grid.cards > ul > li:hover, .md-typeset .grid.cards > ul > li:focus-within { border-color: var(--alpha-border); background-color: var(--alpha-sunken); box-shadow: none; } .md-typeset .grid.cards > ul > li > :first-child { margin-top: 0; } .md-typeset .grid.cards > ul > li > p:first-child > strong { display: block; margin-bottom: 0.15rem; color: var(--alpha-text); font-size: 0.82rem; font-weight: 600; letter-spacing: -0.009em; } .md-typeset .grid.cards > ul > li > hr { margin: 0.6rem 0 0.7rem; border-bottom: 1px solid var(--alpha-hairline); } .md-typeset .grid.cards > ul > li > p { color: var(--alpha-text-2); font-size: 0.72rem; line-height: 1.65; } .md-typeset .grid.cards > ul > li > p:last-child { margin-bottom: 0; } /* The call to action at the foot of a card. */ .md-typeset a.card-link { display: inline-flex; align-items: baseline; gap: 0.25em; font-weight: 600; text-decoration: none; } .md-typeset a.card-link::after { content: "\2192"; transition: transform 140ms; } .md-typeset a.card-link:hover::after { transform: translateX(2px); } /* -------------------------------------------------------------------------- 9. Admonitions and collapsible blocks -------------------------------------------------------------------------- Material's default is a colored title bar over a white body with a heavy left bar, and it hard-codes a color per callout type deep in its own cascade. Replaced with a single tinted, hairline box and an inline title, so a callout reads as an aside rather than as an alarm. Every selector here is prefixed with `[data-md-color-scheme]`, the attribute Material sets on ``. That is one step more specific than Material's own `.md-typeset .note > .admonition-title`, which is what these rules have to outrank, and it avoids `!important` entirely. The four semantic color pairs are the ones the theme itself ships, which is the clearest place for the two products to look related. -------------------------------------------------------------------------- */ [data-md-color-scheme] .md-typeset .admonition, [data-md-color-scheme] .md-typeset details { margin: 1.1rem 0; padding: 0.7rem 0.9rem; border: 1px solid var(--alpha-adm-border, var(--alpha-hairline)); border-radius: 10px; background-color: var(--alpha-adm-bg, var(--alpha-sunken)); box-shadow: none; color: var(--alpha-text-2); font-size: 0.72rem; line-height: 1.65; } [data-md-color-scheme] .md-typeset .admonition > .admonition-title, [data-md-color-scheme] .md-typeset details > summary { margin: 0 0 0.35rem; padding: 0 0 0 1.35rem; border: 0; border-radius: 0; background-color: transparent; color: var(--alpha-adm-fg, var(--alpha-text)); font-size: 0.72rem; font-weight: 600; letter-spacing: -0.005em; } [data-md-color-scheme] .md-typeset .admonition > .admonition-title:last-child, [data-md-color-scheme] .md-typeset details > summary:last-child { margin-bottom: 0; } [data-md-color-scheme] .md-typeset .admonition > .admonition-title::before, [data-md-color-scheme] .md-typeset details > summary::before { top: 0.15rem; left: 0; width: 0.95rem; height: 0.95rem; background-color: var(--alpha-adm-fg, var(--alpha-text)); } [data-md-color-scheme] .md-typeset .admonition > .admonition-title::after, [data-md-color-scheme] .md-typeset details > summary::after { top: 0.15rem; right: 0; color: var(--alpha-adm-fg, var(--alpha-muted)); } .md-typeset .admonition > :last-child, .md-typeset details > :last-child { margin-bottom: 0; } /* Body copy inside a tinted callout stays on the page ink, not the semantic hue: the hue belongs to the title and the icon. */ .md-typeset .admonition > :not(.admonition-title), .md-typeset details > :not(summary) { color: var(--alpha-text-2); font-size: inherit; } .md-typeset .admonition a, .md-typeset details a { color: var(--alpha-adm-fg, var(--alpha-accent)); } [data-md-color-scheme] .md-typeset .note, [data-md-color-scheme] .md-typeset .info, [data-md-color-scheme] .md-typeset .abstract, [data-md-color-scheme] .md-typeset .question, [data-md-color-scheme] .md-typeset .example { --alpha-adm-bg: var(--alpha-info-bg); --alpha-adm-fg: var(--alpha-info-fg); --alpha-adm-border: transparent; } [data-md-color-scheme] .md-typeset .tip, [data-md-color-scheme] .md-typeset .success { --alpha-adm-bg: var(--alpha-success-bg); --alpha-adm-fg: var(--alpha-success-fg); --alpha-adm-border: transparent; } [data-md-color-scheme] .md-typeset .warning, [data-md-color-scheme] .md-typeset .caution { --alpha-adm-bg: var(--alpha-warning-bg); --alpha-adm-fg: var(--alpha-warning-fg); --alpha-adm-border: transparent; } [data-md-color-scheme] .md-typeset .danger, [data-md-color-scheme] .md-typeset .failure, [data-md-color-scheme] .md-typeset .bug { --alpha-adm-bg: var(--alpha-error-bg); --alpha-adm-fg: var(--alpha-error-fg); --alpha-adm-border: transparent; } [data-md-color-scheme] .md-typeset .quote { --alpha-adm-bg: var(--alpha-sunken); --alpha-adm-fg: var(--alpha-text); --alpha-adm-border: var(--alpha-hairline); } .md-typeset details > summary { cursor: pointer; } .md-typeset details[open] > summary { margin-bottom: 0.5rem; } .md-typeset .admonition:focus-within, .md-typeset details:focus-within { box-shadow: 0 0 0 3px var(--alpha-accent-ring); } /* -------------------------------------------------------------------------- 10. Code -------------------------------------------------------------------------- */ .md-typeset code, .md-typeset pre > code, .md-typeset kbd { font-size: 0.86em; } .md-typeset :not(pre) > code { padding: 0.1em 0.35em; border: 1px solid var(--alpha-hairline); border-radius: 5px; background-color: var(--alpha-sunken); color: var(--alpha-text-2); word-break: break-word; } .md-typeset a > code { color: inherit; border-color: currentcolor; } .md-typeset pre > code { padding: 0.8rem 0.9rem; } .md-typeset .highlight, .md-typeset .highlighttable { margin: 1.1rem 0; } .md-typeset pre { margin: 0; } .md-typeset pre > code, .md-typeset .highlighttable .linenos { border: 1px solid var(--alpha-hairline); border-radius: 10px; background-color: var(--alpha-sunken); line-height: 1.6; } .md-typeset .md-clipboard { color: var(--alpha-faint); } .md-typeset .md-clipboard:hover, .md-typeset .md-clipboard:focus { color: var(--alpha-accent); } .md-typeset kbd { padding: 0.1em 0.45em; border-radius: 5px; box-shadow: 0 0 0 1px var(--alpha-border), 0 1px 0 var(--alpha-border); background-color: var(--alpha-sunken); color: var(--alpha-text-2); font-weight: 600; } /* Content tabs — one tab per style variant. */ .md-typeset .tabbed-labels { box-shadow: inset 0 -1px var(--alpha-hairline); } .md-typeset .tabbed-labels > label { color: var(--alpha-muted); font-size: 0.68rem; font-weight: 400; } .md-typeset .tabbed-labels > label:hover { color: var(--alpha-text); } .md-typeset .tabbed-set > input:checked + label { color: var(--alpha-accent); font-weight: 600; } .md-typeset .tabbed-labels--linked > label > a { text-decoration: none; } :root { --md-tabbed-indicator-color: var(--alpha-accent); } /* -------------------------------------------------------------------------- 11. Tables -------------------------------------------------------------------------- Horizontal rules only. No outer box, no zebra striping, no fill behind the header row — a column heading in a tracked 11px eyebrow already reads as a heading. The wrapper scrolls on its own so a wide settings table never pushes the page sideways on a phone. -------------------------------------------------------------------------- */ .md-typeset__table { margin: 1.2rem 0; min-width: 0; } .md-typeset table:not([class]) { border: 0; border-radius: 0; box-shadow: none; font-size: 0.72rem; line-height: 1.6; background-color: transparent; } .md-typeset table:not([class]) th { padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--alpha-border); background-color: transparent; color: var(--alpha-muted); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: bottom; white-space: nowrap; } .md-typeset table:not([class]) td { padding: 0.55rem 0.8rem 0.55rem 0; border-top: 1px solid var(--alpha-hairline); color: var(--alpha-text-2); vertical-align: top; } .md-typeset table:not([class]) tr:hover { background-color: transparent; } .md-typeset table:not([class]) th:last-child, .md-typeset table:not([class]) td:last-child { padding-right: 0; } /* -------------------------------------------------------------------------- 12. Figures, images and lightbox -------------------------------------------------------------------------- */ .md-typeset img, .md-typeset video { border-radius: 8px; border: 1px solid var(--alpha-hairline); background-color: var(--alpha-sunken); } .md-typeset figure { margin: 1.3rem auto; } .md-typeset figcaption { max-width: 100%; margin: 0.5rem auto 0; color: var(--alpha-muted); font-size: 0.66rem; line-height: 1.55; } /* -------------------------------------------------------------------------- 13. Footer -------------------------------------------------------------------------- Previous / next as two bordered cards, then a single quiet meta line. No dark slab: the page should end, not stop. -------------------------------------------------------------------------- */ .md-footer { background-color: var(--alpha-bg); } /* The previous / next pair lines up with the reading column above it rather than with the page, so the eye does not travel sideways at the end of an article. Material's footer is one full-width grid with no rails in it, so the row mirrors whatever the rails occupy at that breakpoint and is then capped at the measure. It follows the content column's own habit: centered while there is no navigation rail to sit beside, left-aligned once there is one. */ .md-footer-nav__inner, .md-footer__inner { justify-content: center; gap: 0.7rem; max-width: 68rem; margin-inline: auto; padding: 0 0.8rem; } /* The table of contents rail appears. */ @media screen and (min-width: 60em) { .md-footer-nav__inner, .md-footer__inner { padding-right: 12.9rem; } } /* The navigation rail appears and the content column left-aligns. */ @media screen and (min-width: 76.25em) { .md-footer-nav__inner, .md-footer__inner { justify-content: flex-start; padding-left: 14.1rem; } } .md-footer__link { align-items: center; /* Material sizes these to their content, which truncates a page title to four characters. Half the measure each instead, or the whole measure when a page has only one neighbor, so the name is always readable. */ flex: 1 1 0; min-width: 0; max-width: 12.85rem; gap: 0.2rem; margin: 1.4rem 0 0; padding: 0.7rem 0.9rem; border: 1px solid var(--alpha-hairline); border-radius: 10px; opacity: 1; transition: border-color 140ms, background-color 140ms; } .md-footer__link:only-child { max-width: 26.4rem; } [dir="ltr"] .md-footer__link--next, [dir="rtl"] .md-footer__link--next { margin-inline: 0; } .md-footer__link:hover, .md-footer__link:focus-visible { border-color: var(--alpha-border); background-color: var(--alpha-sunken); opacity: 1; } .md-footer__direction { color: var(--alpha-faint); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 1; } .md-footer__title { flex-grow: 1; margin-bottom: 0; padding: 0; font-size: 0.72rem; font-weight: 600; line-height: 1.4; } .md-footer__title .md-ellipsis { color: var(--alpha-text); } .md-footer__button { color: var(--alpha-muted); margin: 0; padding: 0; } .md-footer-meta { background-color: var(--alpha-bg); border-top: 1px solid var(--alpha-hairline); margin-top: 2rem; } .md-footer-meta__inner { max-width: 68rem; padding: 0.9rem 0.8rem; } .md-copyright, .md-copyright__highlight { color: var(--alpha-faint); font-size: 0.6rem; line-height: 1.6; } .md-copyright a, .md-footer-meta a { color: var(--alpha-muted); } .md-copyright a:hover, .md-footer-meta a:hover { color: var(--alpha-accent); } /* -------------------------------------------------------------------------- 14. Focus, selection and small print -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--alpha-accent); outline-offset: 2px; border-radius: 3px; } .md-typeset ::selection { background-color: var(--alpha-accent-soft); } .md-typeset .md-button { padding: 0.4rem 0.9rem; border: 1px solid var(--alpha-border-control); border-radius: 8px; color: var(--alpha-text); font-size: 0.72rem; font-weight: 600; text-decoration: none; transition: background-color 140ms, border-color 140ms; } .md-typeset .md-button:hover, .md-typeset .md-button:focus-visible { background-color: var(--alpha-hover); border-color: var(--alpha-text-2); color: var(--alpha-text); } .md-typeset .md-button--primary { background-color: var(--alpha-accent); border-color: var(--alpha-accent); color: var(--alpha-bg); } .md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus-visible { background-color: var(--alpha-accent-hover); border-color: var(--alpha-accent-hover); color: var(--alpha-bg); } .md-typeset blockquote { border-left: 2px solid var(--alpha-border); color: var(--alpha-muted); padding-left: 0.9rem; } .md-typeset .footnote { font-size: 0.7rem; color: var(--alpha-muted); } .md-typeset abbr[title] { border-bottom: 1px dotted var(--alpha-border-control); text-decoration: none; cursor: help; } .md-typeset .task-list-control .task-list-indicator::before { background-color: var(--alpha-border); } .md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator::before { background-color: var(--alpha-accent); } /* Back to top, which Material floats over the content on long pages. */ .md-top { padding: 0.3rem 0.7rem; border: 1px solid var(--alpha-border); border-radius: 999px; background-color: var(--alpha-bg); box-shadow: var(--md-shadow-z2); color: var(--alpha-text-2); font-size: 0.62rem; font-weight: 400; } .md-top:hover, .md-top:focus-visible { background-color: var(--alpha-sunken); color: var(--alpha-text); } /* Skip link, for keyboard readers. */ .md-skip { background-color: var(--alpha-text); color: var(--alpha-bg); border-radius: 6px; font-size: 0.66rem; } /* -------------------------------------------------------------------------- 15. Small screens -------------------------------------------------------------------------- Verified at 390px. The reading column takes the full width less a 1rem gutter, the type scale steps down once at the top end, and nothing relies on hover. -------------------------------------------------------------------------- */ @media screen and (max-width: 44.9375em) { .md-content__inner { padding: 1.1rem 1rem 2rem; } .md-typeset h1 { font-size: 1.35rem; letter-spacing: -0.015em; } .md-content__inner > h2 { margin-top: 1.9rem; padding-top: 1.5rem; font-size: 1rem; } .md-typeset h3 { font-size: 0.86rem; } .md-typeset .lede { font-size: 0.84rem; } .md-typeset .grid.cards > ul > li { padding: 0.9rem 1rem 1rem; } .md-footer-nav__inner, .md-footer__inner { padding: 0 1rem; } /* Material hides the previous page's name on phones and leaves a bare arrow. A merchant deciding whether to tap it needs to know where it goes, so the name comes back and the two links share the row. */ .md-footer__link--prev .md-footer__title { display: block; } .md-footer__title { font-size: 0.66rem; } .md-typeset pre > code { padding: 0.7rem 0.8rem; } }