/* Tokens taken from ascend-companion/src/styles/tokens.css rather than invented, so this page and the app agree about what a surface and a border are. The app ships ; dark is the default here too, and the light set is the same file's :root block. */ :root { --bg: oklch(1 0 0); --fg: oklch(0.2044 0 0); --card: oklch(0.99 0 0); --card-border: oklch(0.9299 0 0); --border: oklch(0.9299 0 0); --sidebar: oklch(0.9851 0 0); --code-bg: oklch(0.9702 0 0); --muted: oklch(0.9702 0 0); --muted-fg: oklch(0.4386 0 0); --quaternary: oklch(0.5722 0 0); --primary: oklch(0.5727 0.2336 267.41); --input: oklch(0.9299 0 0); /* Provenance strength. A separate axis from the brand accent: how well a number is attested is not the same question as what colour the site is. */ --t-measured: oklch(0.5 0.13 172); --t-official_gamefiles: oklch(0.48 0.13 250); --t-official_patch: oklch(0.5 0.12 285); --t-official_ingame: oklch(0.48 0.05 260); --t-community: oklch(0.52 0.09 62); --t-unconfirmed: oklch(0.54 0.15 55); --t-inferred: oklch(0.5 0.03 260); /* Syntax, kept to three roles so JSON stays readable rather than colourful. */ --s-key: oklch(0.48 0.13 250); --s-string: oklch(0.5 0.12 150); --s-number: oklch(0.52 0.14 40); --s-punct: oklch(0.6 0 0); --radius: 8px; --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --nav-w: 15rem; --panel-w: 25rem; --topbar-h: 52px; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: oklch(0.1579 0 0); --fg: oklch(0.9619 0 0); --card: oklch(0.205 0 0); --card-border: oklch(0.315 0 0); --border: oklch(0.2801 0 0); --sidebar: oklch(0.127 0 0); --code-bg: oklch(0.127 0 0); --muted: oklch(0.2376 0 0); --muted-fg: oklch(0.705 0 0); --quaternary: oklch(0.5982 0 0); --input: oklch(0.2801 0 0); --t-measured: oklch(0.8 0.13 172); --t-official_gamefiles: oklch(0.76 0.12 250); --t-official_patch: oklch(0.78 0.11 285); --t-official_ingame: oklch(0.75 0.05 260); --t-community: oklch(0.8 0.09 70); --t-unconfirmed: oklch(0.82 0.14 62); --t-inferred: oklch(0.72 0.03 260); --s-key: oklch(0.78 0.11 250); --s-string: oklch(0.8 0.11 150); --s-number: oklch(0.82 0.12 60); --s-punct: oklch(0.6 0 0); } } :root[data-theme='dark'] { --bg: oklch(0.1579 0 0); --fg: oklch(0.9619 0 0); --card: oklch(0.205 0 0); --card-border: oklch(0.315 0 0); --border: oklch(0.2801 0 0); --sidebar: oklch(0.127 0 0); --code-bg: oklch(0.127 0 0); --muted: oklch(0.2376 0 0); --muted-fg: oklch(0.705 0 0); --quaternary: oklch(0.5982 0 0); --input: oklch(0.2801 0 0); --t-measured: oklch(0.8 0.13 172); --t-official_gamefiles: oklch(0.76 0.12 250); --t-official_patch: oklch(0.78 0.11 285); --t-official_ingame: oklch(0.75 0.05 260); --t-community: oklch(0.8 0.09 70); --t-unconfirmed: oklch(0.82 0.14 62); --t-inferred: oklch(0.72 0.03 260); --s-key: oklch(0.78 0.11 250); --s-string: oklch(0.8 0.11 150); --s-number: oklch(0.82 0.12 60); --s-punct: oklch(0.6 0 0); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } code, .mono, pre { font-family: var(--mono); } a { color: var(--primary); } .skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--card); color: var(--fg); padding: 10px 14px; border-radius: 6px; } .skip:focus { left: 12px; top: 8px; } :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* --- top bar --- */ .topbar { position: sticky; top: 0; z-index: 6; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--border); } .mark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--fg); } .mark b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .mark span { font-size: 11px; font-family: var(--mono); color: var(--quaternary); } #omni { margin-left: auto; width: min(420px, 46vw); background: var(--card); color: var(--fg); border: 1px solid var(--input); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; } .iconbtn { display: none; background: var(--card); color: var(--fg); border: 1px solid var(--input); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; } /* --- three panes --- */ .layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--panel-w); align-items: start; } .nav { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--border); padding: 18px 10px 40px; display: flex; flex-direction: column; gap: 2px; } .nav .group { padding: 14px 10px 4px; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--quaternary); } .nav .group:first-child { padding-top: 0; } .nav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--muted-fg); text-decoration: none; font-size: 13px; } .nav a:hover { background: var(--muted); color: var(--fg); } .nav a.on { background: var(--muted); color: var(--fg); font-weight: 500; } .verb { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--s-string); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; } .doc { padding: 32px 40px 120px; min-width: 0; max-width: 62rem; } .doc:focus { outline: none; } .panel { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; border-left: 1px solid var(--border); padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); } .panel:empty { display: none; } /* Column children must not compress: a flex item defaults to shrinking, which crushed the request sample down to a sliver whenever the response beside it was long. */ .panel > * { flex: 0 0 auto; } /* --- doc typography --- */ .eyebrow { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--quaternary); margin: 0 0 6px; } h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 8px; text-wrap: balance; } h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 34px 0 8px; text-wrap: balance; } h3 { font-size: 14px; font-weight: 600; margin: 22px 0 6px; } .doc p { max-width: 68ch; color: var(--muted-fg); margin: 0 0 12px; } .doc p strong, .doc li strong { color: var(--fg); font-weight: 500; } .doc ul { max-width: 68ch; color: var(--muted-fg); padding-left: 18px; margin: 0 0 12px; } .doc li { margin-bottom: 4px; } .doc :is(p, li) code { background: var(--muted); border-radius: 4px; padding: 1px 5px; font-size: 0.88em; color: var(--fg); } .endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; } .endpoint .path { font-family: var(--mono); font-size: 13px; word-break: break-all; } .endpoint .verb { font-size: 11px; padding: 1px 6px; } .tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quaternary); font-weight: 500; white-space: nowrap; } tr:last-child td { border-bottom: 0; } td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } td.k { font-family: var(--mono); white-space: nowrap; } td.t { font-family: var(--mono); color: var(--s-string); white-space: nowrap; font-size: 12px; } .dash { color: var(--quaternary); } .pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-family: var(--mono); white-space: nowrap; border: 1px solid currentColor; } .tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--muted); color: var(--muted-fg); font-size: 10.5px; font-family: var(--mono); white-space: nowrap; } .req { color: var(--t-unconfirmed); font-size: 10.5px; font-family: var(--mono); } .callout { border-left: 2px solid var(--primary); padding: 2px 0 2px 14px; margin: 0 0 16px; max-width: 68ch; } .callout p:last-child { margin-bottom: 0; } .warn { border: 1px solid var(--t-unconfirmed); color: var(--t-unconfirmed); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; max-width: 78ch; } /* --- code --- */ .codeblock { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); } .codehead { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--quaternary); font-family: var(--mono); } .codehead .grow { margin-left: auto; } .copy { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--muted-fg); font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; } .copy:hover { color: var(--fg); border-color: var(--quaternary); } pre { margin: 0; padding: 12px; overflow-x: auto; font-size: 12px; line-height: 1.55; } .k-key { color: var(--s-key); } .k-str { color: var(--s-string); } .k-num { color: var(--s-number); } .k-pun { color: var(--s-punct); } .panel h4 { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--quaternary); margin: 0; font-weight: 500; } /* --- browse --- */ .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } input[type='search'], select { background: var(--card); color: var(--fg); border: 1px solid var(--input); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; } .controls input[type='search'] { min-width: 240px; flex: 1 1 240px; } .count { font-size: 12px; color: var(--quaternary); font-variant-numeric: tabular-nums; margin-left: auto; } .rows { display: flex; flex-direction: column; gap: 6px; } details.row { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; } details.row > summary { cursor: pointer; padding: 9px 12px; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } details.row > summary::-webkit-details-marker { display: none; } details.row > summary:hover { background: var(--muted); } details.row[open] > summary { border-bottom: 1px solid var(--border); } .rid { font-family: var(--mono); font-size: 12px; color: var(--quaternary); } .rname { font-weight: 500; } .rmeta { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; } .rbody { padding: 12px; display: flex; flex-direction: column; gap: 12px; } .rbody .sublabel { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quaternary); margin: 0 0 6px; } .empty, .loading { color: var(--quaternary); font-size: 13px; padding: 16px 2px; margin: 0; } /* --- responsive --- */ @media (max-width: 1180px) { .layout { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .panel { grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid var(--border); padding: 20px 40px 60px; } } @media (max-width: 840px) { .iconbtn { display: block; } .layout { grid-template-columns: minmax(0, 1fr); } .nav { position: fixed; inset: var(--topbar-h) auto 0 0; width: min(80vw, var(--nav-w)); z-index: 5; transform: translateX(-100%); transition: transform 160ms ease; } .nav.open { transform: none; } .doc { padding: 22px 18px 80px; } .panel { padding: 20px 18px 60px; } #omni { width: auto; flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Said when a game's entity list could not be read, so a partial page reads as partial. Deliberately in flow above the content rather than a floating toast: it describes what the page below it is missing. */ .warning { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--t-unconfirmed); border-radius: var(--radius); color: var(--t-unconfirmed); background: var(--muted); font-size: 0.875rem; }