/* duara-geo developer portal * * One stylesheet for the portal, the reference and the playground. It is hand-written rather * than generated because the whole point of this service is that it runs without reaching out * to anything: a portal that loads a CSS framework from a CDN does not work on the air-gapped * network somebody is most likely to be self-hosting for. */ :root { --bg: #ffffff; --bg-soft: #f6f7f9; --bg-sunken: #eef0f3; --fg: #1b1d21; --fg-muted: #5c6470; --fg-faint: #8b939f; --border: #dfe3e8; --border-strong: #c7ccd4; --accent: #1967d2; --accent-soft: #e8f0fe; /* Text drawn ON the accent. It flips with the theme: the dark palette's accent is a pale * blue, and white on pale blue is unreadable. */ --on-accent: #ffffff; --ok: #0f7b43; --ok-soft: #e3f5eb; --warn: #9a6200; --warn-soft: #fdf2dd; --bad: #b3261e; --bad-soft: #fce9e7; --code-bg: #1e2128; --code-fg: #e6e9ef; --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* Theme. * * Three states, not two: an explicit choice stamps data-theme on , and the default -- * no attribute at all -- follows the operating system. The dark tokens therefore have to be * written twice, once for each way of arriving at dark, because CSS has no way to say "these * declarations, under either of these selectors" without a preprocessor this portal * deliberately does not have. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15171b; --bg-soft: #1c1f25; --bg-sunken: #23272f; --fg: #e8eaee; --fg-muted: #a2abb8; --fg-faint: #767f8c; --border: #2c313a; --border-strong: #3b414c; --accent: #7aa7f0; --accent-soft: #1d2837; --on-accent: #10131a; --ok: #63c68f; --ok-soft: #16281f; --warn: #e0b458; --warn-soft: #2a2317; --bad: #ef8b83; --bad-soft: #2b1a19; --code-bg: #0f1115; --code-fg: #dfe3ea; } } :root[data-theme="dark"] { --bg: #15171b; --bg-soft: #1c1f25; --bg-sunken: #23272f; --fg: #e8eaee; --fg-muted: #a2abb8; --fg-faint: #767f8c; --border: #2c313a; --border-strong: #3b414c; --accent: #7aa7f0; --accent-soft: #1d2837; --on-accent: #10131a; --ok: #63c68f; --ok-soft: #16281f; --warn: #e0b458; --warn-soft: #2a2317; --bad: #ef8b83; --bad-soft: #2b1a19; --code-bg: #0f1115; --code-fg: #dfe3ea; } * { box-sizing: border-box; } /* The `hidden` attribute has to win. * * The user-agent rule for it is `display: none`, and ANY author rule that sets display -- * `.scrim { display: flex }`, `.map-btn { display: flex }` -- beats it, because author styles * outrank the user agent's regardless of specificity. Every element on these pages that is * shown and hidden by script relies on the attribute, so it is made unconditional here rather * than remembered at each of the twenty places that toggle it. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, .mono { font-family: var(--mono); font-size: 13px; } /* ---------------------------------------------------------------- header */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 0 22px; height: 56px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 640; letter-spacing: -.01em; color: var(--fg); } .brand:hover { text-decoration: none; } .brand svg { display: block; } .brand .version { font: 500 11px/1 var(--mono); color: var(--fg-muted); background: var(--bg-sunken); border: 1px solid var(--border); padding: 3px 6px; border-radius: 5px; } .topnav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; } .topnav a { padding: 6px 11px; border-radius: 7px; color: var(--fg-muted); font-size: 14px; font-weight: 500; } .topnav a:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; } .topnav a.active { background: var(--accent-soft); color: var(--accent); } /* On a phone the navigation wrapped onto a second line inside a bar with a fixed height, so * half of it disappeared behind the page. It scrolls sideways instead. */ @media (max-width: 720px) { .topbar { gap: 12px; padding: 0 14px; } .brand { white-space: nowrap; } .brand .version { display: none; } .topnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav a { padding: 6px 8px; } } /* ---------------------------------------------------------------- layout */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; } .wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 22px; } .hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); } .hero h1 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.025em; font-weight: 680; } .hero p.lede { margin: 0 0 26px; font-size: 18px; color: var(--fg-muted); max-width: 62ch; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 560; border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--fg); cursor: pointer; font-family: inherit; } .btn:hover { background: var(--bg-sunken); text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent); filter: brightness(1.08); } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } .btn:disabled { opacity: .5; cursor: not-allowed; } section { padding: 44px 0; border-bottom: 1px solid var(--border); } section:last-of-type { border-bottom: 0; } section > h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.015em; font-weight: 640; } section > p.sub { margin: 0 0 24px; color: var(--fg-muted); max-width: 70ch; } /* ---------------------------------------------------------------- grid & cards */ .grid { display: grid; gap: 14px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--bg-soft); } .card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 620; } .card p { margin: 0; color: var(--fg-muted); font-size: 13.5px; } .card .endpoint { font-family: var(--mono); font-size: 12.5px; color: var(--fg-faint); margin-top: 8px; display: block; } /* ---------------------------------------------------------------- status pills */ .pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-ok { background: var(--ok-soft); color: var(--ok); } .pill-warn { background: var(--warn-soft); color: var(--warn); } .pill-off { background: var(--bg-sunken); color: var(--fg-faint); } .pill-bad { background: var(--bad-soft); color: var(--bad); } .cap-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .cap-row:last-child { border-bottom: 0; } .cap-name { font-weight: 560; min-width: 190px; } .cap-detail { color: var(--fg-muted); font-size: 13.5px; flex: 1; } /* ---------------------------------------------------------------- code */ pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius); line-height: 1.55; } pre code { color: inherit; } :not(pre) > code { background: var(--bg-sunken); padding: 1.5px 5px; border-radius: 5px; border: 1px solid var(--border); font-size: 12.5px; } .codeblock { position: relative; } .codeblock .copy { position: absolute; right: 8px; top: 8px; font: 500 11px/1 var(--sans); padding: 5px 9px; border-radius: 6px; background: rgba(255,255,255,.1); color: #cfd6e0; border: 1px solid rgba(255,255,255,.16); cursor: pointer; opacity: 0; transition: opacity .12s; } .codeblock:hover .copy { opacity: 1; } .codeblock .copy:hover { background: rgba(255,255,255,.18); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; } .tab { padding: 7px 13px; border: 0; background: none; cursor: pointer; font: 500 13px/1 var(--sans); color: var(--fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tabpanel { display: none; } .tabpanel.active { display: block; } /* ---------------------------------------------------------------- tables */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-weight: 620; color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } td code { white-space: nowrap; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } /* ---------------------------------------------------------------- forms */ label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-bottom: 5px; letter-spacing: .02em; } input[type=text], input[type=number], select, textarea { width: 100%; padding: 8px 11px; font: 13px/1.5 var(--sans); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--fg); } textarea { font-family: var(--mono); font-size: 12.5px; resize: vertical; min-height: 90px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .field { margin-bottom: 12px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ---------------------------------------------------------------- reference */ .ref-layout { display: grid; grid-template-columns: 232px 1fr; gap: 34px; align-items: start; } @media (max-width: 900px) { .ref-layout { grid-template-columns: 1fr; } .ref-nav { position: static !important; max-height: none !important; } } .ref-nav { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding-bottom: 30px; } .ref-nav h4 { margin: 16px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); font-weight: 640; } .ref-nav a { display: block; padding: 4px 9px; border-radius: 6px; font-size: 13.5px; color: var(--fg-muted); } .ref-nav a:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; } .ref-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 560; } .endpoint-doc { padding: 26px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 76px; } .endpoint-doc:first-child { padding-top: 4px; } .endpoint-doc h3 { margin: 0 0 4px; font-size: 19px; font-weight: 640; letter-spacing: -.01em; } .endpoint-sig { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--mono); font-size: 13px; } .method { font: 700 10.5px/1 var(--sans); letter-spacing: .05em; padding: 4px 7px; border-radius: 5px; } .method-get { background: var(--ok-soft); color: var(--ok); } .method-post { background: var(--accent-soft); color: var(--accent); } .method-delete { background: var(--bad-soft); color: var(--bad); } .method-patch { background: var(--warn-soft); color: var(--warn); } .note { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 11px 15px; border-radius: 0 8px 8px 0; margin: 14px 0; font-size: 13.5px; } .note-warn { border-left-color: var(--warn); background: var(--warn-soft); } .note strong { font-weight: 640; } /* ---------------------------------------------------------------- try it */ .tryit { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 16px; } .tryit-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 620; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; } .tryit-body { padding: 14px; background: var(--bg-soft); } .tryit-out { margin-top: 12px; } .tryit-status { font: 600 12px/1 var(--mono); margin-bottom: 8px; } .banner { padding: 10px 16px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--border); } .banner-warn { background: var(--warn-soft); color: var(--warn); } .banner-bad { background: var(--bad-soft); color: var(--bad); } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } footer { padding: 34px 0; color: var(--fg-muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 10px; } footer a { color: var(--fg-muted); text-decoration: underline; } .muted { color: var(--fg-muted); } .small { font-size: 12.5px; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .mt12 { margin-top: 12px; } .mt20 { margin-top: 20px; } .nowrap { white-space: nowrap; } /* ---------------------------------------------------------------- theme toggle */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 6px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--fg-muted); cursor: pointer; } .theme-btn:hover { background: var(--bg-sunken); color: var(--fg); } .theme-btn svg { display: block; } /* ---------------------------------------------------------------- toasts */ /* Transient feedback that does not move the page. * * An inline "copied!" pushes the thing underneath it down by a line, which on a panel full of * controls is enough to make somebody click the wrong one. These float above everything and * take no layout space. */ .toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 520; background: var(--fg); color: var(--bg); box-shadow: 0 6px 22px rgba(0,0,0,.24); animation: toast-in .16s ease-out; } .toast-ok { background: var(--ok); color: #fff; } .toast-bad { background: var(--bad); color: #fff; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } .toast.leaving { opacity: 0; transition: opacity .2s; } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .spinner { animation-duration: 2s; } }