/* JetBrains Mono latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Noto Sans Hebrew hebrew */ @font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/noto-sans-hebrew-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* Inter latin (variable, weights 400-700, optical size fixed for text) */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* docs.zestt.io Zestt brand: charcoal #3E3737, sand #E8DDD5, yellow #FED739, green #29CC6A. Layout: light header and reading column, and a code column that runs the full page height (light panels here, near-black ones in the dark palette). Colours are tokens on :root, the light palette. The dark palette is dark.css: the build appends it for the system setting and for a saved choice from the header's theme menu (data-theme="light|dark" on ). */ :root { --ground: #FFFFFF; --ink: #2B2626; --ink-2: #574F4F; --muted: #776C6C; --rule: #EDE7E2; --rule-strong: #DCD2CA; --tint: #F7F2EE; --hover: #F3EDE8; --link: #1D7443; --focus: #29CC6A; --field-focus: #3E3737; --yellow: #FED739; --slash: #C99700; --req: #A6570B; --req-bg: rgb(166 87 11 / 0.08); /* Sidebar group names and chevrons share one quiet grey. */ --nav-dim: #BABABA; --req-rule: rgb(166 87 11 / 0.25); --header: #FFFFFF; --header-glass: rgb(255 255 255 / 0.9); --header-ink: #2B2626; --header-muted: #776C6C; --header-field: rgb(43 38 38 / 0.04); --header-field-hover: rgb(43 38 38 / 0.08); --header-field-hover-strong: rgb(43 38 38 / 0.12); --header-rule: rgb(43 38 38 / 0.14); --header-rule-strong: rgb(43 38 38 / 0.3); --header-edge: #F3EFEC; /* Popovers that hang off the header (tooltip, language menu) stay dark. */ --header-pop: #2B2626; --header-pop-ink: #FBF7F4; --header-pop-hover: rgb(255 255 255 / 0.1); /* The environment toggle: its frame, and the pressed Sandbox button as a sand pill with the page's ink. */ --env-bg: #FFFFFF; --env-rule: #F2ECE9; --env-on-bg: #F2ECE9; --env-on-ink: #2B2626; --header-pop-fill: rgb(255 255 255 / 0.16); /* Which icon the theme menu shows: the sun in light, the moon in dark. */ --show-sun: block; --show-moon: none; /* Code panels: light on the light page (the dark palette turns them near-black). */ --panel: #FDFBFA; --panel-bar: #F6F2EF; --panel-rule: #E6DFD9; --panel-hover: rgb(43 38 38 / 0.06); --panel-edge: rgb(43 38 38 / 0.22); --panel-edge-strong: rgb(43 38 38 / 0.4); --panel-shadow: 0 10px 28px rgb(20 14 14 / 0.18); --code-ink: #2B2626; --code-dim: #7C716C; --t-key: #9A4A0C; --t-str: #1D7443; --t-num: #7A5700; --t-lit: #B02E30; --t-pun: #8A7F7A; --t-com: #948782; --get-fg: #17703B; --get-bg: #E2F5E9; --post-fg: #9A4A0C; --post-bg: #FFEBDA; --put-fg: #7A5700; --put-bg: #FFF2C6; --del-fg: #B02E30; --del-bg: #FDE4E4; --evt-fg: #4F4747; --evt-bg: #EFE8E3; /* Method colours inside code panels: badges in the endpoint list, status codes in the response picker. */ --get-d: #17703B; --post-d: #9A4A0C; --put-d: #7A5700; --del-d: #B02E30; --get-dbg: #E2F5E9; --post-dbg: #FFEBDA; --put-dbg: #FFF2C6; --del-dbg: #FDE4E4; --plan-fg: #7A5700; --plan-bg: #FFF4D1; --note-bg: #F2F8F4; --note-rule: #C9E7D3; --warn-bg: #FFF8E3; --warn-rule: #F1DC97; --bad-bg: #FDF0F0; --bad-rule: #F3C6C6; /* "Copied" and "link copied" states of the buttons and field anchors. */ --done-fg: #147A3D; --done-bg: #E6F9EE; --done-rule: #29CC6A; --done-ico: #1FA857; /* Background of a field the page just scrolled to; fades out. */ --flash: #F7F3F1; /* Lightness of the "Copy for AI" hover gradient: pastel on the light page, deep on the dark one, so the label keeps its colour on both. */ --ai-l: 93%; /* Dialogs (search, try it): the dimmed page behind them, and their frame (only visible in dark). */ --backdrop: rgb(24 18 18 / 0.55); --dialog-rule: transparent; --sans: "Inter", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mono: "JetBrains Mono", "Noto Sans Hebrew", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --top-h: 56px; --side-w: 256px; /* One page geometry for guides and reference: a 740px text column, a 64px gutter, then a 220px side column ("On this page" in guides; the code column in the reference starts on the same line). */ --doc-w: 740px; --toc-w: 220px; --doc-gap: 64px; --page-pad: clamp(16px, 4vw, 56px); color-scheme: light; } /* ---- base ------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); } body { margin: 0; background: var(--ground); color: var(--ink); } .app { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--ink); background: var(--ground); min-height: 100vh; } code, pre, kbd { font-family: var(--mono); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; } code { direction: ltr; unicode-bidi: isolate; } a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; } button, select, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; inset-inline-start: 12px; top: -48px; background: var(--yellow); color: #2B2626; padding: 8px 14px; border-radius: 6px; z-index: 60; font-weight: 600; } .skip:focus { top: 8px; } /* ---- header ----------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 16px; padding-inline: calc((var(--top-h) - 34px) / 2); /* same as the space above and below the 34px controls */ background: var(--header-glass); color: var(--header-ink); /* The bottom edge fades in once content has scrolled under the header (site.js sets is-scrolled). */ border-bottom: 1px solid transparent; transition: border-color 200ms ease; /* Content scrolling under the header shows through, blurred. */ -webkit-backdrop-filter: blur(34px) saturate(1.4); backdrop-filter: blur(34px) saturate(1.4); } .top.is-scrolled { border-bottom-color: var(--header-edge); } .brand-area { display: flex; align-items: center; gap: 12px; flex: none; width: calc(var(--side-w) - 40px); } .brand { display: flex; align-items: center; gap: 9px; color: var(--header-ink); text-decoration: none; flex: none; } .brand-mark { height: 34px; width: auto; display: block; } .brand-mark path[fill="white"] { fill: var(--header-ink); } .brand-mark rect + path[fill="white"] { fill: #fff; } /* Header menus (language, download): a native

