/*
* Openmarkets brand theme
*
* Layered on top of the Scalar "default" theme via siteConfig.head.styles.
* Only CSS custom properties are overridden, so the base theme keeps
* handling layout, spacing and typography.
*
* Brand colours are taken from the legacy ct-dev developer portal:
* #142644 navy (skin-blue navbar/sidebar, and the logo wordmark)
* #b60065 magenta (the logo flower)
* #ecf0f4 pale blue-grey page background
*
* Dark mode uses a specified neutral ramp rather than the brand navy:
* #1e1e2d page (--scalar-background-1, the content area)
* #151521 body (--scalar-background-2, the canvas behind it, and
* the header and sidebar chrome)
* The greys and borders are tuned to that same hue family.
*
* The magenta is lightened to #ff5fa8 in dark mode: #b60065 only reaches
* 2.5:1 against #1e1e2d, while #ff5fa8 reaches 5.8:1.
* Every text pair below meets WCAG AA.
*
* Scalar puts .light-mode / .dark-mode on , so the selectors are
* scoped to body to outrank the base theme without needing !important.
* HTTP method colours (--scalar-color-green, -red, -blue, ...) are left
* alone on purpose so API reference badges keep their standard meaning.
*/
body.light-mode {
--scalar-background-1: #ffffff;
--scalar-background-2: #f3f6fa;
--scalar-background-3: #e4eaf2;
--scalar-background-accent: #b6006514;
--scalar-color-1: #142644;
--scalar-color-2: #5b6b85;
--scalar-color-3: #8494ad;
--scalar-color-accent: #b60065;
--scalar-border-color: #d8dfe9;
--scalar-link-color: var(--scalar-color-accent);
--scalar-link-color-hover: #96004f;
--scalar-button-1: #b60065;
--scalar-button-1-hover: #96004f;
--scalar-button-1-color: #ffffff;
}
body.dark-mode {
--scalar-background-1: #1e1e2d;
--scalar-background-2: #151521;
--scalar-background-3: #2a2a3c;
--scalar-background-accent: #ff5fa81f;
--scalar-color-1: #eceef5;
--scalar-color-2: #b1b1c6;
--scalar-color-3: #8888a0;
--scalar-color-accent: #ff5fa8;
--scalar-border-color: #2f2f45;
--scalar-link-color: var(--scalar-color-accent);
--scalar-link-color-hover: #ffffff;
--scalar-button-1: #ff5fa8;
--scalar-button-1-hover: #f472a8;
--scalar-button-1-color: #1e1e2d;
}
/* Header. Light mode stays white so the navy logo reads; dark mode uses
the body colour as chrome, which is where the white logo variant belongs. */
body.light-mode .t-doc__header {
--scalar-header-background-1: #ffffff;
--scalar-header-border-color: #d8dfe9;
--scalar-header-color-1: #142644;
--scalar-header-color-2: #5b6b85;
--scalar-header-call-to-action-color: #b60065;
}
body.dark-mode .t-doc__header {
--scalar-header-background-1: #151521;
--scalar-header-border-color: #2f2f45;
--scalar-header-color-1: #eceef5;
--scalar-header-color-2: #b1b1c6;
--scalar-header-call-to-action-color: #ff5fa8;
}
/* Sidebar. Active page is marked with the brand magenta rather than the
default neutral grey. */
body.light-mode .t-doc__sidebar {
--scalar-sidebar-background-1: #f7f9fc;
--scalar-sidebar-color-1: #142644;
--scalar-sidebar-color-2: #5b6b85;
--scalar-sidebar-border-color: #dfe6ef;
--scalar-sidebar-item-hover-background: #eef2f8;
--scalar-sidebar-item-hover-color: #142644;
--scalar-sidebar-item-active-background: #b6006514;
--scalar-sidebar-color-active: #b60065;
--scalar-sidebar-indent-border-active: #b60065;
--scalar-sidebar-search-background: #ffffff;
--scalar-sidebar-search-border-color: #dfe6ef;
}
body.dark-mode .t-doc__sidebar {
--scalar-sidebar-background-1: #151521;
--scalar-sidebar-color-1: #eceef5;
--scalar-sidebar-color-2: #b1b1c6;
--scalar-sidebar-border-color: #2f2f45;
--scalar-sidebar-item-hover-background: #2a2a3c;
--scalar-sidebar-item-hover-color: #ffffff;
--scalar-sidebar-item-active-background: #ff5fa81f;
--scalar-sidebar-color-active: #ff5fa8;
--scalar-sidebar-indent-border-active: #ff5fa8;
--scalar-sidebar-search-background: #1e1e2d;
--scalar-sidebar-search-border-color: #2f2f45;
}
/*
* Confluence FAQ tables
*
* docs/content/support/faq.mdx keeps the tables from the knowledge base as
* HTML rather than converting them to Markdown, because a GFM table cannot
* express colspan, rowspan, or a cell holding three paragraphs and a list -
* all of which those articles use, and converting them would mean rewriting
* what the article says. The generator strips the tags back to structure and
* leaves the styling here.
*
* Selected on the shape of the markup, not on a class: Confluence wraps the
* content of every cell in a , which nothing else in these docs does. The
* class names would have been simpler, but whether `class` or `className`
* survives depends on how the MDX pipeline treats HTML, and this should not
* have to bet on that.
*
* Borders and padding are set outright rather than left to the base theme,
* for the same reason - the base theme's table rules may well be scoped to
* the tables it generates itself.
*/
table:has(td > p),
table:has(th > p) {
/* A table box cannot scroll. As a block it can, and the rows inside form an
anonymous table box that still lays out as a table - which is what keeps
the nine-column account-types matrix from pushing the page sideways. */
display: block;
overflow-x: auto;
max-width: 100%;
margin: 1rem 0;
border: 1px solid var(--scalar-border-color);
border-collapse: collapse;
font-size: var(--scalar-mini, 0.8125rem);
line-height: 1.5;
& :is(th, td) {
border: 1px solid var(--scalar-border-color);
padding: 0.5rem 0.75rem;
text-align: left;
/* Cells are wildly uneven in height once one of them holds a list. */
vertical-align: top;
}
& th {
background: var(--scalar-background-2);
color: var(--scalar-color-1);
font-weight: 600;
}
/* One
per line is how the Confluence editor stores a cell, so the
paragraph's own margins would space a cell out like body copy. */
& :is(th, td) > p {
margin: 0;
}
& :is(th, td) > p + p {
margin-top: 0.35rem;
}
& :is(th, td) :is(ul, ol) {
margin: 0.35rem 0 0;
padding-left: 1.25rem;
}
}
/*
* Confluence emoticons. Authors use one as a heading ornament, and the wiki
* serves it at 72px, which lands a full-size image in the middle of a line.
*/
img[src*="/images/icons/emoticons/"] {
display: inline;
width: 1.15em;
height: 1.15em;
vertical-align: -0.2em;
}
/*
* FAQ filter
*
* The input docs/assets/openmarkets-faq-filter.js inserts above the collapsed questions on
* /support/faq. Every colour comes from the variables set at the top of this
* file, so it follows both palettes without knowing which one is active, and a
* page that never gets the input is unaffected.
*/
.faq-filter {
margin: 1.5rem 0;
}
.faq-filter__input {
box-sizing: border-box;
width: 100%;
padding: 0.6rem 0.85rem;
border: 1px solid var(--scalar-border-color);
border-radius: var(--scalar-radius, 4px);
background: var(--scalar-background-1);
color: var(--scalar-color-1);
font: inherit;
font-size: var(--scalar-small, 0.875rem);
}
.faq-filter__input::placeholder {
color: var(--scalar-color-3);
}
.faq-filter__input:focus-visible {
border-color: var(--scalar-color-accent);
outline: 2px solid var(--scalar-color-accent);
outline-offset: 1px;
}
/* Reserved whether or not it holds a count, so typing does not shunt the
questions down the page by a line. */
.faq-filter__status {
min-height: 1.4em;
margin: 0.5rem 0 0;
color: var(--scalar-color-2);
font-size: var(--scalar-mini, 0.8125rem);
}
/*
* FAQ questions
*
* The
that docs/assets/openmarkets-faq-filter.js moves into a
* collapsible's on /support/faq. It is a heading because Scalar
* builds the contents sidebar and the page anchors from Markdown headings, and
* it stays a real, visible box because a heading with no box is one the sidebar
* cannot scroll to - but in the summary it is a label, so it is given the
* summary's own typography rather than a heading's.
*
* inline, and not merely unstyled, because it takes the place of the text node
* the summary had there: a block would lay the summary out differently from the
* one Scalar wrote, and this way the markup around it cannot tell the
* difference.
*/
.faq-question {
display: inline;
margin: 0;
padding: 0;
border: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
/*
* Scalar's own heading controls, which come along when the heading moves: the
* link to the heading, and the tick it swaps in once that link has been copied.
* A collapsible's label wants neither - the whole row is already a control, and
* the question keeps its id and stays linkable from the contents sidebar.
*
* The class goes on the children of a promoted heading that hold none of the
* question, so anything wrapping the words themselves is never caught by it.
* The pseudo-elements are cleared as well, in case a release draws the marker
* with content rather than with an element.
*/
.faq-question__control {
display: none;
}
.faq-question::before,
.faq-question::after {
content: none;
}