`, and our two
anchors inside it are also `md-header__source` (block, width:100%). Force the
parent slot to flex-row and let the children size to content. */
.md-header__source:has(> .md-header__oci) {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0.25rem;
width: auto;
max-width: none;
}
/* Right side — OCI rounded-O mark + black Oracle wordmark, linked
to oracle.com/.../generative-ai. */
.md-header__source.md-header__oci {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.55rem;
margin-right: 0;
margin-left: 0.3rem;
border-radius: 7px;
transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.md-header__source.md-header__oci:hover {
background-color: rgba(199, 70, 52, 0.08);
transform: translateY(-1px);
box-shadow: 0 2px 8px -2px rgba(199, 70, 52, 0.25);
}
/* Header OCI rounded-O mark — 32×32 square (Oracle social-avatar scale). */
.md-header__oci-mark {
width: 32px;
height: 32px;
display: block;
flex: 0 0 auto;
}
/* Header Oracle wordmark — 22px tall × auto width (preserves the official
4.763:1 aspect ratio from FY26 image50.svg viewBox 109.36 × 22.96). */
.md-header__oracle-wordmark {
height: 22px;
width: auto;
aspect-ratio: 109.36 / 22.96;
display: block;
flex: 0 0 auto;
}
@media (max-width: 60em) {
/* Tighten header inner padding so logo + hamburger + title + icons fit. */
.md-header__inner {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Scale the locus mark down on narrow screens. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 1.6rem;
max-height: 28px;
}
/* Show Oracle mark at reduced size; hide wordmark. */
.md-header__oracle-wordmark { display: none; }
.md-header__oci-mark { width: 20px; height: 20px; }
.md-header__source.md-header__oci { padding: 0.2rem 0.3rem; }
}
/* GitHub icon white when inside the mobile drawer (red primary background). */
.md-nav--primary .md-header__source.md-header__github,
.md-drawer .md-header__source.md-header__github {
color: #FFFFFF;
}
/* Header right slot — PyPI version badge sits to the right of the GitHub
icon, hugging the far right edge of the header. */
.md-header__source.md-header__pypi {
display: inline-flex;
align-items: center;
margin-left: 0.4rem;
padding: 0;
border-radius: 4px;
transition: transform 0.15s;
}
.md-header__source.md-header__pypi:hover {
transform: translateY(-1px);
}
.md-header__pypi-badge {
height: 20px;
width: auto;
display: block;
}
@media (max-width: 60em) {
.md-header__source.md-header__pypi { margin-left: 0.25rem; }
.md-header__pypi-badge { height: 16px; }
}
.md-nav--primary .md-header__source.md-header__github:hover {
color: #FFFFFF;
opacity: 0.8;
}
.md-tabs {
background-color: var(--or-bg);
color: var(--locus-ink);
border-bottom: 1px solid var(--or-rule);
}
/* Tighter tab strip — Material defaults to a 2.4rem item height with a
0.8rem top-margin on each link, leaving a tall empty band above the
labels. Compact both so the tabs sit closer to the banner. */
.md-tabs__item {
height: 1.8rem;
}
.md-tabs__link {
color: var(--locus-mute);
font-weight: 600;
opacity: 1;
letter-spacing: 0.01em;
margin-top: 0.35rem;
}
.md-tabs__link:hover {
color: var(--or-red);
}
.md-tabs__link--active {
color: var(--locus-ink);
position: relative;
}
.md-tabs__link--active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--or-red);
}
/* ---------------------------------------------------------------------------
Side-nav — calmer, Oracle off-white feel.
--------------------------------------------------------------------------- */
.md-nav__title {
color: var(--or-text);
font-weight: 700;
}
/* Mobile drawer header — override Material's red primary background with
the same surface + red hairline the desktop header uses. */
.md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--locus-surface);
color: var(--locus-ink);
border-bottom: 2px solid var(--or-red);
box-shadow: none;
}
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button {
color: var(--locus-ink);
}
/* Source slot inside the drawer — target the actual container. */
.md-nav__source {
background-color: #2A2826 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--or-surface);
color: var(--or-text);
}
[data-md-color-scheme="slate"] .md-nav__source {
background-color: #2A2826 !important;
}
/* Mobile: float the palette toggle into the right rail. At cramped
widths the toggle was rendering on top of the "s" in "locus" because
the flex flow placed it immediately after the wordmark, where the
title block doesn't end cleanly. ``margin-left: auto`` shoves it to
the right edge of the header__inner row, joining the search +
source-link cluster — no more overlap, and the toggle stays
discoverable next to the other header actions. */
@media (max-width: 56em) {
form.md-header__option {
margin-left: auto;
margin-right: 0.25rem;
flex: 0 0 auto;
}
}
/* Icons in the dark drawer source strip — white for contrast. */
.md-drawer .md-header__source .md-header__oci-mark,
.md-drawer .md-header__source .md-header__oracle-wordmark {
opacity: 0.85;
filter: brightness(0) invert(1);
}
/* Section headers (Multi-agent, Agents, Tools …) — teal accent, uppercase,
small caps so they read as category labels not nav items. */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > .md-nav__link:not(.md-nav__link--active) {
color: var(--or-teal) !important;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--or-rule);
opacity: 1;
}
.md-nav--primary .md-nav__item--section:first-child > .md-nav__link {
border-top: none;
margin-top: 0;
padding-top: 0.2rem;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link:not(.md-nav__link--active) {
color: var(--or-sage-teal) !important;
border-top-color: var(--or-rule);
}
.md-nav__link--active,
.md-nav__link[aria-current="true"] {
color: var(--or-red-deep) !important;
font-weight: 600;
}
.md-nav__item .md-nav__link:hover {
color: var(--or-link);
}
/* ---------------------------------------------------------------------------
Code blocks — soft sand background, Oracle red filename tab.
--------------------------------------------------------------------------- */
.md-typeset code {
background-color: rgba(199, 70, 52, 0.10);
color: var(--locus-code-inline);
border-radius: 3px;
font-size: 0.85em;
}
.md-typeset pre > code {
background-color: var(--or-bg-soft);
color: var(--or-text);
}
.md-typeset .highlight {
border-left: 3px solid var(--or-red);
border-radius: 0 4px 4px 0;
}
/* ---------------------------------------------------------------------------
Tables — Oracle off-white striping, subtle red header underline.
--------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
border: 1px solid var(--or-rule);
border-radius: 4px;
overflow: hidden;
font-size: 0.84rem;
}
.md-typeset table:not([class]) th {
background-color: var(--or-bg-soft);
color: var(--or-text);
font-weight: 700;
border-bottom: 2px solid var(--or-red);
}
.md-typeset table:not([class]) tr:nth-child(even) {
background-color: var(--locus-table-stripe);
}
/* ---------------------------------------------------------------------------
Admonitions — re-tint to Oracle accents.
--------------------------------------------------------------------------- */
.md-typeset .admonition.note,
.md-typeset details.note {
border-left-color: var(--or-link);
}
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
background-color: rgba(0, 104, 140, 0.08);
color: var(--or-link);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
border-left-color: var(--or-red);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
background-color: rgba(199, 70, 52, 0.08);
color: var(--or-red-deep);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
border-left-color: var(--or-sage-green);
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
background-color: rgba(134, 181, 150, 0.18);
color: #2f6243;
}
/* ---------------------------------------------------------------------------
Buttons / pills — Oracle red CTA.
--------------------------------------------------------------------------- */
.md-typeset .md-button {
background-color: transparent;
border: 1px solid var(--or-red);
color: var(--or-red);
border-radius: 3px;
font-weight: 600;
letter-spacing: 0.01em;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
background-color: var(--or-red);
color: #FFFFFF;
border-color: var(--or-red);
}
.md-typeset .md-button--primary {
background-color: var(--or-red);
color: #FFFFFF;
}
.md-typeset .md-button--primary:hover {
background-color: var(--or-red-deep);
}
/* ---------------------------------------------------------------------------
Footer — Oracle dark bar with red micro-accent + Oracle wordmark.
--------------------------------------------------------------------------- */
.md-footer-meta {
background-color: #161A1A;
}
.md-footer__inner {
border-top: 2px solid var(--or-red);
}
/* Footer brand block — Oracle Generative AI title + copyright line.
Driven by HTML in mkdocs.yml `copyright:`. */
.md-copyright {
font-size: 0.72rem;
letter-spacing: 0.04em;
line-height: 1.45;
}
.md-copyright__highlight {
display: block;
padding: 0;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--locus-sans);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.005em;
color: #FFFFFF;
margin: 0 0 0.25rem;
text-transform: none;
}
.footer-brand__o {
display: inline-block;
width: 22px;
height: 22px;
background-image: url("../img/oci-mark.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex: 0 0 auto;
}
.footer-copy {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
color: rgba(255, 255, 255, 0.72);
}
/* Footer Oracle wordmark — official aspect 4.763:1 (109.36 × 22.96).
Anchor the height; let width compute from aspect-ratio for pixel-perfect
proportions. */
.oracle-mark {
display: inline-block;
height: 14px;
aspect-ratio: 109.36 / 22.96;
width: auto;
min-width: 66.7px;
background-image: url("../img/oracle.svg");
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
filter: brightness(0) invert(1) opacity(0.85);
vertical-align: middle;
}
/* ---------------------------------------------------------------------------
Search input — keep neutral, red focus ring.
--------------------------------------------------------------------------- */
.md-search__input {
background-color: var(--or-bg-soft);
color: var(--locus-ink);
}
.md-search__input::placeholder {
color: var(--locus-mute);
}
.md-search__input + .md-search__icon {
color: var(--locus-mute);
}
.md-search__input:focus,
.md-search__input:hover {
background-color: var(--locus-surface);
box-shadow: 0 0 0 2px rgba(199, 70, 52, 0.20);
}
/* ---------------------------------------------------------------------------
Hero treatment for the index page (`# Locus` h1).
--------------------------------------------------------------------------- */
.md-typeset h1:first-of-type {
font-size: 2.8rem;
letter-spacing: -0.01em;
}
/* ---------------------------------------------------------------------------
Oracle-distinctive callout — used on the Capabilities page to highlight
wedge features. Oracle-red border + warm sand tint, red star icon.
Trigger with: `!!! oracle-distinctive "Distinctive to locus"`
--------------------------------------------------------------------------- */
:root {
--md-admonition-icon--oracle-distinctive: url('data:image/svg+xml;charset=utf-8,');
}
.md-typeset .admonition.oracle-distinctive,
.md-typeset details.oracle-distinctive {
border-color: var(--or-red);
background: linear-gradient(135deg,
rgba(199, 70, 52, 0.04) 0%,
rgba(240, 204, 113, 0.04) 100%);
}
.md-typeset .oracle-distinctive > .admonition-title,
.md-typeset .oracle-distinctive > summary {
background-color: rgba(199, 70, 52, 0.08);
color: var(--or-red-deep);
font-weight: 700;
letter-spacing: -0.01em;
}
.md-typeset .oracle-distinctive > .admonition-title::before,
.md-typeset .oracle-distinctive > summary::before {
background-color: var(--or-red);
-webkit-mask-image: var(--md-admonition-icon--oracle-distinctive);
mask-image: var(--md-admonition-icon--oracle-distinctive);
}
/* ---------------------------------------------------------------------------
Diagrams — responsive sizing for the agent-loop SVG and similar.
--------------------------------------------------------------------------- */
.md-typeset img[src*="agent-loop"],
.md-typeset img[src*="multi-agent-patterns"],
.md-typeset img[src*="img/patterns/"],
.md-typeset img.diagram {
display: block;
width: 100%;
max-width: 720px;
height: auto;
margin: 1.5rem auto;
}
.md-typeset img[src*="multi-agent-patterns"] {
max-width: 920px;
}
/* The architecture diagrams (agent-loop, multi-agent-patterns, the
per-pattern SVGs under img/patterns/, and the architecture / sequence
topologies) are authored against a light background. In dark mode the
dark-grey strokes and labels vanish, so render them on a near-white
card. */
[data-md-color-scheme="slate"] .md-typeset img[src*="agent-loop"],
[data-md-color-scheme="slate"] .md-typeset img[src*="multi-agent-patterns"],
[data-md-color-scheme="slate"] .md-typeset img[src*="img/patterns/"],
[data-md-color-scheme="slate"] .md-typeset img[src*="architecture"],
[data-md-color-scheme="slate"] .md-typeset img[src*="sequence-26ai"],
[data-md-color-scheme="slate"] .md-typeset img.diagram {
background-color: #FBF9F8;
padding: 1rem;
border-radius: 0.5rem;
}
/* ---------------------------------------------------------------------------
Dark-mode logo handling.
- Oracle wordmark (black-fill) → invert filter flips to white.
- locus mark (dark stroke + red accents) → swap to mark-dark.svg variant
which has the stroke recoloured to off-white.
--------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-header__oracle-wordmark {
content: url("../img/oracle-white.svg");
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
content: url("../img/mark-dark.svg");
}
/* Footer Oracle wordmark already inverts the red SVG to white via filter;
in dark mode swap to the official white SVG and drop the filter. */
[data-md-color-scheme="slate"] .oracle-mark {
background-image: url("../img/oracle-white.svg");
filter: none;
}
/* Header GitHub link — sits next to the OCI / Oracle source button. */
.md-header__source.md-header__github {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
max-width: none;
padding: 0;
margin-left: 0.4rem;
border-radius: 8px;
color: var(--locus-ink);
transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.md-header__source.md-header__github:hover {
background-color: rgba(199, 70, 52, 0.10);
color: var(--or-red);
transform: translateY(-1px);
}
.md-header__github-icon {
width: 22px;
height: 22px;
display: block;
}
/* Hide the ¶ permalink anchor on the hero h1 — noise on a marketing page. */
.md-typeset .locus-hero h1 a.headerlink {
display: none;
}
/* Header title area — pointer cursor so users know it goes home. */
.md-header__ellipsis {
cursor: pointer;
}
/* ---------------------------------------------------------------------------
* Notebook index filter — workbench-style live search.
* --------------------------------------------------------------------------- */
.notebook-filter {
margin: 1rem 0 1.5rem;
}
.notebook-filter__input {
width: 100%;
padding: 0.7rem 1rem;
font: inherit;
font-size: 0.95rem;
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 0.5rem;
transition: border-color 120ms, box-shadow 120ms;
}
.notebook-filter__input:focus {
outline: none;
border-color: var(--md-accent-fg-color);
box-shadow: 0 0 0 3px rgba(196, 36, 32, 0.12);
}
.notebook-filter__input::placeholder {
color: var(--md-default-fg-color--light);
}
/* Sidebar notebook filter — same UX, scaled to the primary sidebar. */
.sidebar-filter {
margin: 0.4rem 0.6rem 0.8rem;
list-style: none;
}
.sidebar-filter__input {
width: 100%;
padding: 0.4rem 0.6rem;
font: inherit;
font-size: 0.72rem;
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 0.35rem;
transition: border-color 120ms, box-shadow 120ms;
}
.sidebar-filter__input:focus {
outline: none;
border-color: var(--md-accent-fg-color);
box-shadow: 0 0 0 2px rgba(196, 36, 32, 0.18);
}
.sidebar-filter__input::placeholder {
color: var(--md-default-fg-color--light);
}
/* ---------------------------------------------------------------------------
* Mobile polish — narrow viewports (<= 48em).
*
* Material's default per-table horizontal scroll is workable for one
* table but painful on /notebooks/ where the page is a stack of nine.
* We let tables fit the viewport instead: 100% width, auto layout,
* prose wraps with `overflow-wrap: anywhere` (which only breaks when
* needed — unlike `break-all` which splits in the middle of perfectly
* sized tokens like `openai.gpt-5.5-pro`).
*
* Also: cap any in-content image (workbench gif, etc.) at the column
* width so it never blows past the viewport edge.
* --------------------------------------------------------------------- */
@media (max-width: 48em) {
/* Tables: make them fit the viewport rather than scroll horizontally. */
.md-typeset__scrollwrap {
margin-left: -0.4rem;
margin-right: -0.4rem;
overflow-x: hidden;
}
.md-typeset__table {
display: block;
width: 100%;
padding: 0 0.4rem;
overflow-x: visible;
}
.md-typeset__table > table:not([class]) {
width: 100%;
table-layout: auto;
font-size: 0.78rem;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
padding: 0.45em 0.5em;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* On /notebooks/ index the first column is the row number ("01"…"63") —
slim it to a chip so the prose columns get more room. Other pages
keep auto-sized first columns (Setting/DSN-style text headers). */
.notebook-filter ~ * .md-typeset__table > table:not([class]) th:first-child,
.notebook-filter ~ * .md-typeset__table > table:not([class]) td:first-child,
article:has(.notebook-filter) .md-typeset__table > table:not([class]) th:first-child,
article:has(.notebook-filter) .md-typeset__table > table:not([class]) td:first-child {
width: 1.6rem;
padding-left: 0.4em;
padding-right: 0.3em;
text-align: center;
color: var(--locus-mute);
font-variant-numeric: tabular-nums;
}
/* Cap in-content media at the column width. */
.md-typeset img,
.md-typeset video {
max-width: 100%;
height: auto;
}
}
/* ---------------------------------------------------------------------------
* Mobile header — keep the wordmark, tagline, search icon, and source
* badges from colliding at narrow widths.
*
* At ~480–560px the "locus" + tagline title block grows wide enough to
* visually overlap the search magnifier sitting in the right rail. We
* stage the trimming in two steps:
* - ≤ 56em: shrink the wordmark, tighten the tagline letter-spacing.
* - ≤ 30em: drop the tagline + the PyPI version pill entirely; the
* wordmark and OCI/GitHub icons stay.
* --------------------------------------------------------------------- */
@media (max-width: 56em) {
.md-header__ellipsis > .md-header__topic:first-of-type > .md-ellipsis {
font-size: 1.2rem;
}
.md-header__ellipsis > .md-header__topic:first-of-type::after {
letter-spacing: 0.06em;
}
/* Title takes only the space it needs; the right rail keeps its slot. */
.md-header__title { flex: 0 0 auto; }
}
@media (max-width: 30em) {
/* Drop the tagline and the PyPI badge to free up room on small phones. */
.md-header__ellipsis > .md-header__topic:first-of-type::after { display: none; }
.md-header__source.md-header__pypi { display: none; }
.md-header__ellipsis > .md-header__topic:first-of-type > .md-ellipsis {
font-size: 1.1rem;
}
/* Tighter spacing between right-rail icons. */
.md-header__source.md-header__oci { margin-left: 0.15rem; padding: 0.15rem 0.25rem; }
.md-header__source.md-header__github { margin-left: 0.2rem; }
}
/* ---------------------------------------------------------------------------
* Code-block copy button
*
* mkdocs-material's default ``.md-clipboard`` uses
* ``--md-default-fg-color--lightest`` (#c5c8c8 in our light scheme,
* #4a4844 in slate). On our pale-cream code-block background the
* light-scheme variant is practically invisible until you hover.
* Promote the resting state to ``--lighter`` (darker neutral) for
* baseline contrast, and switch to Oracle red on hover so the affordance
* is obvious.
* --------------------------------------------------------------------- */
.md-clipboard {
color: var(--md-default-fg-color--lighter);
opacity: 0.85;
transition: color 120ms ease-in-out, opacity 120ms ease-in-out;
}
.md-clipboard:focus,
.md-clipboard:hover {
color: var(--or-red);
opacity: 1;
}
[data-md-color-scheme="slate"] .md-clipboard {
color: var(--md-default-fg-color--light);
opacity: 0.9;
}
[data-md-color-scheme="slate"] .md-clipboard:focus,
[data-md-color-scheme="slate"] .md-clipboard:hover {
color: var(--or-red-light);
opacity: 1;
}