, closed by site.js on outside click or Escape. */ .menu { position: relative; flex: none; } .menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px 9px; border-radius: 8px; background: var(--header-field); border: 1px solid var(--header-rule); color: var(--header-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; } .menu summary::-webkit-details-marker { display: none; } .menu summary .ico { flex: none; margin-inline-end: 1px; } .menu summary .chev { color: var(--header-muted); transition: transform .15s; } .menu summary:hover, .menu[open] summary { border-color: var(--header-rule-strong); background: var(--header-field-hover); } .menu summary:hover .chev, .menu[open] summary .chev { color: var(--header-ink); } .menu summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .menu[open] summary .chev { transform: rotate(180deg); } .menu-list { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 50; min-width: 132px; margin: 0; padding: 4px; list-style: none; background: var(--header-pop); color: var(--header-pop-ink); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); } .menu-end .menu-list { inset-inline-start: auto; inset-inline-end: 0; } /* The download menu is icon-only at every width, on a quiet fill that deepens on hover, with the label in a tooltip (and in aria-label for assistive tech). Its icons match the theme icon's 16px. */ .menu-dl summary span { display: none; } .menu-dl summary { padding-inline: 9px; background: var(--header-field-hover); border-color: transparent; } .menu-dl summary:hover, .menu-dl[open] summary { background: var(--header-field-hover-strong); border-color: transparent; } .menu-dl summary .ico, .menu-dl summary .chev { width: 16px; height: 16px; } .menu-dl summary .chev path { stroke-width: 1.15; } /* the chevron is drawn on a 12 grid: 1.15 there is 1.5px at 16px */ .menu-list a, .menu-list button, .menu-list .lang-off { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 5px; font-size: 13.5px; text-decoration: none; color: inherit; white-space: nowrap; } .menu-list button { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; } .menu-list a:hover, .menu-list button:hover { background: var(--header-pop-hover); } /* The current choice sits on a fill, with the yellow dot at its end. */ .menu-list a[aria-current="true"], .menu-list button[aria-current="true"], .menu-list a[aria-current="true"]:hover, .menu-list button[aria-current="true"]:hover { background: var(--header-pop-fill); font-weight: 500; } .menu-list a[aria-current="true"]::after, .menu-list button[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow, #F5C518); } .menu-lbl { display: inline-flex; align-items: center; gap: 9px; } .menu-lbl svg { flex: none; opacity: 0.8; } .menu-list .lang-off { opacity: 0.45; cursor: not-allowed; } .menu-list .menu-fmt { font-family: var(--mono); font-size: 11px; opacity: 0.6; } /* Theme menu, last in the group: a tertiary icon-only summary (sun or moon, whichever palette is in use), no frame until hovered, with a tooltip; the choice (light, dark, system) in the list. site.js sets data-theme on . */ .menu-theme summary { width: 34px; padding-inline: 0; justify-content: center; background: transparent; border-color: transparent; color: var(--header-ink); } .menu-theme summary:hover, .menu-theme[open] summary { background: var(--header-field-hover); border-color: transparent; color: var(--header-ink); } .menu-theme summary .ico-sun { display: var(--show-sun); } .menu-theme summary .ico-moon { display: var(--show-moon); } .menu-theme summary::after, .menu-dl summary::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 50; padding: 5px 8px; border-radius: 6px; background: var(--header-pop); color: var(--header-pop-ink); font-size: 12px; font-weight: 400; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; translate: 0 2px; transition: opacity .12s, translate .12s; } .menu-theme:not([open]) summary:hover::after, .menu-theme:not([open]) summary:focus-visible::after, .menu-dl:not([open]) summary:hover::after, .menu-dl:not([open]) summary:focus-visible::after { opacity: 1; translate: 0 0; transition-delay: .25s; } .search-btn { position: absolute; left: 50%; transform: translateX(-50%); /* centred in the header (the header is always LTR) */ display: flex; align-items: center; gap: 10px; width: min(360px, 34vw); height: 34px; padding-inline: 12px 6px; background: var(--header-field); border: 1px solid var(--header-rule); border-radius: 8px; color: var(--header-muted); font-size: 14px; cursor: pointer; text-align: start; } .search-btn:hover { color: var(--header-ink); border-color: var(--header-rule-strong); } .search-btn-text { flex: 1; } .search-btn kbd, .search-esc { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--header-rule); color: var(--header-muted); background: var(--header-field); } .top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .top-link { display: inline-flex; align-items: center; height: 34px; padding-inline: 12px; border-radius: 8px; background: var(--header-field); border: 1px solid var(--header-rule); color: var(--header-ink); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; } .top-link:hover { border-color: var(--header-rule-strong); background: var(--header-field-hover); } .top-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .env { position: relative; display: flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--env-bg); border: 1px solid var(--env-rule); } .env button { border: 0; background: transparent; color: var(--header-muted); padding: 3px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 500; transition: color 180ms ease; } /* The pressed choice sits on a pill that slides between the buttons; site.js measures the pressed button into --env-x and --env-w. Charcoal for the sandbox, coral for production. */ .env::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--env-w, 0px); translate: var(--env-x, 0px) 0; border-radius: 5px; background: var(--env-on-bg); transition: translate 220ms cubic-bezier(.2, .8, .2, 1), width 220ms cubic-bezier(.2, .8, .2, 1), background-color 220ms ease; } :root[data-env="live"] .env::before { background: #FF8A8B; } .env button:hover { color: var(--header-ink); } /* Tooltip for the environment toggle: pure CSS, shown on hover and keyboard focus. It hangs off the hovered button, its end edge flush with that button and the arrow under the button's middle. */ .env button { position: relative; } .env button::after { content: attr(data-tip); position: absolute; top: calc(100% + 14px); inset-inline-end: 0; z-index: 50; width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 8px 11px; background: var(--header-pop); color: var(--header-pop-ink); font-size: 13px; font-weight: 400; line-height: 1.4; text-align: start; border-radius: 7px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility 0s .12s; pointer-events: none; } .env button::before { content: ""; position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 51; border: 6px solid transparent; border-bottom-color: var(--header-pop); border-top: 0; opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s; pointer-events: none; } /* The header is always LTR; the tooltip text follows the page language. */ [dir="rtl"] .env button::after { direction: rtl; unicode-bidi: isolate; } .env button:hover::after, .env button:focus-visible::after, .env button:hover::before, .env button:focus-visible::before { opacity: 1; visibility: visible; transform: none; transition-delay: .25s, .25s, 0s; } :root:not([data-env="live"]) .env button[data-env-btn="sandbox"] { color: var(--env-on-ink); } :root[data-env="live"] .env button[data-env-btn="live"] { color: #2B0D0D; } @media (prefers-reduced-motion: reduce) { .env::before, .env button { transition: none; } } .menu-btn { display: none; border: 0; background: transparent; color: var(--header-ink); padding: 6px; margin-inline-start: -6px; cursor: pointer; } /* ---- search dialog ---------------------------------------------------- */ .search { width: min(640px, calc(100vw - 32px)); max-height: min(560px, 80vh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--dialog-rule); border-radius: 14px; background: var(--ground); color: var(--ink); box-shadow: 0 30px 90px rgb(20 14 14 / 0.35); overflow: hidden; } .search::backdrop { background: var(--backdrop); } .search[open] { display: flex; } .search-box { display: flex; flex-direction: column; width: 100%; min-height: 0; font-family: var(--sans); } .search-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); color: var(--muted); } .search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); padding: 4px 0; } .search-field input::-webkit-search-cancel-button { display: none; } .search-clear { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--tint); color: var(--muted); cursor: pointer; padding: 0; } .search-clear:hover { background: var(--rule-strong); color: var(--ink); } .search-esc { color: var(--muted); border-color: var(--rule-strong); background: var(--tint); cursor: pointer; } .search-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; } .search-results a { display: grid; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; } .search-results [aria-selected="true"] a { background: var(--tint); } .search-results .m { justify-self: center; text-align: center; min-width: 52px; } .sr-main { display: flex; flex-direction: column; min-width: 0; } .sr-title { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-path { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-where { font-size: 12px; color: var(--muted); } .sr-kind { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding-inline: 7px; justify-self: center; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule-strong); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .search-results mark { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--yellow); } .search-empty { margin: 0; padding: 20px 18px 24px; color: var(--muted); font-size: 14px; } /* ---- shell + sidebar -------------------------------------------------- */ .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); } .side { position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* no sideways scroll, whatever pokes out */ padding: 52px 12px 56px; background: var(--ground); /* the top padding matches the columns beside it */ scrollbar-width: thin; } .nav-grp { margin-top: 22px; } .nav-grp:first-child { margin-top: 0; } .nav-grp ul { list-style: none; margin: 0; padding: 0; } .nav-grp > ul { display: flex; flex-direction: column; gap: 2px; } .nav-grp-name { margin: 0 0 6px; padding-inline: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-dim); } [dir="rtl"] .nav-grp-name { letter-spacing: 0; font-size: 12px; } .nav-tag-link { display: block; padding: 5px 10px; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.45; } .nav-tag-link:hover { background: var(--hover); color: var(--ink); } .nav-ops a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px; border-radius: 5px; color: var(--ink-2); text-decoration: none; font-size: 13px; line-height: 1.4; } .nav-ops a:hover { color: var(--ink); background: var(--hover); } .nav-ops a.is-here { color: var(--ink); background: var(--hover); } .nav-op-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Method badge in the sidebar: the same pill as the `.m` badge elsewhere, one size smaller. */ .nm { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 17px; padding-inline: 5px; border-radius: 4px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; direction: ltr; } .nm-get { color: var(--get-fg); background: var(--get-bg); } .nm-post { color: var(--post-fg); background: var(--post-bg); } .nm-put, .nm-patch { color: var(--put-fg); background: var(--put-bg); } .nm-delete { color: var(--del-fg); background: var(--del-bg); } /* ---- marks ------------------------------------------------------------ */ .m { display: inline-block; flex: none; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 5px; line-height: 1.45; direction: ltr; } .m-get { color: var(--get-fg); background: var(--get-bg); } .m-post { color: var(--post-fg); background: var(--post-bg); } .m-put, .m-patch { color: var(--put-fg); background: var(--put-bg); } .m-delete { color: var(--del-fg); background: var(--del-bg); } .m-event { color: var(--evt-fg); background: var(--evt-bg); } .sc { font-family: var(--mono); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; } .sc-2 { color: var(--get-fg); } .sc-4 { color: var(--post-fg); } .sc-5 { color: var(--del-fg); } .pp { color: var(--link); } .sl { color: var(--slash); padding-inline: 0.04em; } /* ---- split pages (reference + overview) ------------------------------- */ .main-split { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h)); } .main-split > .ref { flex: none; } .main-split > .row-foot { flex: 1 0 auto; } .main-doc { min-width: 0; padding-inline: var(--page-pad); padding-block: 44px 40px; } .ref { display: block; } .row { display: grid; grid-template-columns: minmax(0, max(calc(var(--page-pad) + var(--doc-w) + var(--doc-gap)), calc((100% - var(--doc-w) - var(--doc-gap) - var(--toc-w)) / 2 + var(--doc-w) + var(--doc-gap)))) minmax(0, 1fr); } .doc-col { min-width: 0; padding-block: 52px; padding-inline: var(--page-pad) var(--doc-gap); display: grid; grid-template-columns: minmax(0, var(--doc-w)); justify-content: end; align-content: start; /* The divider between sections runs under the text column only, like the guide pages. */ background: linear-gradient(var(--divider), var(--divider)) no-repeat right var(--doc-gap) bottom 0 / var(--doc-w) 1px; } [dir="rtl"] .doc-col { background-position: left var(--doc-gap) bottom 0; } /* Both columns of a row share one divider colour; the code column draws it under its panels. */ .row { --divider: var(--rule); --code-pad: clamp(18px, 2.2vw, 36px); } .doc-col > * { min-width: 0; } /* The divider under the panels is as wide as they are: the column's inner width, capped at 440px. */ .code-col { min-width: 0; padding-block: 52px 28px; padding-inline: var(--code-pad); background: linear-gradient(var(--divider), var(--divider)) no-repeat left var(--code-pad) bottom 0 / min(440px, calc(100% - 2 * var(--code-pad))) 1px; } .code-col:empty { background: none; } /* The panels never grow past 440px and stay at the start of the code column. */ .stick { position: sticky; top: calc(var(--top-h) + 24px); display: flex; flex-direction: column; gap: 16px; max-width: 440px; max-height: calc(100vh - var(--top-h) - 48px); } .row-head .doc-col { padding-block: 56px 48px; } .row-foot { --divider: transparent; } .row-foot .doc-col { padding-block: 28px 40px; } .row-sub { --divider: transparent; } .row-sub .doc-col { padding-block: 44px 0; } .page-head { max-width: var(--doc-w); } .eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--yellow); transform: skewX(-24deg); } [dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 13px; } /* Breadcrumb trail above the title */ .crumbs { margin: 0 0 10px; font-size: 13px; color: var(--muted); } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .crumbs li { display: flex; align-items: center; gap: 6px; } .crumbs li + li::before { content: ""; width: 5px; height: 5px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.6; margin-inline-end: 2px; } [dir="rtl"] .crumbs li + li::before { transform: rotate(135deg); } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; } /* Title row of a reference page or an endpoint: the heading, and "Copy for AI" at the end of the same line. */ .head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .head-row > h1, .head-row > h2 { min-width: 0; } /* Endpoint headings carry their actions at the end of the row: Try it, then Copy for AI. */ .head-actions { display: flex; align-items: center; gap: 8px; flex: none; } h1 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.032em; font-weight: 700; text-wrap: balance; } [dir="rtl"] h1 { letter-spacing: -0.01em; } .lede { margin: 14px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } .head-link { margin: 18px 0 0; font-size: 14.5px; font-weight: 500; } .notice { margin: 16px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--tint); border: 1px solid var(--rule-strong); color: var(--ink-2); font-size: 14.5px; } .doc-col h2 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -0.022em; font-weight: 650; text-wrap: balance; } .doc-col h2 .evt { font-size: 21px; font-weight: 500; } .doc-col h3 { margin: 38px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 10px; } .doc-col p { margin: 14px 0 0; color: var(--ink-2); text-wrap: pretty; } .doc-col .page-head + p { margin-top: 28px; } .doc-col ul:not([class]) { margin: 14px 0 0; padding-inline-start: 20px; color: var(--ink-2); } .doc-col ul:not([class]) li { margin-top: 6px; } .doc-col :not(pre) > code, .prose :not(pre) > code { font-size: 0.86em; background: var(--tint); border: 1px solid var(--rule); padding: 0 5px; border-radius: 5px; color: var(--ink); } .doc-col strong { color: var(--ink); font-weight: 600; } .anchor { color: inherit; text-decoration: none; } .anchor:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px; } .ct { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); } .route { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 14px; padding: 5px 14px 5px 5px; border-radius: 8px; background: var(--tint); border: 1px solid var(--rule); } .route .path, .doc-col .route code.path { font-size: 14px; color: var(--ink); background: none; border: 0; padding: 0; overflow-wrap: anywhere; } .meta { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); } .chip-scope { font-family: var(--mono); font-size: 11.5px; } .chip-k { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .chip-plan { color: var(--plan-fg); background: var(--plan-bg); border-color: transparent; font-weight: 500; } .chip-soon { color: var(--ink-2); background: var(--tint); border-color: var(--rule-strong); font-weight: 500; } .chip-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .desc { color: var(--ink-2); } /* attributes */ .f-list { display: flex; flex-direction: column; } .f { padding-block: 14px; border-bottom: 1px solid var(--rule); } .f:last-child { border-bottom: 0; } /* Field header: name · type, then constraint badges, then the anchor button. */ .f-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; } .f-id { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } .doc-col code.f-name, .f-name { font-size: 13.5px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; } .f-type { font-size: 12.5px; color: var(--muted); } .f-type::before { content: "\00b7"; margin-inline-end: 8px; opacity: 0.7; } .f-flags { display: inline-flex; align-items: center; gap: 4px; } .f-flag { display: inline-flex; align-items: center; height: 18px; padding-inline: 6px; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .f-flag.req { color: var(--req); background: var(--req-bg); border-color: var(--req-rule); } .doc-col p.f-desc { margin: 5px 0 0; font-size: 14.5px; line-height: 1.55; } .doc-col p.f-con { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); } .f-enum { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; } .f-enum-label { font-size: 12px; color: var(--muted); margin-inline-end: 2px; } .doc-col .f-enum code { font-size: 11.5px; background: var(--ground); border: 1px solid var(--rule); } .f-kids { margin-top: 10px; } .f-kids > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 12px; } .f-kids > summary:hover { color: var(--ink); background: var(--tint); } .f-kids > summary::-webkit-details-marker { display: none; } /* Plus / minus icon drawn with gradients so it scales cleanly and turns into a minus when open. */ .f-kids > summary::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background-color: var(--muted); -webkit-mask: linear-gradient(#000, #000) center / 8px 1.6px no-repeat, linear-gradient(#000, #000) center / 1.6px 8px no-repeat; mask: linear-gradient(#000, #000) center / 8px 1.6px no-repeat, linear-gradient(#000, #000) center / 1.6px 8px no-repeat; transition: transform 160ms ease, background-color 120ms ease; } .f-kids > summary:hover::before { background-color: var(--ink); } .f-kids[open] > summary::before { -webkit-mask: linear-gradient(#000, #000) center / 8px 1.6px no-repeat; mask: linear-gradient(#000, #000) center / 8px 1.6px no-repeat; } .f-kids .k-open, .f-kids[open] .k-closed { display: none; } .f-kids[open] .k-open { display: inline; } .f-kids > .f-list { margin-top: 10px; padding-inline: 16px; border: 1px solid var(--rule); border-radius: 10px; } .resp-list { display: flex; flex-direction: column; } .resp { border-bottom: 1px solid var(--rule); } .resp:last-child { border-bottom: 0; } .resp > summary { display: flex; align-items: baseline; gap: 12px; padding-block: 11px; cursor: pointer; list-style: none; } .resp > summary::-webkit-details-marker { display: none; } .resp-desc { font-size: 14.5px; color: var(--ink-2); } .doc-col p.resp-h { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); } .resp > .f-list { margin-bottom: 14px; padding-inline: 16px; border: 1px solid var(--rule); border-radius: 10px; } /* overview blocks */ .defs { margin: 20px 0 0; } .defs > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; padding-block: 12px; border-top: 1px solid var(--rule); } .defs > div:last-child { border-bottom: 1px solid var(--rule); } .defs dt { font-size: 14px; font-weight: 600; color: var(--ink); } .defs dd { margin: 0; font-size: 14.5px; color: var(--ink-2); } .groups { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .grp { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px 6px; } .doc-col h3.grp-name { margin: 0 0 4px; padding: 0; border: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .doc-col .grp ul { list-style: none; margin: 0; padding: 0; clip-path: inset(1px 0 0 0); } .grp li { border-top: 1px solid var(--rule); } .grp a { display: block; padding-block: 9px; text-decoration: none; } .grp-tag { display: block; font-size: 15px; font-weight: 600; color: var(--ink); } .grp a:hover .grp-tag { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; } .grp-desc { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .doc-col .grp-desc code { font-size: 0.9em; } /* tables (overview, guides) */ .table-wrap { margin-top: 18px; overflow-x: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 10px; } table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { text-align: start; padding: 9px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; } th { font-weight: 600; font-size: 12.5px; color: var(--muted); background: var(--tint); white-space: nowrap; } tr:last-child td { border-bottom: 0; } td code { white-space: nowrap; } .doc-col td { color: var(--ink-2); } /* ---- code panels ------------------------------------------------------ */ /* The panel does not clip, so tooltips and menus can leave it; the bar and the code round their own corners. */ .panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--panel-rule); border-radius: 10px; direction: ltr; color: var(--code-ink); } .stick > .panel:first-child:not(:only-child) { flex: 0 0 auto; } .stick > .panel:first-child:not(:only-child) .code { max-height: 36vh; } .stick > .panel:last-child:not(:only-child) { flex: 0 1 auto; } .panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding-inline: 14px 8px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-rule); border-radius: 9px 9px 0 0; } .panel-label { min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--code-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-label .nm { margin-inline-end: 4px; font-size: 11px; } .panel-label .nm-get { color: var(--get-d); } .panel-label .nm-post { color: var(--post-d); } .panel-label .nm-put, .panel-label .nm-patch { color: var(--put-d); } .panel-label .nm-delete { color: var(--del-d); } .panel-label .sl, .ep-path .sl { color: var(--slash); } .panel-label .pp, .ep-path .pp { color: var(--t-str); } .panel-tools { display: flex; align-items: center; gap: 6px; flex: none; } /* Code language picker inside a dark panel: the header menu component in panel colours. */ .lang-pick summary { height: 27px; padding-inline: 9px 6px; gap: 5px; border-radius: 6px; font-size: 12.5px; font-weight: 500; background: transparent; border: 1px solid var(--panel-edge); color: var(--code-ink); } .lang-pick summary .chev { color: var(--code-dim); } .lang-pick summary:hover, .lang-pick[open] summary { border-color: var(--panel-edge-strong); background: var(--panel-hover); } .lang-pick summary:hover .chev, .lang-pick[open] summary .chev { color: var(--code-ink); } .lang-pick .menu-list { inset-inline-start: auto; inset-inline-end: 0; min-width: 120px; background: var(--panel-bar); color: var(--code-ink); border: 1px solid var(--panel-rule); box-shadow: var(--panel-shadow); } .lang-pick .menu-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: start; cursor: pointer; white-space: nowrap; } .lang-pick .menu-list button:hover { background: var(--panel-hover); } .lang-pick .menu-list button[aria-current="true"], .lang-pick .menu-list button[aria-current="true"]:hover { background: var(--panel-hover); font-weight: 500; } .lang-pick .menu-list button[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); } /* Every picker sits at the same level, so an open one is lifted above the pickers of the panels below it. */ .lang-pick { z-index: 6; } .lang-pick[open] { z-index: 7; } /* Response status picker: the language picker with status codes in mono, coloured by class. */ .status-pick summary, .status-pick .menu-list button { font-family: var(--mono); } .status-pick .sc-2 { color: var(--get-d); } .status-pick .sc-4 { color: var(--post-d); } .status-pick .sc-5 { color: var(--del-d); } /* Panel copy: icon only, no frame; a green check while "Copied" (the label stays for screen readers and the tooltip). */ .copy { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--code-dim); cursor: pointer; padding: 0; } .copy:hover { color: var(--code-ink); background: var(--panel-hover); } .copy .ico { width: 16px; height: 16px; } .copy .ico-check { display: none; } .copy .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .copy.is-done, .copy.is-done:hover { color: var(--done-ico); background: var(--done-bg); pointer-events: none; } .copy.is-done .ico-copy { display: none; } .copy.is-done .ico-check { display: block; } .copy::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0; z-index: 5; padding: 5px 8px; border-radius: 6px; background: var(--header-pop); color: var(--header-pop-ink); font-family: var(--sans); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; } .copy:hover::after, .copy:focus-visible::after, .copy.is-done::after { opacity: 1; transform: none; transition-delay: .2s; } .copy.is-done::after { transition-delay: 0s; } .code { margin: 0; padding: 14px 16px 16px; overflow: auto; min-height: 0; border-radius: 0 0 9px 9px; color: var(--code-ink); font-size: 12.5px; line-height: 1.65; tab-size: 2; text-align: left; scrollbar-width: thin; scrollbar-color: var(--code-dim) transparent; } .code code { font-family: inherit; } .t-key { color: var(--t-key); } .t-str { color: var(--t-str); } .t-num { color: var(--t-num); } .t-lit { color: var(--t-lit); } .t-pun { color: var(--t-pun); } .t-com { color: var(--t-com); font-style: italic; } :root:not([data-env="live"]) .env-live { display: none; } :root[data-env="live"] .env-sandbox { display: none; } .ep-list { list-style: none; margin: 0; padding: 6px; } .ep-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; } .ep-list a:hover { background: var(--panel-hover); } .ep-path { font-family: var(--mono); font-size: 12.5px; color: var(--code-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .code-col .m { justify-self: start; } .code-col .m-get { color: var(--get-d); background: var(--get-dbg); } .code-col .m-post { color: var(--post-d); background: var(--post-dbg); } .code-col .m-put, .code-col .m-patch { color: var(--put-d); background: var(--put-dbg); } .code-col .m-delete { color: var(--del-d); background: var(--del-dbg); } .code-col .m-event { color: var(--code-ink); background: var(--panel-hover); } /* ---- guides (single column) ------------------------------------------- */ .doc { display: grid; grid-template-columns: minmax(0, var(--doc-w)) var(--toc-w); gap: var(--doc-gap); justify-content: center; } .main-doc .foot { max-width: calc(var(--doc-w) + var(--doc-gap) + var(--toc-w)); margin-inline: auto; } .prose { min-width: 0; } .prose > .page-head { padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; } .prose h2 { margin: 48px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -0.022em; font-weight: 650; text-wrap: balance; } [dir="rtl"] .prose h2 { letter-spacing: 0; } .prose h3 { margin: 32px 0 0; font-size: 17px; line-height: 1.3; font-weight: 600; } .prose p, .prose li { max-width: 68ch; color: var(--ink-2); } .prose p { margin: 12px 0 0; } .prose ul, .prose ol { margin: 12px 0 0; padding-inline-start: 22px; } .prose li { margin-top: 6px; } .prose li::marker { color: var(--muted); } .prose strong { color: var(--ink); font-weight: 600; } .prose .panel { margin-top: 18px; } .prose .panel .code { max-height: 540px; } .steps { list-style: none; counter-reset: step; padding-inline-start: 0 !important; } .steps > li { counter-increment: step; position: relative; padding-inline-start: 38px; margin-top: 14px; } .steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--yellow); color: #2B2626; } .note, .warn { margin-top: 18px; padding: 12px 16px; border-radius: 10px; border: 1px solid; } .note { background: var(--note-bg); border-color: var(--note-rule); } .warn { background: var(--warn-bg); border-color: var(--warn-rule); } .note > :first-child, .warn > :first-child { margin-top: 0; } .note strong:first-child, .warn strong:first-child { display: block; } .toc { position: sticky; top: calc(var(--top-h) + 44px); align-self: start; font-size: 13.5px; } .toc-title { margin: 0 0 10px; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } [dir="rtl"] .toc-title { letter-spacing: 0; font-size: 12px; } .toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--rule); } .toc a { display: block; padding-block: 4px; padding-inline: 12px 0; margin-inline-start: -1px; color: var(--ink-2); text-decoration: none; border-inline-start: 2px solid transparent; line-height: 1.4; } .toc a:hover { color: var(--ink); } .toc a.is-here { color: var(--ink); font-weight: 600; border-inline-start-color: var(--ink); } /* Reserve the bold width so a heading does not wrap only while it is the current one. */ .toc a::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; } .foot { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); } .main-doc .foot { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--rule); } .foot a { color: var(--ink-2); text-decoration: none; } .foot a:hover { color: var(--ink); text-decoration: underline; } /* ---- narrower --------------------------------------------------------- */ @media (max-width: 1280px) { .doc { grid-template-columns: minmax(0, var(--doc-w)); } .main-doc .foot { max-width: var(--doc-w); } .toc { display: none; } } @media (max-width: 1140px) { .row { grid-template-columns: minmax(0, 1fr); } .row { --divider: transparent; } .doc-col { padding-block: 44px 28px; padding-inline: var(--page-pad); } .doc-col { justify-content: start; } .code-col { padding-block: 24px; } .code-col:empty { display: none; } .row + .row .doc-col { border-top: 1px solid var(--rule); } .stick { position: static; max-height: none; } .stick > .panel .code { max-height: 480px; } .row-head .code-col { padding-block: 20px; } } @media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); } .menu-btn { display: inline-flex; } .brand-area { width: auto; } .side { position: fixed; top: var(--top-h); inset-inline-start: 0; z-index: 35; width: min(300px, 86vw); transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: 12px 0 40px rgb(0 0 0 / 0.18); } [dir="rtl"] .side { transform: translateX(102%); } .side.is-shown, [dir="rtl"] .side.is-shown { transform: none; } .search-btn { position: static; transform: none; width: auto; flex: 1; max-width: 320px; } } @media (max-width: 600px) { .top { gap: 10px; } .search-btn kbd { display: none; } .brand-mark { height: 28px; } .search-btn-text { font-size: 13px; } .env button { padding: 3px 7px; font-size: 12px; } .defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } @media (max-width: 440px) { .search-btn-text { display: none; } .search-btn { flex: none; width: 34px; padding: 0; justify-content: center; } /* Phone width: tighter gaps, a smaller lockup and an icon-only download menu give the header controls more room. */ .top { gap: 8px; } .brand-mark { height: 24px; } .env button { padding: 3px 6px; font-size: 11.5px; } .menu-dl summary .chev { display: none; } .menu-dl summary { padding-inline: 8px; } } @media (prefers-reduced-motion: reduce) { .side { transition: none; } } /* long paths and event names wrap instead of pushing the page sideways */ .route .path { min-width: 0; } .doc-col h2 code, .doc-col h2 .evt { overflow-wrap: anywhere; } /* ---- actions ---------------------------------------------------------- */ .op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-try { background: var(--yellow); color: #2B2626; border: 1px solid #E9C21F; } .btn-try:hover { background: #FFE15C; } .btn-try .ico-play { flex: none; margin-inline-start: -2px; } .btn-try:disabled { background: var(--tint); color: var(--muted); border-color: var(--rule-strong); cursor: not-allowed; } .btn-ghost { background: var(--ground); color: var(--ink-2); border: 1px solid var(--rule); font-weight: 500; } .btn-ghost:hover { color: var(--ink); background: var(--tint); } .btn.is-done { color: var(--link); border-color: var(--link); } /* "Copy for AI" (page and endpoint): a filled button with no frame, sparkle icon, and a green check once the text is on the clipboard. */ .btn-ai { background: var(--tint); border: 0; color: var(--ink); } /* Hover: the fill sweeps through the usual AI hues (a gradient layer behind the label that fades in and keeps drifting) at a lightness that keeps the label readable as it is, and the sparkle turns with a little overshoot. */ .btn-ai { position: relative; isolation: isolate; overflow: hidden; } .btn-ai::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, hsl(246 96% var(--ai-l)) 0%, hsl(280 100% var(--ai-l)) 25%, hsl(334 100% var(--ai-l)) 50%, hsl(17 100% var(--ai-l)) 75%, hsl(246 96% var(--ai-l)) 100%); background-size: 300% 100%; opacity: 0; transition: opacity 220ms ease; } .btn-ai:hover::before { opacity: 1; animation: ai-sweep 2.4s linear infinite; } .btn-ai .ico-spark { transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); } .btn-ai:hover .ico-spark { transform: rotate(135deg) scale(1.15); } /* One period of the gradient is the layer's full width (3 button widths), so the loop is seamless. */ @keyframes ai-sweep { from { background-position: 0% 50%; } to { background-position: 150% 50%; } } @media (prefers-reduced-motion: reduce) { .btn-ai:hover::before { animation: none; } .btn-ai .ico-spark { transition: none; } } .btn-ai .ico { flex: none; } .btn-ai .ico-spark { color: currentColor; } .btn-ai .ico-check { display: none; } .btn-ai.is-done, .btn-ai.is-done:hover { background: var(--done-bg); color: var(--done-fg); pointer-events: none; } .btn-ai.is-done::before { display: none; } .btn-ai.is-done .ico-spark { display: none; } .btn-ai.is-done .ico-check { display: block; color: var(--done-ico); } /* field anchors */ .f { scroll-margin-top: calc(var(--top-h) + 24px); } /* Per-field anchor: a small link button revealed on hover, with a tooltip; turns into a green check once copied. */ .f-link { position: relative; margin-inline-start: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; opacity: 0; color: var(--muted); background: var(--ground); border: 1px solid var(--rule); text-decoration: none; transition: opacity 120ms ease, color 220ms ease, background-color 220ms ease, border-color 220ms ease; } .f:hover > .f-head .f-link, .f-link:focus-visible, .f-link.is-done { opacity: 1; } .f-link:hover { color: var(--ink); background: var(--tint); border-color: var(--rule-strong); } .f-link .ico-check { display: none; } .f-link.is-done, .f-link.is-done:hover { color: var(--done-ico); background: var(--done-bg); border-color: var(--done-rule); } .f-link.is-done .ico-link { display: none; } .f-link.is-done .ico-check { display: block; } /* Every copy control (panel copy, "Copy link", "Copy for AI", field anchor) eases into the green "Copied" state and back out of it; the icon that takes over (the check, then the original one, marked is-undone by site.js) pops in. */ .is-done > .ico-check, .is-undone > .ico:not(.ico-check) { animation: icon-pop 260ms cubic-bezier(.34, 1.56, .64, 1); } @keyframes icon-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .is-done > .ico-check, .is-undone > .ico:not(.ico-check) { animation: none; } } .f-link::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); inset-inline-end: 0; z-index: 5; padding: 5px 8px; border-radius: 6px; background: var(--header-pop); color: var(--header-pop-ink); font-family: var(--sans); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; } .f-link:hover::after, .f-link:focus-visible::after, .f-link.is-done::after { opacity: 1; transform: none; transition-delay: .2s; } .f-link.is-done::after { transition-delay: 0s; } /* Heading anchors: the same button, inline after the heading text, shown while the heading is hovered. */ .h-link { width: 26px; height: 26px; margin-inline-start: 10px; vertical-align: middle; } h2:hover > .h-link, .head-row:hover .h-link { opacity: 1; } .is-target { animation: target-flash 2.2s ease-out; } @keyframes target-flash { 0%, 35% { background: var(--flash); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .is-target { animation: none; background: var(--flash); } } /* ---- availability ----------------------------------------------------- */ .soon-pill { display: inline-flex; align-items: center; height: 17px; padding-inline: 6px; margin-inline-start: 7px; vertical-align: 1px; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule-strong); color: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .nav-tag[data-soon] .nav-tag-link, .nav-ops li[data-soon] a { color: var(--muted); } .nav-grp-name .soon-pill { margin-inline-start: 8px; } .nm-soon { min-width: 0; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule); color: var(--muted); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; line-height: 1; } .ep-list li[data-soon] .ep-path { opacity: 0.55; } .ep-list .soon-pill { background: var(--panel-hover); border-color: var(--panel-rule); color: var(--code-dim); } .ep-list a { grid-template-columns: 56px minmax(0, 1fr) auto; } .op.is-soon .route { opacity: 0.75; } .notice-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .notice-soon .soon-pill { margin: 0 2px; } .grp li[data-soon] .grp-tag { color: var(--ink-2); } .only-live { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); cursor: pointer; } /* Tooltip for the switch: site.js puts it on at a fixed position under the switch, so the sidebar's scrolling (which clips everything inside it) cannot cut it off. */ .side-tip { position: fixed; z-index: 60; width: max-content; max-width: 240px; padding: 8px 11px; border-radius: 7px; background: var(--header-pop); color: var(--header-pop-ink); font-family: var(--sans); font-size: 12.5px; line-height: 1.4; pointer-events: none; opacity: 0; translate: 0 2px; transition: opacity .12s, translate .12s; } .side-tip.is-shown { opacity: 1; translate: 0 0; transition-delay: .4s; } @media (prefers-reduced-motion: reduce) { .side-tip { transition: none; } } .only-live:hover { background: var(--hover); border-color: var(--rule-strong); color: var(--ink); } /* The checkbox is drawn as a switch: a pill track, and a knob that slides to the end when on. */ .only-live input { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 30px; height: 18px; border-radius: 999px; position: relative; background: var(--rule-strong); cursor: pointer; transition: background-color 160ms ease; } .only-live input::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: translate 160ms cubic-bezier(.2, .8, .2, 1); } .only-live input:hover { background: var(--muted); } /* The on state also follows data-only-live on , which the boot script sets before the first paint, so a page that loads with the filter on shows the switch on from the start instead of sliding it on once site.js runs. */ .only-live input:checked, :root[data-only-live] .only-live input { background: var(--ink); } .only-live input:checked::before, :root[data-only-live] .only-live input::before { translate: 12px 0; } [dir="rtl"] .only-live input:checked::before, [dir="rtl"]:root[data-only-live] .only-live input::before { translate: -12px 0; } @media (prefers-reduced-motion: reduce) { .only-live input, .only-live input::before { transition: none; } } /* Hide what is not available yet: everywhere you navigate from, never the page you are reading. A hidden item is display: none with a box of no height, no spacing and no opacity, so that while the filter is being toggled (is-filtering on , set by site.js for the duration) it can collapse and expand between the two states: the box clips its content as it shrinks and the rest of the page slides into place, nothing drawn over anything; display flips at the end of a collapse and at the start of an expansion. */ :root[data-only-live] .nav-grp[data-soon]:not(:has([aria-current="page"])), :root[data-only-live] .nav-tag[data-soon]:not([data-current]), :root[data-only-live] .nav-tag:not([data-soon]) .nav-ops li[data-soon], :root[data-only-live] .grp[data-soon], :root[data-only-live] .grp li[data-soon], :root[data-only-live] .ref:not([data-all-soon]) .op[data-soon], :root[data-only-live] .ref:not([data-all-soon]) .ep-list li[data-soon], :root[data-only-live] .ref:not([data-all-soon]) .notice-soon { display: none; block-size: 0; min-block-size: 0; margin-block: 0; padding-block: 0; border-block-width: 0; opacity: 0; overflow: clip; } @supports (interpolate-size: allow-keywords) { :root.is-filtering .nav-grp[data-soon], :root.is-filtering .nav-tag[data-soon], :root.is-filtering .nav-ops li[data-soon], :root.is-filtering .grp[data-soon], :root.is-filtering .grp li[data-soon], :root.is-filtering .op[data-soon], :root.is-filtering .ep-list li[data-soon], :root.is-filtering .notice-soon { overflow: clip; transition: block-size 260ms cubic-bezier(.2, .8, .2, 1), margin-block 260ms cubic-bezier(.2, .8, .2, 1), padding-block 260ms cubic-bezier(.2, .8, .2, 1), border-block-width 260ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease, display 260ms allow-discrete; } @starting-style { :root.is-filtering .nav-grp[data-soon], :root.is-filtering .nav-tag[data-soon], :root.is-filtering .nav-ops li[data-soon], :root.is-filtering .grp[data-soon], :root.is-filtering .grp li[data-soon], :root.is-filtering .op[data-soon], :root.is-filtering .ep-list li[data-soon], :root.is-filtering .notice-soon { block-size: 0; margin-block: 0; padding-block: 0; border-block-width: 0; opacity: 0; } } } /* ---- try it ----------------------------------------------------------- */ .try { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 1px solid var(--dialog-rule); border-radius: 14px; background: var(--ground); color: var(--ink); box-shadow: 0 30px 90px rgb(20 14 14 / 0.35); overflow: hidden; } .try::backdrop { background: var(--backdrop); } .try[open] { display: flex; } .try-box { display: flex; flex-direction: column; width: 100%; min-height: 0; margin: 0; font-family: var(--sans); } .try-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); } .try-kicker { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .try-title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .try-title code { font-size: 14px; font-weight: 500; } .try-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .try-x:hover { color: var(--ink); background: var(--tint); } .try-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; } .try-form { padding: 18px 22px 22px; overflow-y: auto; min-height: 0; } .try-result { padding: 18px; min-height: 0; display: flex; } .try-result .panel { flex: 1; min-width: 0; } /* a long line scrolls inside the code box instead of widening the panel */ .try-result .code { flex: 1; max-height: none; } .try-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .try-field label, .try-group-title { font-size: 12.5px; font-weight: 600; color: var(--ink); } .try-field label .req-dot { color: var(--req); margin-inline-start: 2px; } .try-field label .try-in { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); margin-inline-start: 6px; } .try-field input, .try-field textarea { width: 100%; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--ground); color: var(--ink); padding: 7px 10px; font-size: 13.5px; font-family: var(--mono); box-shadow: 0 0 0 0 transparent; transition: border-color 160ms ease, box-shadow 160ms ease; } .try-field textarea { resize: vertical; line-height: 1.55; font-size: 12.5px; } .try-field input:hover, .try-field textarea:hover { border-color: var(--muted); } /* Focus: a 2px charcoal ring (1px border + 1px shadow), eased in and out. */ .try-field input:focus, .try-field textarea:focus { outline: 0; border-color: var(--field-focus); box-shadow: 0 0 0 1px var(--field-focus); } .try-hint { margin: 0; font-size: 12px; color: var(--muted); } .try-hint code { font-size: 11.5px; } .try-group-title { margin: 6px 0 10px; padding-top: 12px; border-top: 1px solid var(--rule); } .try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; } .try-url { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; } .try-status .sc { font-size: 12px; } .try-error { color: var(--t-lit); } .try-out .try-error { white-space: pre-wrap; overflow-wrap: anywhere; } /* messages wrap; only payloads scroll sideways */ @media (max-width: 860px) { .try-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .try-form { overflow: visible; } .try-result { min-height: 280px; } } /* ---- webhook signature tester ----------------------------------------- */ .sigtool { margin-top: 20px; border: 1px solid var(--rule-strong); border-radius: 12px; overflow: hidden; } .sig-tabs { display: flex; gap: 2px; padding: 6px; background: var(--tint); border-bottom: 1px solid var(--rule); } .sig-tabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; } .sig-tabs button[aria-selected="true"] { background: var(--ground); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-strong); } .sig-pane { padding: 16px 18px 6px; } .sig-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin: -2px 0 12px; } .sig-result, .sig-signed { margin: 14px 0 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule-strong); font-size: 14px; } .sig-result.ok { background: var(--note-bg); border-color: var(--note-rule); } .sig-result.bad { background: var(--bad-bg); border-color: var(--bad-rule); } .sig-result strong { display: block; margin-bottom: 4px; color: var(--ink); } .sig-result ul { margin: 6px 0 0; padding-inline-start: 18px; color: var(--ink-2); } .sig-result dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 12.5px; } .sig-result dt { color: var(--muted); } .sig-result dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; direction: ltr; text-align: start; } .sig-signed .panel { margin-top: 8px; } .sig-privacy { margin: 0; padding: 10px 18px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); } /* saved code language applied before paint */ :root[data-code-lang="curl"] .codeset:has(pre[data-lang="curl"]) pre[data-lang]:not([data-lang="curl"]) { display: none !important; } :root[data-code-lang="curl"] .codeset:has(pre[data-lang="curl"]) pre[data-lang="curl"][hidden] { display: block !important; } :root[data-code-lang="node"] .codeset:has(pre[data-lang="node"]) pre[data-lang]:not([data-lang="node"]) { display: none !important; } :root[data-code-lang="node"] .codeset:has(pre[data-lang="node"]) pre[data-lang="node"][hidden] { display: block !important; } :root[data-code-lang="python"] .codeset:has(pre[data-lang="python"]) pre[data-lang]:not([data-lang="python"]) { display: none !important; } :root[data-code-lang="python"] .codeset:has(pre[data-lang="python"]) pre[data-lang="python"][hidden] { display: block !important; } :root[data-code-lang="csharp"] .codeset:has(pre[data-lang="csharp"]) pre[data-lang]:not([data-lang="csharp"]) { display: none !important; } :root[data-code-lang="csharp"] .codeset:has(pre[data-lang="csharp"]) pre[data-lang="csharp"][hidden] { display: block !important; } /* ---- motion: calm, short, and off for reduced motion ------------------ */ /* sections open and close by height instead of snapping */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .f-kids::details-content, .resp::details-content { block-size: 0; overflow-y: clip; transition: block-size 220ms cubic-bezier(.2, .7, .2, 1), content-visibility 220ms allow-discrete, overflow-y 0s allow-discrete; } /* Once open, stop clipping so tooltips on the first row can rise above the box. */ .f-kids[open]::details-content, .resp[open]::details-content { block-size: auto; overflow-y: visible; transition-delay: 0s, 0s, 220ms; } } /* dialogs fade and rise in */ .search, .try { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 160ms ease-out, transform 180ms cubic-bezier(.2, .7, .2, 1), overlay 180ms allow-discrete, display 180ms allow-discrete; } .search[open], .try[open] { opacity: 1; transform: none; } @starting-style { .search[open], .try[open] { opacity: 0; transform: translateY(10px) scale(0.985); } } .search::backdrop, .try::backdrop { opacity: 0; transition: opacity 160ms ease-out, overlay 180ms allow-discrete, display 180ms allow-discrete; } .search[open]::backdrop, .try[open]::backdrop { opacity: 1; } @starting-style { .search[open]::backdrop, .try[open]::backdrop { opacity: 0; } } /* menus (header and code panels) fade and settle in when they open, and fade out when they close: the list animates, and the details content stays rendered until the fade-out has finished */ .menu::details-content { transition: content-visibility 160ms allow-discrete; } .menu > .menu-list { opacity: 0; translate: 0 -4px; transition: opacity 140ms ease-out, translate 160ms cubic-bezier(.2, .7, .2, 1); } .menu[open] > .menu-list { opacity: 1; translate: 0 0; } @starting-style { .menu[open] > .menu-list { opacity: 0; translate: 0 -4px; } } .nav-tag-link, .nav-ops a, .btn, .grp a, .ep-list a, .f-kids > summary { transition: background-color 120ms ease, color 120ms ease; } /* Copy controls take longer than a plain hover, so the swap to "Copied" and back reads as one motion (after the general rule above, which would otherwise win for the .btn ones). */ .copy, .btn-ai { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; } /* The labelled one also animates its width when the label changes (site.js); the content stays centred and clipped meanwhile. */ .btn-ai { justify-content: center; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .search, .try, .search::backdrop, .try::backdrop { transition: none; transform: none; } .f-kids::details-content, .resp::details-content { transition: none; } .menu::details-content, .menu > .menu-list { transition: none; } } /* ---- expandable sidebar groups ----------------------------------------- */ .nav-tag-row { position: relative; display: flex; align-items: center; border-radius: 6px; } .nav-tag:not(.nav-tag-single) > .nav-tag-row { cursor: pointer; } .nav-tag-row:hover { background: var(--hover); } .nav-tag-row .nav-tag-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-inline-end: 4px; background: none; } .nav-tag-row .nav-tag-link:hover { background: none; } .nav-tag-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tag-link[aria-current="page"] { color: var(--ink); font-weight: 600; } .nav-tag[data-current] > .nav-tag-row { background: var(--tint); } .nav-toggle { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-inline-end: 3px; padding-inline: 7px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; } /* Sidebar chevron: points toward the group when closed (right in LTR, left in RTL) and down when open. */ .chev { transition: transform 260ms cubic-bezier(.34, 1.4, .64, 1); } .nav-toggle .chev { width: 16px; height: 16px; color: var(--nav-dim); transform: rotate(-90deg); } [dir="rtl"] .nav-toggle .chev { transform: rotate(90deg); } .nav-tag.is-open .nav-toggle .chev, [dir="rtl"] .nav-tag.is-open .nav-toggle .chev { transform: rotate(0deg); } /* open/close by animating the row track, then let the items drift in one after another */ .nav-ops-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(.2, .8, .2, 1); } .nav-tag.is-open > .nav-ops-wrap { grid-template-rows: 1fr; } .nav-ops-wrap > .nav-ops { min-height: 0; overflow: hidden; list-style: none; margin: 0 0 0 11px; padding: 0 0 0 8px; border-inline-start: 2px solid var(--tint); } .nav-tag.is-open > .nav-ops-wrap > .nav-ops { padding-block: 3px 8px; } .nav-ops li { opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1); } .nav-ops li + li { margin-top: 2px; } .nav-tag.is-open .nav-ops li { opacity: 1; transform: none; } .nav-tag.is-open .nav-ops li[data-i="0"] { transition-delay: 40ms; } .nav-tag.is-open .nav-ops li[data-i="1"] { transition-delay: 68ms; } .nav-tag.is-open .nav-ops li[data-i="2"] { transition-delay: 96ms; } .nav-tag.is-open .nav-ops li[data-i="3"] { transition-delay: 124ms; } .nav-tag.is-open .nav-ops li[data-i="4"] { transition-delay: 152ms; } .nav-tag.is-open .nav-ops li[data-i="5"] { transition-delay: 180ms; } .nav-tag.is-open .nav-ops li[data-i="6"] { transition-delay: 208ms; } .nav-tag.is-open .nav-ops li[data-i="7"] { transition-delay: 236ms; } .nav-tag.is-open .nav-ops li[data-i="8"] { transition-delay: 264ms; } .nav-tag.is-open .nav-ops li[data-i="9"] { transition-delay: 292ms; } .nav-tag.is-open .nav-ops li[data-i="10"] { transition-delay: 320ms; } .nav-tag.is-open .nav-ops li[data-i="11"] { transition-delay: 348ms; } .nav-tag.is-open .nav-ops-wrap { border-color: var(--rule-strong); } .nav-tag.is-open > .nav-ops-wrap > .nav-ops { border-inline-start-color: var(--tint); } /* ---- mobile drawer: slide, dim, and let the groups settle in ---------- */ .side-scrim { position: fixed; inset: var(--top-h) 0 0 0; z-index: 34; background: rgb(24 18 18 / 0.45); opacity: 0; pointer-events: none; transition: opacity 240ms ease; } @media (max-width: 900px) { .side { transition: transform 340ms cubic-bezier(.22, 1, .36, 1), box-shadow 340ms ease; box-shadow: none; } .side.is-shown { box-shadow: 18px 0 60px rgb(0 0 0 / 0.25); } .side.is-shown ~ .side-scrim, .app:has(.side.is-shown) .side-scrim { opacity: 1; pointer-events: auto; } .side > * { opacity: 0; transform: translateX(-14px); transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); } [dir="rtl"] .side > * { transform: translateX(14px); } .side.is-shown > * { opacity: 1; transform: none; } .side.is-shown > :nth-child(1) { transition-delay: 60ms; } .side.is-shown > :nth-child(2) { transition-delay: 95ms; } .side.is-shown > :nth-child(3) { transition-delay: 130ms; } .side.is-shown > :nth-child(4) { transition-delay: 165ms; } .side.is-shown > :nth-child(5) { transition-delay: 200ms; } .side.is-shown > :nth-child(6) { transition-delay: 235ms; } .side.is-shown > :nth-child(7) { transition-delay: 270ms; } .side.is-shown > :nth-child(8) { transition-delay: 305ms; } .side.is-shown > :nth-child(9) { transition-delay: 340ms; } .side.is-shown > :nth-child(10) { transition-delay: 375ms; } .menu-btn svg path { transition: d 240ms ease, transform 240ms ease; } } @media (prefers-reduced-motion: reduce) { .nav-ops-wrap, .nav-ops li, .chev, .side, .side > *, .side-scrim { transition: none !important; } } /* long inline paths in prose wrap at any character instead of pushing the page sideways */ .prose :not(pre) > code, .doc-col :not(pre) > code { overflow-wrap: anywhere; } /* ---- dark palette (assets/css/dark.css) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #181515; --ink: #EEE7E2; --ink-2: #CDC2BC; --muted: #A0948F; --rule: #3D3535; --rule-strong: #4D4444; --tint: #2B2525; --hover: #302929; --link: #62D896; --field-focus: #EEE7E2; --slash: #FED739; --req: #FFB36B; --req-bg: rgb(255 179 107 / 0.12); --req-rule: rgb(255 179 107 / 0.35); --header: #181515; --header-glass: rgb(24 21 21 / 0.9); --header-ink: #FBF7F4; --header-muted: #BDB1AB; --header-field: rgb(255 255 255 / 0.07); --header-field-hover: rgb(255 255 255 / 0.11); --header-field-hover-strong: rgb(255 255 255 / 0.16); --header-rule: rgb(255 255 255 / 0.13); --header-rule-strong: rgb(255 255 255 / 0.24); --header-edge: #3D3535; --header-pop: #FBF7F4; --header-pop-ink: #2B2626; --header-pop-hover: rgb(43 38 38 / 0.08); --env-bg: rgb(255 255 255 / 0.07); --env-rule: rgb(255 255 255 / 0.13); --env-on-bg: #625858; --env-on-ink: #FBF7F4; --header-pop-fill: rgb(43 38 38 / 0.12); --show-sun: none; --show-moon: block; --panel: #000000; --panel-bar: #151212; --panel-rule: #3A3333; --panel-hover: rgb(255 255 255 / 0.08); --panel-edge: rgb(255 255 255 / 0.28); --panel-edge-strong: rgb(255 255 255 / 0.5); --panel-shadow: 0 10px 28px rgb(0 0 0 / 0.4); --code-ink: #EFE8E3; --code-dim: #A99D97; --t-key: #FFC48F; --t-str: #9BE3B7; --t-num: #FFD36B; --t-lit: #F79A9B; --t-pun: #948782; --t-com: #8A7E79; --get-d: #7EE2A8; --post-d: #FFB36B; --put-d: #FFD95A; --del-d: #FF8A8B; --get-dbg: rgb(126 226 168 / 0.12); --post-dbg: rgb(255 179 107 / 0.12); --put-dbg: rgb(255 217 90 / 0.12); --del-dbg: rgb(255 138 139 / 0.12); --get-fg: #7EE2A8; --get-bg: #1C3627; --post-fg: #FFB36B; --post-bg: #412C1B; --put-fg: #FFD95A; --put-bg: #3B3118; --del-fg: #FF8A8B; --del-bg: #432223; --evt-fg: #D9CEC8; --evt-bg: #2F2828; --plan-fg: #FFD95A; --plan-bg: #37301A; --note-bg: #1A2720; --note-rule: #2C5039; --warn-bg: #2C2615; --warn-rule: #5A4B1F; --bad-bg: #2E1B1B; --bad-rule: #5A2C2C; --done-fg: #7EE2A8; --done-bg: #1C3627; --done-rule: #35A868; --done-ico: #7EE2A8; --flash: #2A2424; --ai-l: 28%; --backdrop: rgb(0 0 0 / 0.85); --dialog-rule: #3D3535; color-scheme: dark; } } :root[data-theme="dark"] { --ground: #181515; --ink: #EEE7E2; --ink-2: #CDC2BC; --muted: #A0948F; --rule: #3D3535; --rule-strong: #4D4444; --tint: #2B2525; --hover: #302929; --link: #62D896; --field-focus: #EEE7E2; --slash: #FED739; --req: #FFB36B; --req-bg: rgb(255 179 107 / 0.12); --req-rule: rgb(255 179 107 / 0.35); --header: #181515; --header-glass: rgb(24 21 21 / 0.9); --header-ink: #FBF7F4; --header-muted: #BDB1AB; --header-field: rgb(255 255 255 / 0.07); --header-field-hover: rgb(255 255 255 / 0.11); --header-field-hover-strong: rgb(255 255 255 / 0.16); --header-rule: rgb(255 255 255 / 0.13); --header-rule-strong: rgb(255 255 255 / 0.24); --header-edge: #3D3535; --header-pop: #FBF7F4; --header-pop-ink: #2B2626; --header-pop-hover: rgb(43 38 38 / 0.08); --env-bg: rgb(255 255 255 / 0.07); --env-rule: rgb(255 255 255 / 0.13); --env-on-bg: #625858; --env-on-ink: #FBF7F4; --header-pop-fill: rgb(43 38 38 / 0.12); --show-sun: none; --show-moon: block; --panel: #000000; --panel-bar: #151212; --panel-rule: #3A3333; --panel-hover: rgb(255 255 255 / 0.08); --panel-edge: rgb(255 255 255 / 0.28); --panel-edge-strong: rgb(255 255 255 / 0.5); --panel-shadow: 0 10px 28px rgb(0 0 0 / 0.4); --code-ink: #EFE8E3; --code-dim: #A99D97; --t-key: #FFC48F; --t-str: #9BE3B7; --t-num: #FFD36B; --t-lit: #F79A9B; --t-pun: #948782; --t-com: #8A7E79; --get-d: #7EE2A8; --post-d: #FFB36B; --put-d: #FFD95A; --del-d: #FF8A8B; --get-dbg: rgb(126 226 168 / 0.12); --post-dbg: rgb(255 179 107 / 0.12); --put-dbg: rgb(255 217 90 / 0.12); --del-dbg: rgb(255 138 139 / 0.12); --get-fg: #7EE2A8; --get-bg: #1C3627; --post-fg: #FFB36B; --post-bg: #412C1B; --put-fg: #FFD95A; --put-bg: #3B3118; --del-fg: #FF8A8B; --del-bg: #432223; --evt-fg: #D9CEC8; --evt-bg: #2F2828; --plan-fg: #FFD95A; --plan-bg: #37301A; --note-bg: #1A2720; --note-rule: #2C5039; --warn-bg: #2C2615; --warn-rule: #5A4B1F; --bad-bg: #2E1B1B; --bad-rule: #5A2C2C; --done-fg: #7EE2A8; --done-bg: #1C3627; --done-rule: #35A868; --done-ico: #7EE2A8; --flash: #2A2424; --ai-l: 28%; --backdrop: rgb(0 0 0 / 0.85); --dialog-rule: #3D3535; color-scheme: dark; }