/* =========================================================================
Omnivery 2026 — light brand theme (themes/ov2026)
-------------------------------------------------------------------------
WHAT THIS FILE IS
This is a LAYER, not a stylesheet. partials/head.html links the active
theme's style.css first and this file second, so everything here wins by
source order at equal specificity. A theme only ships the files it
actually changes: /static/css/style.css and every template and image
fall back to the vendor default theme. Do NOT copy style.css in here —
override it.
Ported from the marketing site's real 2026 sheet:
user/themes/omnivery/css/omnivery-2026.css (web-grav). Palette is the
brand manual (omnivery-logo-manual.pdf p.6); fonts are Poppins +
IBM Plex Mono (p.7).
THE CONTRAST RULE — read this before "fixing" any colour below.
--amber (#FBB040) scores 1.84:1 on white. It is NOT a text colour on a
light background, ever. On light backgrounds:
* text / links / stateful text -> --orange
* fills, rules, borders, bullets -> --amber (non-text accents only)
* amber CTA fill -> --navy text on it, never white
On navy backgrounds amber IS the text accent (6.62:1) and orange is not
used at all. Every amber-to-orange swap below is deliberate; reverting
one reintroduces an invisible label.
CODE STAYS DARK. Markdown code blocks, API code samples and try-it
response bodies keep a navy background even in this light theme. That is
the reference design's one carry-through of dark, not an oversight.
FONTS are loaded by partials/head.html ( to Google Fonts). This
file deliberately contains no @import — the site runs a strict CSP and
style.css already carries the only font import. Mono degrades to
ui-monospace if the IBM Plex Mono link is ever dropped.
========================================================================= */
:root {
/* ---- brand tokens (verbatim from omnivery-2026.css :root) ---- */
--navy: #243842; /* brand — primary dark */
--navy-deep: #1b2b33; /* darker shade of brand navy */
--slate: #546670; /* brand — muted / secondary */
--amber: #FBB040; /* brand — primary accent */
--orange: #F26522; /* brand — secondary accent */
--ink: #243842; /* body text = brand navy */
--paper: #ffffff;
--mist: #f4f6f7;
--line: #e4eaec;
/* ---- light-on-navy ramp, for the navy header/footer/code surfaces ---- */
--on-navy: #e6edf0; /* 10.3:1 on navy — code, nav text */
--on-navy-mute: #b9c9cf; /* 7.2:1 */
--on-navy-dim: #9db4bc; /* 5.6:1 — footer body copy */
/* ---- the default theme's own variables, remapped onto the light brand ---- */
--bg: var(--paper);
/* --bg-elevated is the "panel" surface: endpoint headers, try-it pane,
comment cards. Mist, not white — .card is pushed back to paper below
because the reference design draws cards on paper. */
--bg-elevated: var(--mist);
--bg-hover: #eef2f4;
--bg-border: var(--line);
--highlight: var(--amber);
--highlight-dk: #e89b2e;
--highlight-bg: rgba(251,176,64,0.12);
--text: var(--ink);
--text-muted: var(--slate);
/* 4.89:1 on white, 4.51:1 on mist. The default's #5e7a87 would have
dropped to 3.2:1 the moment the page turned white. */
--text-dim: #5f7480;
/* style.css used to funnel two different roles through one --white:
"emphasised copy on the page" and "text on the dark header chrome".
It now splits them, so this theme just points each at the right ramp
instead of remapping --white and re-lighting six consumers by hand.
Only the rows that want a brighter ink than --on-navy-mute — the mobile
nav, and the desktop hovers — still say so at the rule itself. */
--text-strong: var(--ink);
--text-on-dark: var(--on-navy-mute);
/* Amber fills take NAVY text — see THE CONTRAST RULE at the top. This one
token now covers .version-badge, .btn-primary, .btn-comment-submit,
.lang-btn.active and .ai-prompt-btn, and permanently closes the
.ai-prompt-btn{color:var(--bg)} inversion trap. */
--text-on-accent: var(--navy);
/* --accent-text (style.css's "accent drawn as TEXT") is deliberately NOT
overridden here, even though THE CONTRAST RULE above says light surfaces
take --orange. This theme's rule is surface-dependent and a single token
cannot express it: it repaints the header bar and the mobile-nav overlay
NAVY, where amber is the right text accent (6.62:1) and orange would be a
regression (3.88:1). Every light-surface consumer is already re-lit by
hand below with a treatment no token could carry anyway — mono pills on
mist, ink code glyphs, an ink active tab. So the token keeps its default
(--highlight, i.e. --amber), which is exactly what the two sites this file
does not name — .logo-docs and .mobile-nav a.active, both on navy — want.
themes/light is the theme that needs the override; it is white throughout. */
/* --bg-secondary and --border were aliased here to work around style.css
never declaring them at all. style.css now declares both, in terms of
--bg-elevated / --bg-border, which this theme already remaps to mist
and line — so the aliases are gone and nothing moved. */
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
/* The default shadows are rgba(0,0,0,0.4) — built for a dark page. */
--shadow: 0 1px 3px rgba(36,56,66,0.08);
--shadow-md: 0 8px 24px rgba(36,56,66,0.10);
}
/* ===== HEADER — navy sticky bar =========================================
style.css paints the header with var(--bg) + var(--bg-border); both are
now white/near-white, so everything here is re-darkened by hand. */
.site-header {
background: var(--navy);
border-bottom: none;
/* The marketing header is flat — no rule, no shadow. */
box-shadow: none;
}
/* Colour comes from --text-on-dark (= --on-navy-mute) — no rule needed. */
.main-nav a {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 400;
}
/* Top-level links brighten to white; the plate that used to sit behind them is
gone with the link's side padding (see style.css). */
.main-nav a:hover { color: #ffffff; }
.main-nav a.active { color: var(--amber); }
/* ---- mega-nav dropdown panels ----
Panel is navy-deep (a shade below the navy bar) so it reads as a raised
surface on the dark header; style.css would have painted it --bg-elevated
= mist, i.e. a near-white plate hanging off a navy bar. Text takes the
light-on-navy ramp, and amber is legitimate as the hover accent HERE
because the surface is navy — the contrast rule above only forbids amber
text on light surfaces. */
.main-nav > ul > li > ul {
background: var(--navy-deep);
border-color: rgba(255,255,255,0.09);
box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.main-nav > ul > li > ul > li > a {
color: var(--on-navy-mute);
font-size: 0.8125rem;
}
.main-nav > ul > li > ul > li > a:hover,
.main-nav > ul > li > ul > li > a:focus {
color: var(--amber);
background: rgba(255,255,255,0.06);
}
/* Group labels: mono uppercase micro-type, same treatment as .eyebrow and
the sidebar section labels. Not links, so they stay muted. */
.main-nav .menu-heading > span {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #7c949d; /* 4.5:1 on navy-deep — decorative label */
}
/* Header actions: one amber fill per header, and the primary action wins it.
"Log in" is a plain nav link (style.css strips its border/fill/padding), so
here it only needs the mono face — colour comes from --text-on-dark and its
hover brightens to white exactly like a nav link. */
.header-login-btn {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 400;
}
.header-login-btn:hover { color: #ffffff; }
/* Amber fill takes NAVY text, never white (contrast rule at the top) — both
now arrive from --highlight / --text-on-accent, and style.css owns the
borderless 9px/18px pill geometry. */
.header-cta-btn {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
}
.header-cta-btn:hover { background: var(--highlight-dk); }
/* ===== MOBILE NAV — still on navy ====================================== */
.nav-toggle { border-color: rgba(255,255,255,0.22); }
/* .nav-toggle span bars take --text-on-dark from style.css. */
.mobile-nav {
background: var(--navy);
border-top: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 8px 20px rgba(36,56,66,0.18);
}
/* Overlay rows want the brightest ramp step, one above --text-on-dark, since
they are the only navigation on the page at this width. */
.mobile-nav a {
color: var(--on-navy);
border-bottom-color: rgba(255,255,255,0.10);
}
/* Group rows carry the divider instead of the anchor (the anchor shares the
row with the +/- button), so the same navy-safe rule colour applies. */
.mobile-nav .nav-group { border-bottom-color: rgba(255,255,255,0.10); }
/* +/- affordance: amber on navy is the accent here, and it is a glyph, not
body copy. */
.mobile-nav .nav-group-toggle { color: var(--amber); }
/* Second level is de-emphasised so the hierarchy reads without indent alone. */
.mobile-nav li.has-children > ul a { color: var(--on-navy-mute); }
.mobile-nav li.has-children > ul a:hover { color: var(--amber); }
.mobile-nav .menu-heading > span {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #7c949d;
}
/* Same one-amber-fill split as the desktop header: ghost "Log in", amber
"Get started". style.css sets these borders with !important, so the
overrides need it too. */
.mobile-nav-login {
color: var(--on-navy);
background: none;
border: 1px solid rgba(255,255,255,0.22) !important;
font-family: var(--font-mono);
font-weight: 400;
}
.mobile-nav-login:hover { color: #ffffff; background: rgba(255,255,255,0.07); }
.mobile-nav-cta {
color: var(--navy);
background: var(--amber);
border: 1px solid var(--amber) !important;
font-family: var(--font-mono);
font-weight: 600;
}
.mobile-nav-cta:hover { color: var(--navy); background: var(--highlight-dk); }
/* ===== SIDEBAR — white, mono section labels, amber active marker ======= */
.sidebar-section h3,
.sidebar-group-title {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6875rem;
letter-spacing: 0.11em;
color: var(--slate);
}
/* Hover: style.css uses --text-strong here, which is already ink on the white
sidebar; only the plate is softened from --bg-hover to mist. */
.nav-item a:hover { background: var(--mist); }
/* Active page: amber left rule + pale amber tint, navy text.
style.css used color:var(--highlight) — amber text at 1.84:1 on white. */
.nav-item a.active {
color: var(--ink);
background: var(--highlight-bg);
border-left: 3px solid var(--amber);
padding-left: calc(0.625rem - 3px);
border-radius: 0 var(--radius) var(--radius) 0;
}
/* Group label of the active branch — also amber text before. */
.nav-summary.active a { color: var(--orange); }
/* ===== PAGE TITLE ======================================================
doc_page.html renders
outside .markdown-body, so style.css never
reached it: UA sizing, with margins zeroed by the global reset. Give it
the same treatment .markdown-body h1 gets. */
.content > article > h1 {
font-size: 1.875rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 1rem;
}
/* ===== LANGUAGE SWITCHER =============================================== */
.lang-btn { font-family: var(--font-mono); }
/* hover was color:var(--highlight) — amber text on white */
.lang-btn:hover { border-color: var(--amber); color: var(--ink); }
/* Amber fill; the navy text on it now comes from --text-on-accent. */
.lang-btn.active {
border-color: var(--amber);
background: var(--amber);
}
/* ===== HOME PAGE ======================================================= */
.card-grid h2 {
font-family: var(--font-mono);
font-weight: 500;
letter-spacing: 0.11em;
color: var(--slate);
}
/* Cards sit on paper in the reference design; --bg-elevated is mist. */
.card { background: var(--paper); }
/* .badge / .tag-pill were amber text on a 12% amber tint (~1.8:1). The
reference treatment for a small meta pill is mono on mist, slate text. */
.badge,
.tag-pill {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--slate);
background: var(--mist);
border: 1px solid var(--line);
}
/* THE INVERSION TRAP, now fixed upstream: style.css used to say
.ai-prompt-btn{background:var(--highlight);color:var(--bg)} — written when
--bg was #162228, so it turned white-on-amber the moment --bg went white.
It reads --text-on-accent instead, so no colour override is needed here.
The hover still is: style.css hardcodes #e09a2a rather than the token. */
.ai-prompt-btn:hover { background: var(--highlight-dk); } /* was #e09a2a */
/* ===== MARKDOWN CONTENT ================================================ */
/* Links: orange, not amber. Both selectors are restated because
`.content a:not(.card):not(.btn):not(.lang-btn)` (0,0,4,1) outranks
`.markdown-body a` and would otherwise keep painting amber. */
.markdown-body a { color: var(--orange); }
.content a:not(.card):not(.btn):not(.lang-btn) { color: var(--orange); }
/* Inline code: NEUTRAL — mist fill, --line border, navy glyphs. style.css
tinted the glyphs amber (color:var(--highlight)): 1.8:1 on this fill, and
it read as a link. Same fix for the API-reference inline-code variants,
whose rgba(0,0,0,0.0x) fills also go to brand mist. */
.markdown-body code,
.auth-list code,
.params-table code {
background: var(--mist);
border-color: var(--line);
color: var(--ink);
}
.base-url code,
.content-type,
.param-in { background: var(--mist); border-color: var(--line); }
/* Code blocks stay navy. style.css hardcodes background:#f5f7f9 with
color:#24292e — a light block on a light page, flat and off-brand. */
.markdown-body pre {
background: var(--navy);
border-color: rgba(255,255,255,0.08);
}
.markdown-body pre code { color: var(--on-navy); }
/* Blockquote: mist fill + amber left rule (reference .rich-text
blockquote). style.css used rgba(0,0,0,0.04) with a --text-dim rule.
The semantic .callout-* variants already carry light tints with dark
text, survive the flip unchanged, and are deliberately left alone. */
.markdown-body blockquote {
background: var(--mist);
border-left-color: var(--amber);
color: var(--slate);
}
/* Tables: mono uppercase headers, zebra body, amber hover tint. */
.markdown-body th {
background: var(--mist);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate);
}
.markdown-body tbody tr:nth-child(even) { background: rgba(36,56,66,0.035); }
.markdown-body tr:hover td { background: var(--highlight-bg); }
/* ===== API REFERENCE HEADER ============================================ */
/* Amber fill + navy text both arrive from the tokens now (--highlight is
--amber here, --text-on-accent is --navy); only the mono face is ours. */
.version-badge { font-family: var(--font-mono); }
/* The amber-tinted auth panel works on white; it gains the reference
callout's amber left rule. Its mono heading was amber text on that same
tint (~1.8:1) and goes navy. */
.auth-section {
border-color: rgba(251,176,64,0.35);
border-left: 4px solid var(--amber);
}
.auth-section h3 {
font-family: var(--font-mono);
font-weight: 600;
color: var(--navy);
}
/* .auth-credentials-hint has no rule in style.css at all. */
.auth-credentials-hint {
font-size: 0.8125rem;
color: var(--slate);
margin: 0.875rem 0 0.625rem;
padding-bottom: 0;
}
/* ===== ENDPOINTS =======================================================
Method badges are ALREADY light pills (coloured text on a same-hue tint)
in style.css and already mono via --font-mono, so there is intentionally
no .method-badge rule here. Only the hover shadow needs fixing: it was
rgba(0,0,0,0.3), which is a bruise on a white page. */
.endpoint:hover {
border-color: rgba(251,176,64,0.45);
box-shadow: 0 4px 14px rgba(36,56,66,0.08);
}
/* ===== PARAMS / SECTION LABELS ========================================= */
.params-section h4,
.request-body-section h4,
.responses-section h4,
.code-samples h4,
.try-it-response h5 {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.11em;
}
.params-table th {
background: var(--mist);
font-family: var(--font-mono);
color: var(--slate);
}
.params-table tr:hover td { background: var(--highlight-bg); }
/* ===== RESPONSES ======================================================= */
/* Response examples are code: navy, not var(--bg-elevated) (mist) with
slate text. */
.response-example {
background: var(--navy);
border-color: rgba(255,255,255,0.08);
color: var(--on-navy-mute);
}
/* ===== CODE SAMPLES ==================================================== */
/* Active tab: navy label + amber rule. style.css used amber for BOTH the
text and the rule; the rule is fine, the 0.8rem amber text was not. */
.tab-btn.active {
color: var(--ink);
border-bottom-color: var(--amber);
}
/* Hardcoded #f5f7f9 / #24292e — same light-on-light problem as
.markdown-body pre. */
.code-block {
background: var(--navy);
border-color: rgba(255,255,255,0.08);
}
.code-block code { color: var(--on-navy); }
/* ===== BUTTONS / TRY IT ================================================ */
/* .btn-primary needs nothing: style.css fills it with --highlight (= amber)
and labels it with --text-on-accent (= navy), hover included. */
/* "Try it" was amber text inside an amber border, both on white. Reference
ghost button instead: ink text, --line border. */
.btn-outline {
color: var(--ink);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-weight: 500;
}
.btn-outline:hover { background: var(--mist); border-color: var(--slate); }
/* Try-it fields already read the remapped tokens (white fill, --line
border, navy text); only the focus glow needs lifting to stay visible
against white. */
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(251,176,64,0.22);
}
/* Try-it response body is code: hardcoded #f5f7f9 / #24292e -> navy. */
.response-body {
background: var(--navy);
color: var(--on-navy);
border-color: rgba(255,255,255,0.08);
}
/* ===== FOOTER — navy ===================================================
style.css paints it with var(--bg) + var(--bg-border), sets the copy to
var(--text-dim) and the links to var(--text-muted) — both slate-ish, so
both would land at ~2:1 once the surface went navy. */
.site-footer {
background: var(--navy);
border-top: none;
color: var(--on-navy-dim);
}
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: var(--amber); }
.footer-copy { font-family: var(--font-mono); font-size: 0.78rem; }
/* ===== ERROR PAGES ===================================================== */
/* 6rem/800 amber on white is 1.84:1. Orange at this size clears AA-large
(3.15:1 against a 3:1 threshold); amber never would. */
.error-code { color: var(--orange); }
/* ===== COMMENTS ======================================================== */
.comment-required { color: var(--orange); }
/* .comment-error used to be overridden here because style.css put amber text
on a red-tinted (#fef2f2) box. style.css now carries this exact red box, so
the override is gone. .btn-comment-submit likewise takes its amber fill and
navy label straight from --highlight / --text-on-accent. */
.comment-form-field input:focus,
.comment-form-field textarea:focus { border-color: var(--amber); }