/* ========================================================================== GlobalLinker Developer Portal — Scalar theme + landing -------------------------------------------------------------------------- Themes the Scalar API Reference (v1.63) via its supported CSS-variable surface and styles the custom landing/overview blocks rendered above it. No change to endpoints, spec, or Scalar behavior — presentation only. Palette anchor: GlobalLinker blue (Bootstrap --primary #007bff family), deepened for docs contrast. Neutral grays tuned for long-form reading. Ships light + dark. Injected into Scalar via `customCss`, and applied to the landing markup in developer.html. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens — one source of truth for the landing AND passed through to Scalar's variables below so the two halves read as one system. -------------------------------------------------------------------------- */ :root { --gl-accent: #0b5cff; --gl-accent-strong: #0847cc; --gl-accent-soft: #e8f0ff; --gl-fg: #0b1524; /* primary text */ --gl-fg-2: #3a465a; /* secondary text */ --gl-fg-3: #6b7688; /* muted / captions */ --gl-bg: #ffffff; /* page */ --gl-bg-2: #f7f9fc; /* raised surface / cards */ --gl-bg-3: #eef2f8; /* code chips, wells */ --gl-border: #e3e8f0; --gl-border-strong: #cfd7e3; --gl-radius: 14px; --gl-radius-sm: 10px; --gl-shadow-sm: 0 1px 2px rgba(11, 21, 36, .04), 0 1px 3px rgba(11, 21, 36, .06); --gl-shadow-md: 0 4px 12px rgba(11, 21, 36, .06), 0 12px 32px rgba(11, 21, 36, .08); --gl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gl-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --gl-maxw: 1180px; /* HTTP method colors — shared by landing pills and Scalar overrides */ --gl-m-get: #0a7d3f; --gl-m-post: #0b5cff; --gl-m-patch: #a15c00; --gl-m-put: #7a4bd1; --gl-m-delete: #c0392b; } /* Dark-mode token values, defined once and applied from three signals: the OS preference, the site's own [data-theme="dark"], and — crucially — Scalar's own toggle, which sets `.dark-mode` on . Keeping them in a named block means the landing and the reference always agree. */ :root[data-theme="dark"], body.dark-mode { --gl-accent: #5b8cff; --gl-accent-strong: #7ba4ff; --gl-accent-soft: #16223b; --gl-fg: #e9eef7; --gl-fg-2: #b3bdd0; --gl-fg-3: #8592a8; --gl-bg: #0b0f17; --gl-bg-2: #121826; --gl-bg-3: #1a2233; --gl-border: #232c3d; --gl-border-strong: #33405a; --gl-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --gl-shadow-md: 0 8px 30px rgba(0,0,0,.5); --gl-m-get: #4ade80; --gl-m-post: #7ba4ff; --gl-m-patch: #eab308; --gl-m-put: #c4a2ff; --gl-m-delete: #f87171; color-scheme: dark; } /* OS preference — but only when neither toggle has forced a choice, so an explicit light selection wins over a dark OS and vice-versa. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.gl-force-light) { --gl-accent: #5b8cff; --gl-accent-strong: #7ba4ff; --gl-accent-soft: #16223b; --gl-fg: #e9eef7; --gl-fg-2: #b3bdd0; --gl-fg-3: #8592a8; --gl-bg: #0b0f17; --gl-bg-2: #121826; --gl-bg-3: #1a2233; --gl-border: #232c3d; --gl-border-strong: #33405a; --gl-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --gl-shadow-md: 0 8px 30px rgba(0,0,0,.5); --gl-m-get: #4ade80; --gl-m-post: #7ba4ff; --gl-m-patch: #eab308; --gl-m-put: #c4a2ff; --gl-m-delete: #f87171; color-scheme: dark; } } /* Scalar's light toggle (`body.light-mode`) must pull the landing back to the light tokens even when the OS prefers dark — restate the defaults here so the toggle works in both directions. */ body.light-mode { --gl-accent: #0b5cff; --gl-accent-strong: #0847cc; --gl-accent-soft: #e8f0ff; --gl-fg: #0b1524; --gl-fg-2: #3a465a; --gl-fg-3: #6b7688; --gl-bg: #ffffff; --gl-bg-2: #f7f9fc; --gl-bg-3: #eef2f8; --gl-border: #e3e8f0; --gl-border-strong: #cfd7e3; --gl-shadow-sm: 0 1px 2px rgba(11, 21, 36, .04), 0 1px 3px rgba(11, 21, 36, .06); --gl-shadow-md: 0 4px 12px rgba(11, 21, 36, .06), 0 12px 32px rgba(11, 21, 36, .08); --gl-m-get: #0a7d3f; --gl-m-post: #0b5cff; --gl-m-patch: #a15c00; --gl-m-put: #7a4bd1; --gl-m-delete: #c0392b; color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } /* -------------------------------------------------------------------------- 1b. Site-wide shadcn/Tailwind tokens — dark values. homePage.css defines these only for light ("/* Dark mode overrides if needed *\/" is an empty placeholder), so without this block `body`, the `.bg-background` page wrapper, the header and the footer all stay white while Scalar's own chrome goes dark — the page looked like only the search bar responded to the toggle. Same three signals as the --gl-* block above: Scalar's toggle (body.dark-mode), the site's own [data-theme="dark"], and the OS preference. Values are HSL triplets (no hsl() wrapper) because Tailwind consumes them as `hsl(var(--token))`. -------------------------------------------------------------------------- */ body.dark-mode, :root[data-theme="dark"] { --background: 222 33% 7%; --foreground: 216 30% 94%; --card: 222 28% 11%; --card-foreground: 216 30% 94%; --surface-a: 222 28% 11%; --surface-b: 222 26% 13%; --surface-c: 222 24% 16%; --popover: 222 28% 11%; --popover-foreground: 216 30% 94%; --primary: 220 100% 68%; --primary-foreground: 222 47% 8%; --primary-hover: 220 100% 76%; --cta: 24 95% 58%; --cta-foreground: 222 47% 8%; --cta-hover: 24 95% 66%; --secondary: 222 24% 16%; --secondary-foreground: 216 30% 94%; --muted: 222 24% 16%; --muted-foreground: 218 15% 65%; --accent: 220 45% 18%; --accent-foreground: 220 100% 76%; --destructive: 0 72% 62%; --destructive-foreground: 0 0% 100%; --border: 220 20% 20%; --input: 220 20% 20%; --ring: 220 100% 68%; --pastel-blue: 220 35% 16%; --pastel-orange: 26 35% 16%; --pastel-green: 150 25% 15%; --gradient-hero: linear-gradient(135deg, hsl(222 40% 9%) 0%, hsl(24 30% 11%) 100%); --gradient-blue: linear-gradient(135deg, hsl(220 90% 46%) 0%, hsl(220 100% 68%) 100%); --gradient-orange: linear-gradient(135deg, hsl(24 85% 48%) 0%, hsl(30 90% 58%) 100%); --shadow-card: 0 1px 2px hsl(0 0% 0% / .5); --shadow-card-hover: 0 8px 30px hsl(0 0% 0% / .6); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .55); --sidebar-background: 222 28% 11%; --sidebar-foreground: 216 30% 94%; --sidebar-primary: 220 100% 68%; --sidebar-primary-foreground: 222 47% 8%; --sidebar-accent: 222 24% 16%; --sidebar-accent-foreground: 216 30% 94%; --sidebar-border: 220 20% 20%; --sidebar-ring: 220 100% 68%; } /* OS preference, only when nothing has forced light — mirrors the --gl-* media query above. `body.light-mode` (Scalar's light toggle) must win, so it's excluded here and restated in the light block below. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body:not(.light-mode) { --background: 222 33% 7%; --foreground: 216 30% 94%; --card: 222 28% 11%; --card-foreground: 216 30% 94%; --surface-a: 222 28% 11%; --surface-b: 222 26% 13%; --surface-c: 222 24% 16%; --popover: 222 28% 11%; --popover-foreground: 216 30% 94%; --primary: 220 100% 68%; --primary-foreground: 222 47% 8%; --primary-hover: 220 100% 76%; --cta: 24 95% 58%; --cta-foreground: 222 47% 8%; --cta-hover: 24 95% 66%; --secondary: 222 24% 16%; --secondary-foreground: 216 30% 94%; --muted: 222 24% 16%; --muted-foreground: 218 15% 65%; --accent: 220 45% 18%; --accent-foreground: 220 100% 76%; --destructive: 0 72% 62%; --destructive-foreground: 0 0% 100%; --border: 220 20% 20%; --input: 220 20% 20%; --ring: 220 100% 68%; --pastel-blue: 220 35% 16%; --pastel-orange: 26 35% 16%; --pastel-green: 150 25% 15%; --gradient-hero: linear-gradient(135deg, hsl(222 40% 9%) 0%, hsl(24 30% 11%) 100%); --gradient-blue: linear-gradient(135deg, hsl(220 90% 46%) 0%, hsl(220 100% 68%) 100%); --gradient-orange: linear-gradient(135deg, hsl(24 85% 48%) 0%, hsl(30 90% 58%) 100%); --shadow-card: 0 1px 2px hsl(0 0% 0% / .5); --shadow-card-hover: 0 8px 30px hsl(0 0% 0% / .6); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .55); --sidebar-background: 222 28% 11%; --sidebar-foreground: 216 30% 94%; --sidebar-primary: 220 100% 68%; --sidebar-primary-foreground: 222 47% 8%; --sidebar-accent: 222 24% 16%; --sidebar-accent-foreground: 216 30% 94%; --sidebar-border: 220 20% 20%; --sidebar-ring: 220 100% 68%; } } /* Scalar's light toggle pulls the site tokens back to the light values, so the toggle works in both directions on a dark-preferring OS. Only the tokens the dark block touches need restating — the rest never changed. */ body.light-mode { --background: 210 40% 98%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --surface-a: 210 40% 99%; --surface-b: 210 30% 97%; --surface-c: 210 25% 95%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 216 93% 53%; --primary-foreground: 0 0% 100%; --primary-hover: 216 93% 45%; --cta: 24 95% 53%; --cta-foreground: 0 0% 100%; --cta-hover: 24 95% 45%; --secondary: 210 40% 96%; --secondary-foreground: 222 47% 11%; --muted: 210 40% 96%; --muted-foreground: 215 16% 47%; --accent: 216 93% 96%; --accent-foreground: 216 93% 40%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 216 93% 53%; --pastel-blue: 210 60% 96%; --pastel-orange: 30 80% 96%; --pastel-green: 150 50% 95%; --gradient-hero: linear-gradient(135deg, hsl(237, 100%, 98%) 0%, hsl(24, 100%, 97%) 100%); --gradient-blue: linear-gradient(135deg, hsl(216 93% 53%) 0%, hsl(216 93% 65%) 100%); --gradient-orange: linear-gradient(135deg, hsl(24 95% 53%) 0%, hsl(30 95% 58%) 100%); --shadow-card: 0 4px 6px -1px hsl(216 93% 53% / .05), 0 2px 4px -2px hsl(216 93% 53% / .05); --shadow-card-hover: 0 20px 25px -5px hsl(216 93% 53% / .1), 0 8px 10px -6px hsl(216 93% 53% / .1); --shadow-lg: 0 10px 15px -3px hsl(216 93% 53% / .08), 0 4px 6px -4px hsl(216 93% 53% / .08); --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } /* The shared header hardcodes `bg-white/95` (+ a `bg-white/80` backdrop-filter variant) instead of using --background, so it stayed white while everything around it went dark. Repointed at the token here rather than in includes/buyer-centric/header.html, which every page shares. */ body.dark-mode > #root header.sticky, :root[data-theme="dark"] #root header.sticky { background-color: hsl(var(--background) / .95) !important; } @supports (backdrop-filter: blur(1px)) { body.dark-mode > #root header.sticky, :root[data-theme="dark"] #root header.sticky { background-color: hsl(var(--background) / .8) !important; } } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body:not(.light-mode) #root header.sticky { background-color: hsl(var(--background) / .95) !important; } @supports (backdrop-filter: blur(1px)) { html:not([data-theme="light"]) body:not(.light-mode) #root header.sticky { background-color: hsl(var(--background) / .8) !important; } } } /* ========================================================================== 2. LANDING — hero, quickstart, auth, endpoint-group cards (markup lives in developer.html under #gl-dev-landing) ========================================================================== */ #gl-dev-landing { font-family: var(--gl-font); color: var(--gl-fg); background: radial-gradient(1200px 400px at 80% -120px, var(--gl-accent-soft), transparent 60%), var(--gl-bg); border-bottom: 1px solid var(--gl-border); -webkit-font-smoothing: antialiased; } #gl-dev-landing * { box-sizing: border-box; } #gl-dev-landing .gl-wrap { max-width: var(--gl-maxw); margin: 0 auto; padding: 0 24px; } /* --- Hero --- */ #gl-dev-landing .gl-hero { padding: 56px 0 40px; } #gl-dev-landing .gl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-accent); background: var(--gl-accent-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; } #gl-dev-landing .gl-eyebrow-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--gl-fg-2); background: var(--gl-bg-3); border: 1px solid var(--gl-border); border-radius: 999px; padding: 2px 9px; margin-left: 2px; } #gl-dev-landing h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 0 0 14px; color: var(--gl-fg); } #gl-dev-landing .gl-lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--gl-fg-2); max-width: 640px; margin: 0 0 26px; } #gl-dev-landing .gl-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } #gl-dev-landing .gl-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; padding: 11px 18px; border-radius: var(--gl-radius-sm); transition: transform .06s ease, background .15s ease, border-color .15s ease; cursor: pointer; border: 1px solid transparent; } #gl-dev-landing .gl-btn:active { transform: translateY(1px); } #gl-dev-landing .gl-btn-primary { background: var(--gl-accent); color: #fff; } #gl-dev-landing .gl-btn-primary:hover { background: var(--gl-accent-strong); } #gl-dev-landing .gl-btn-ghost { background: var(--gl-bg-2); color: var(--gl-fg); border-color: var(--gl-border-strong); } #gl-dev-landing .gl-btn-ghost:hover { border-color: var(--gl-accent); color: var(--gl-accent); } /* Search button — carries a kbd hint for the "/" shortcut */ #gl-dev-landing .gl-search-btn { font-family: var(--gl-font); } #gl-dev-landing .gl-kbd { font-family: var(--gl-mono); font-size: 11px; font-weight: 700; line-height: 1; color: var(--gl-fg-3); background: var(--gl-bg); border: 1px solid var(--gl-border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; margin-left: 2px; } /* --- Cards grid (quickstart + auth + endpoint groups) --- */ #gl-dev-landing .gl-grid { display: grid; gap: 18px; padding: 8px 0 56px; grid-template-columns: repeat(12, 1fr); } #gl-dev-landing .gl-card { grid-column: span 4; background: var(--gl-bg-2); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); padding: 22px; box-shadow: var(--gl-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } #gl-dev-landing a.gl-card:hover { border-color: var(--gl-accent); box-shadow: var(--gl-shadow-md); transform: translateY(-2px); text-decoration: none; } #gl-dev-landing .gl-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--gl-accent-soft); color: var(--gl-accent); margin-bottom: 14px; } #gl-dev-landing .gl-card-icon svg { width: 20px; height: 20px; } #gl-dev-landing .gl-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--gl-fg); display: flex; align-items: center; gap: 8px; } #gl-dev-landing .gl-card p { font-size: 14px; line-height: 1.55; color: var(--gl-fg-2); margin: 0; } /* Span helpers */ #gl-dev-landing .gl-span-6 { grid-column: span 6; } #gl-dev-landing .gl-span-12 { grid-column: span 12; } /* Section label */ #gl-dev-landing .gl-sec-label { grid-column: span 12; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-fg-3); margin: 14px 0 -4px; } /* Method pill list inside endpoint-group cards */ #gl-dev-landing .gl-methods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } #gl-dev-landing .gl-pill { font-family: var(--gl-mono); font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; color: #fff; } #gl-dev-landing .gl-pill.get { background: var(--gl-m-get); } #gl-dev-landing .gl-pill.post { background: var(--gl-m-post); } #gl-dev-landing .gl-pill.patch { background: var(--gl-m-patch); } #gl-dev-landing .gl-pill.put { background: var(--gl-m-put); } #gl-dev-landing .gl-pill.delete { background: var(--gl-m-delete); } /* Consolidated Specifications card: stacked sub-links, each its own row */ #gl-dev-landing .gl-sublinks { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } #gl-dev-landing .gl-sublink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gl-fg); text-decoration: none; padding: 11px 13px; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); background: var(--gl-bg); transition: border-color .12s ease, background .12s ease; } #gl-dev-landing .gl-sublink:hover { border-color: var(--gl-accent); background: var(--gl-accent-soft); text-decoration: none; } #gl-dev-landing .gl-sublink-hint { font-size: 12px; font-weight: 500; color: var(--gl-fg-3); } #gl-dev-landing .gl-sublink .gl-methods { margin: 0 0 0 auto; } /* Quickstart: inline code block */ #gl-dev-landing .gl-code { margin-top: 14px; background: var(--gl-bg-3); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 14px 16px; overflow-x: auto; } #gl-dev-landing .gl-code pre { margin: 0; font-family: var(--gl-mono); font-size: 12.5px; line-height: 1.6; color: var(--gl-fg); white-space: pre; } #gl-dev-landing .gl-code .c-key { color: var(--gl-accent); } #gl-dev-landing .gl-code .c-mut { color: var(--gl-fg-3); } /* Copy button (shared) */ #gl-dev-landing .gl-copy { font-family: var(--gl-font); font-size: 12px; font-weight: 600; background: transparent; border: 1px solid var(--gl-border-strong); color: var(--gl-fg-2); border-radius: 7px; padding: 4px 9px; cursor: pointer; transition: all .12s ease; } #gl-dev-landing .gl-copy:hover { border-color: var(--gl-accent); color: var(--gl-accent); } #gl-dev-landing .gl-copy.copied { color: var(--gl-m-get); border-color: var(--gl-m-get); } /* Responsive: tablet & mobile */ @media (max-width: 900px) { #gl-dev-landing .gl-card { grid-column: span 6; } #gl-dev-landing .gl-span-6 { grid-column: span 12; } } @media (max-width: 620px) { #gl-dev-landing .gl-hero { padding: 40px 0 28px; } #gl-dev-landing .gl-card { grid-column: span 12; } #gl-dev-landing .gl-cta-row { gap: 10px; } #gl-dev-landing .gl-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { #gl-dev-landing * { transition: none !important; } } /* ========================================================================== 3. SCALAR reference — retheme via its documented CSS variables. These are injected through Scalar's `customCss` option so they land inside the reference's own scope. We only set variables + a few polish rules; no structural overrides that could break behavior. ========================================================================== */ /* Theme-independent vars — safe to set unconditionally. */ .scalar-app, .light-mode { --scalar-font: var(--gl-font); --scalar-font-code: var(--gl-mono); --scalar-radius: 10px; --scalar-radius-lg: 14px; } /* Light COLOR values are gated on dark mode not being active. Why: Scalar sets `.dark-mode` on , but `.scalar-app` is a DESCENDANT of body. An unconditional `.scalar-app { --scalar-background-1: #fff }` therefore re-declares every colour back to light on an element nearer the content than body, beating the `.dark-mode` block below for everything inside the reference — the toggle appeared to do nothing except on the few nodes that live outside .scalar-app's var scope (the sidebar search box). Keep these gated; do not merge them back into the block above. */ html:not([data-theme="dark"]) body:not(.dark-mode) .scalar-app, .light-mode { --scalar-color-1: #0b1524; --scalar-color-2: #3a465a; --scalar-color-3: #6b7688; --scalar-color-accent: #0b5cff; --scalar-background-1: #ffffff; --scalar-background-2: #f7f9fc; --scalar-background-3: #eef2f8; --scalar-background-accent: #e8f0ff; --scalar-border-color: #e3e8f0; --scalar-sidebar-background-1: #f7f9fc; --scalar-sidebar-color-1: #0b1524; --scalar-sidebar-color-2: #6b7688; --scalar-sidebar-item-hover-background: #eef2f8; --scalar-sidebar-item-active-background: #e8f0ff; --scalar-sidebar-color-active: #0b5cff; --scalar-sidebar-border-color: #e3e8f0; /* HTTP method colors */ --scalar-color-green: #0a7d3f; --scalar-color-blue: #0b5cff; --scalar-color-orange: #a15c00; --scalar-color-purple: #7a4bd1; --scalar-color-red: #c0392b; } /* Dark values. `.dark-mode` alone is not enough: it lands on , so the gated light rule above (`body:not(.dark-mode) .scalar-app`) would out-specify it on everything inside the reference. Naming .scalar-app directly — both as the dark-mode element itself and as its descendant — keeps these winning. */ .dark-mode, .dark-mode .scalar-app, .scalar-app.dark-mode, :root[data-theme="dark"] .scalar-app { --scalar-font: var(--gl-font); --scalar-font-code: var(--gl-mono); --scalar-color-1: #e9eef7; --scalar-color-2: #b3bdd0; --scalar-color-3: #8592a8; --scalar-color-accent: #5b8cff; --scalar-background-1: #0b0f17; --scalar-background-2: #121826; --scalar-background-3: #1a2233; --scalar-background-accent: #16223b; --scalar-border-color: #232c3d; --scalar-sidebar-background-1: #0b0f17; --scalar-sidebar-color-1: #e9eef7; --scalar-sidebar-color-2: #8592a8; --scalar-sidebar-item-hover-background: #121826; --scalar-sidebar-item-active-background: #16223b; --scalar-sidebar-color-active: #5b8cff; --scalar-sidebar-border-color: #232c3d; --scalar-color-green: #4ade80; --scalar-color-blue: #7ba4ff; --scalar-color-orange: #eab308; --scalar-color-purple: #c4a2ff; --scalar-color-red: #f87171; } /* Softer, larger type + roomier line-height for readability in the reference content column (Stripe/Supabase-grade legibility). */ .scalar-app .markdown p, .scalar-app .markdown li { line-height: 1.65; } /* Card-like section blocks and rounded code samples to match the landing. */ .scalar-app .scalar-card, .scalar-app .code-languages, .scalar-app pre { border-radius: var(--scalar-radius-lg) !important; } /* Overview boxes rendered from the OpenAPI description (kept + refined). */ #gl-api-docs .ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 32px; } #gl-api-docs .ov-box { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--scalar-border-color, #e3e8f0); border-radius: 14px; background: var(--scalar-background-2, transparent); box-shadow: var(--gl-shadow-sm); } #gl-api-docs .ov-box-title { font-weight: 700; font-size: 15px; color: var(--scalar-color-1, #0b1524); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } #gl-api-docs .ov-link { font-size: 14px; color: var(--scalar-color-accent, #0b5cff); text-decoration: none; padding: 4px 0; } #gl-api-docs .ov-link:hover { text-decoration: underline; } /* Keep hiding Scalar chrome (belt-and-suspenders with the JS sweep). */ #gl-api-docs a[href*="scalar.com"], #gl-api-docs [class*="powered-by"] { display: none !important; }