mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-02 05:24:56 +08:00
640eeaa8e8
Co-authored-by: Dhravya Shah <dhravya@supermemory.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2401 lines
55 KiB
CSS
2401 lines
55 KiB
CSS
/* ------------------------------------------------------------------
|
|
supermemory docs · the console's design language over Mintlify (aspen)
|
|
Tokens copied from apps/console-v2/src/styles/tokens.css in the mono repo.
|
|
Type: Geist everywhere · Geist Mono for eyebrows and data only
|
|
Color: neutral grays, cobalt accent family (#2f86ff fill, #175cd4 text)
|
|
Radius: 6 / 8 / 10 / 14 · controls 8 · cards 10 · no pills
|
|
------------------------------------------------------------------ */
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");
|
|
|
|
:root {
|
|
--sm-bg: #ffffff;
|
|
--sm-bg-2: #f5f5f5;
|
|
--sm-bg-3: #f1f2f4;
|
|
--sm-surface: #ffffff;
|
|
--sm-control: #ffffff;
|
|
--sm-control-hover: #f1f2f4;
|
|
--sm-border: #ededed;
|
|
--sm-border-muted: #f4f4f5;
|
|
--sm-border-hover: #dcdcdc;
|
|
|
|
--sm-text-strong: #05080f;
|
|
--sm-text: #091120;
|
|
--sm-text-2: #5b6472;
|
|
--sm-text-3: #9ea3ad;
|
|
--sm-text-body: #3d424d;
|
|
|
|
--sm-accent: #2f86ff;
|
|
--sm-accent-hover: #1d6fe8;
|
|
--sm-accent-text: #175cd4;
|
|
--sm-accent-text-hover: #1148f7;
|
|
--sm-tint: #f5f9ff;
|
|
--sm-tint-stroke: #b8d1ff;
|
|
|
|
--sm-success: #187a44;
|
|
--sm-success-muted: rgba(24, 122, 68, 0.12);
|
|
--sm-error: #b82929;
|
|
--sm-error-muted: rgba(184, 41, 41, 0.1);
|
|
--sm-warning: #8c540d;
|
|
--sm-warning-muted: rgba(140, 84, 13, 0.12);
|
|
--sm-info: #175cd4;
|
|
--sm-info-muted: rgba(23, 92, 212, 0.1);
|
|
|
|
--sm-shadow-sm: 0 1px 2px 0 rgba(9, 17, 32, 0.05);
|
|
--sm-shadow-md:
|
|
0 2px 6px -1px rgba(9, 17, 32, 0.07), 0 1px 2px 0 rgba(9, 17, 32, 0.05);
|
|
--sm-shadow-float:
|
|
0 8px 40px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
|
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--sm-sidebar-active-fill: #f1f2f4;
|
|
--sm-shadow-sidebar-active: none;
|
|
|
|
--sm-radius-sm: 6px;
|
|
--sm-radius-md: 8px;
|
|
--sm-radius-lg: 10px;
|
|
--sm-radius-xl: 14px;
|
|
|
|
--sm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--sm-dur-fast: 180ms;
|
|
--sm-dur-hover: 150ms;
|
|
--sm-dur-press: 100ms;
|
|
|
|
--sm-font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--sm-font-mono:
|
|
"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
monospace;
|
|
}
|
|
|
|
.dark {
|
|
--sm-bg: #0a0a0a;
|
|
--sm-bg-2: #101010;
|
|
--sm-bg-3: #121212;
|
|
--sm-surface: #0a0a0a;
|
|
--sm-control: #0a0a0a;
|
|
--sm-control-hover: #121212;
|
|
--sm-border: rgba(255, 255, 255, 0.07);
|
|
--sm-border-muted: rgba(255, 255, 255, 0.04);
|
|
--sm-border-hover: rgba(255, 255, 255, 0.14);
|
|
|
|
--sm-text-strong: #fafafa;
|
|
--sm-text: #f5f5f5;
|
|
--sm-text-2: #a2a2a2;
|
|
--sm-text-3: #838383;
|
|
--sm-text-body: #a1a1a1;
|
|
|
|
--sm-accent-text: #6fa8ff;
|
|
--sm-accent-text-hover: #86b6ff;
|
|
--sm-tint: #0d131a;
|
|
--sm-tint-stroke: #1e3973;
|
|
|
|
--sm-success: #4fb877;
|
|
--sm-success-muted: rgba(79, 184, 119, 0.16);
|
|
--sm-error: #f27070;
|
|
--sm-error-muted: rgba(242, 112, 112, 0.14);
|
|
--sm-warning: #f0b359;
|
|
--sm-warning-muted: rgba(240, 179, 89, 0.14);
|
|
--sm-info: #6fa8ff;
|
|
--sm-info-muted: rgba(111, 168, 255, 0.14);
|
|
|
|
--sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--sm-shadow-md:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
|
--sm-shadow-float:
|
|
0 8px 40px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
|
|
--sm-sidebar-active-fill: rgba(255, 255, 255, 0.07);
|
|
--sm-shadow-sidebar-active: none;
|
|
}
|
|
|
|
/* ---- Global type: console voice at reading scale ---- */
|
|
|
|
/* Match the page colour under Mintlify's fixed backdrop, so overscroll and
|
|
long pages never show a second shade */
|
|
html,
|
|
body {
|
|
background-color: var(--sm-bg);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--sm-font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--sm-font-sans) !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: -0.01em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* ---- Reading type (modelled on docs.privy.io) ----
|
|
Body 16/28 in a soft ink so headings carry the contrast. Headings step 36 / 24 / 20
|
|
with -0.025em tracking, and sit closer to the text they introduce than to the text above. */
|
|
h1#page-title {
|
|
font-size: 2.25rem;
|
|
line-height: 2.5rem;
|
|
letter-spacing: -0.025em;
|
|
color: var(--sm-text-strong);
|
|
}
|
|
|
|
#header .prose {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.65;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
#content.prose,
|
|
#content .prose {
|
|
font-size: 1rem;
|
|
line-height: 1.75rem;
|
|
color: var(--sm-text-body);
|
|
hyphens: manual;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
#content h2:not([data-component-part]),
|
|
#content h3:not([data-component-part]),
|
|
/* Headings inside link cards (the overview's hero cards) are card titles,
|
|
not section headings, so they keep their own spacing. */
|
|
#content
|
|
a
|
|
h2:not([data-component-part]),
|
|
#content a h3:not([data-component-part]) {
|
|
margin: 0;
|
|
}
|
|
|
|
#content h4:not([data-component-part]) {
|
|
color: var(--sm-text-strong);
|
|
}
|
|
|
|
#content h2:not([data-component-part]) {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
letter-spacing: -0.025em;
|
|
margin-top: 2.25rem;
|
|
margin-bottom: 1.125rem;
|
|
}
|
|
|
|
#content h3:not([data-component-part]) {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
letter-spacing: -0.025em;
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.875rem;
|
|
}
|
|
|
|
#content h4:not([data-component-part]) {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.625rem;
|
|
letter-spacing: -0.015em;
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
|
|
/* ---- Emphasis: one job per treatment ----
|
|
Links: blue at reading weight, a faint underline that firms up on hover.
|
|
Bold: ink, reserved for the phrase that matters. Code: a quiet pill.
|
|
Links never look like bold, so a sentence can carry both without shouting. */
|
|
#content a.link:not(.mint-group):not(.card):not(.sm-card),
|
|
#header .prose a.link {
|
|
font-weight: inherit !important;
|
|
color: var(--sm-accent-text) !important;
|
|
border-bottom: 0 !important;
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 0.2em;
|
|
text-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--sm-accent-text) 30%,
|
|
transparent
|
|
);
|
|
transition:
|
|
text-decoration-color var(--sm-dur-fast) var(--sm-ease-out),
|
|
color var(--sm-dur-fast) var(--sm-ease-out);
|
|
}
|
|
|
|
#content a.link:not(.mint-group):not(.card):not(.sm-card):hover,
|
|
#header .prose a.link:hover {
|
|
color: var(--sm-accent-text-hover) !important;
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
/* A link that wraps bold or code keeps the link colour, not ink */
|
|
#content a.link:not(.mint-group):not(.card):not(.sm-card) strong,
|
|
#content a.link:not(.mint-group):not(.card):not(.sm-card) code {
|
|
color: inherit !important;
|
|
}
|
|
|
|
#content :not(pre) > code {
|
|
font-size: 0.875em !important;
|
|
font-weight: 400 !important;
|
|
padding: 0.1em 0.35em !important;
|
|
border-radius: var(--sm-radius-sm) !important;
|
|
background: var(--sm-bg-3) !important;
|
|
color: var(--sm-text-strong) !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.dark #content :not(pre) > code {
|
|
background: rgba(255, 255, 255, 0.06) !important;
|
|
}
|
|
|
|
#content strong {
|
|
color: var(--sm-text-strong);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* The page outline lists h2 and h3 only; deeper headings stay in the body */
|
|
#table-of-contents-content .toc-item[data-depth="2"],
|
|
#table-of-contents-content .toc-item[data-depth="3"] {
|
|
display: none;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: var(--sm-font-mono) !important;
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, var(--sm-text) 16%, transparent);
|
|
color: var(--sm-text-strong);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--sm-text);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Sidebar group labels, the breadcrumb above the title and the TOC title are plain
|
|
sentence-case labels in the UI face, not mono eyebrows */
|
|
#sidebar-content .sidebar-group-header,
|
|
#sidebar-content .sidebar-group-header .sidebar-title,
|
|
#header .breadcrumb-list {
|
|
font-family: var(--sm-font-sans) !important;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.005em;
|
|
text-transform: none;
|
|
font-weight: 500 !important;
|
|
color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
#header .breadcrumb-list .breadcrumb-item {
|
|
color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
#header .breadcrumb-list .breadcrumb-item:last-child {
|
|
color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
#table-of-contents h2 button {
|
|
font-family: var(--sm-font-sans) !important;
|
|
font-size: 0.875rem;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-weight: 400 !important;
|
|
color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
/* Outline, after docs.privy.io: no rail and no accent. Sections sit flush left in
|
|
the secondary tone, subsections indent 16px and step down a weight, and the
|
|
section you are reading turns ink. */
|
|
#table-of-contents-content .toc-item,
|
|
#table-of-contents-content .toc-item > a {
|
|
border-left: 0 !important;
|
|
margin-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
#table-of-contents-content .toc-item[data-depth="0"] > a {
|
|
color: var(--sm-text-2) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#table-of-contents-content .toc-item[data-depth="1"] > a {
|
|
padding-left: 16px !important;
|
|
color: var(--sm-text-2) !important;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#table-of-contents-content .toc-item[data-active="true"] > a {
|
|
color: var(--sm-text-strong) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---- Radius: controls 8, rows and cards 10, nothing is a pill ---- */
|
|
|
|
#search-bar-entry,
|
|
#search-bar-entry-mobile,
|
|
#assistant-entry,
|
|
#assistant-entry-mobile,
|
|
li.navbar-link a,
|
|
#topbar-cta-button [class*="rounded"],
|
|
#theme-preference-menu-trigger,
|
|
.chat-assistant-floating-input [class*="rounded"] {
|
|
border-radius: var(--sm-radius-md) !important;
|
|
}
|
|
|
|
#page-context-menu-button {
|
|
border-top-left-radius: var(--sm-radius-md) !important;
|
|
border-bottom-left-radius: var(--sm-radius-md) !important;
|
|
}
|
|
|
|
#page-context-menu [class*="rounded-r"] {
|
|
border-top-right-radius: var(--sm-radius-md) !important;
|
|
border-bottom-right-radius: var(--sm-radius-md) !important;
|
|
}
|
|
|
|
#navigation-items li > a,
|
|
#navigation-items a[class*="rounded-xl"],
|
|
#content .card,
|
|
#content [class*="rounded-2xl"] {
|
|
border-radius: var(--sm-radius-lg) !important;
|
|
}
|
|
|
|
/* Blue belongs to links only. The current page is a quiet neutral fill with ink text,
|
|
like docs.privy.io; every other selected state in the chrome is black and white too. */
|
|
#navigation-items li > a {
|
|
transition:
|
|
color var(--sm-dur-fast) var(--sm-ease-out),
|
|
background-color var(--sm-dur-fast) var(--sm-ease-out);
|
|
}
|
|
|
|
#navigation-items a[class*="bg-primary"] {
|
|
background-image: none !important;
|
|
background-color: var(--sm-sidebar-active-fill) !important;
|
|
box-shadow: var(--sm-shadow-sidebar-active);
|
|
color: var(--sm-text-strong) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Dashboard button: ink on white in light mode, and the inverse in dark mode, so it
|
|
never becomes navy on black */
|
|
.dark #topbar-cta-button a > span.absolute {
|
|
background-color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
.dark #topbar-cta-button a .text-white,
|
|
.dark #topbar-cta-button a svg {
|
|
color: var(--sm-bg) !important;
|
|
}
|
|
|
|
/* The assistant's send button is painted with the primary (ink), which would vanish
|
|
on the dark page; invert it in dark mode like the Dashboard button */
|
|
.dark .chat-assistant-send-button {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--sm-text-strong) 30%,
|
|
transparent
|
|
) !important;
|
|
color: var(--sm-bg) !important;
|
|
}
|
|
|
|
.dark .chat-assistant-send-button svg {
|
|
color: var(--sm-bg) !important;
|
|
}
|
|
|
|
/* HTTP method badges: one neutral pill instead of a blue/green/orange/red code */
|
|
[class*="bg-blue-400/20"],
|
|
[class*="bg-green-400/20"],
|
|
[class*="bg-orange-400/20"],
|
|
[class*="bg-red-400/20"],
|
|
[class*="bg-yellow-400/20"],
|
|
[class*="bg-purple-400/20"] {
|
|
background-color: var(--sm-bg-3) !important;
|
|
color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
/* Code blocks sit on the band colour with one hairline, like every console panel.
|
|
A standalone block is a single r10 surface. A group is an r10 frame with 2px of
|
|
padding around an r8 panel (concentric), with the tabs on the frame. */
|
|
#content .code-block,
|
|
#content .code-group,
|
|
.sm-home-sample .code-group {
|
|
border-color: var(--sm-border) !important;
|
|
border-radius: var(--sm-radius-lg) !important;
|
|
background: var(--sm-bg-2) !important;
|
|
}
|
|
|
|
#content .code-block > .code-block-background {
|
|
border: 0 !important;
|
|
border-radius: calc(var(--sm-radius-lg) - 1px) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Mintlify sets the panel radius with a layered !important through --rounded-xl,
|
|
which beats any unlayered rule, so set the variable instead */
|
|
#content .code-group,
|
|
.sm-home-sample .code-group {
|
|
--rounded-xl: var(--sm-radius-md);
|
|
}
|
|
|
|
#content .code-group .code-block-background,
|
|
.sm-home-sample .code-group .code-block-background {
|
|
border: 1px solid var(--sm-border) !important;
|
|
border-radius: var(--sm-radius-md) !important;
|
|
background: var(--sm-bg-2) !important;
|
|
}
|
|
|
|
/* The copy button's fade has to melt into the panel, not into white */
|
|
#content .code-block-fade-overlay,
|
|
.sm-home-sample .code-block-fade-overlay {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
transparent 0,
|
|
var(--sm-bg-2) 40px
|
|
) !important;
|
|
}
|
|
|
|
/* Card titles are h2s inside the card. Without this they pick up the 22px
|
|
section size and outrank the headings around them. */
|
|
#content .card [data-component-part="card-title"] {
|
|
font-size: 1rem !important;
|
|
line-height: 1.5 !important;
|
|
letter-spacing: -0.005em;
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
#content .card [data-component-part="card-content"],
|
|
#content .card .prose {
|
|
font-size: 0.9375rem !important;
|
|
line-height: 1.6 !important;
|
|
color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
/* Feature tiles (logo + label links) match the card surface */
|
|
#content a.link.mint-group {
|
|
border-radius: var(--sm-radius-lg) !important;
|
|
border-color: var(--sm-border) !important;
|
|
box-shadow: none !important;
|
|
transition: border-color var(--sm-dur-fast) var(--sm-ease-out) !important;
|
|
}
|
|
|
|
#content a.link.mint-group:hover {
|
|
border-color: var(--sm-border-hover) !important;
|
|
}
|
|
|
|
/* Screenshots and diagrams: card radius and a neutral hairline edge */
|
|
#content img.rounded,
|
|
#content img[class*="rounded-lg"] {
|
|
border-radius: var(--sm-radius-lg) !important;
|
|
outline: 1px solid rgba(0, 0, 0, 0.08);
|
|
outline-offset: -1px;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.dark #content img.rounded,
|
|
.dark #content img[class*="rounded-lg"] {
|
|
outline-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Callouts: notes and info are neutral (blue is for links only); tip, warning and
|
|
danger keep a faint tint of their status colour, with only the icon in colour */
|
|
#content .callout {
|
|
--sm-callout: var(--sm-text-2);
|
|
background: color-mix(in srgb, var(--sm-callout) 5%, var(--sm-bg)) !important;
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--sm-callout) 20%,
|
|
var(--sm-bg)
|
|
) !important;
|
|
border-radius: var(--sm-radius-lg) !important;
|
|
}
|
|
|
|
#content .callout[data-callout-type="tip"],
|
|
#content .callout[data-callout-type="check"] {
|
|
--sm-callout: var(--sm-success);
|
|
}
|
|
|
|
#content .callout[data-callout-type="warning"] {
|
|
--sm-callout: var(--sm-warning);
|
|
}
|
|
|
|
#content .callout[data-callout-type="danger"] {
|
|
--sm-callout: var(--sm-error);
|
|
}
|
|
|
|
#content .callout[data-callout-type="info"] {
|
|
background: var(--sm-bg-2) !important;
|
|
border-color: var(--sm-border) !important;
|
|
}
|
|
|
|
.dark #content .callout {
|
|
background: color-mix(in srgb, var(--sm-callout) 8%, var(--sm-bg)) !important;
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--sm-callout) 24%,
|
|
var(--sm-bg)
|
|
) !important;
|
|
}
|
|
|
|
.dark #content .callout[data-callout-type="info"] {
|
|
background: var(--sm-bg-2) !important;
|
|
border-color: var(--sm-border) !important;
|
|
}
|
|
|
|
#content .callout [data-component-part="callout-content"] {
|
|
color: var(--sm-text-body) !important;
|
|
}
|
|
|
|
#content .callout [data-component-part="callout-content"] strong {
|
|
color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
#content .callout [data-component-part="callout-icon"],
|
|
#content .callout [data-component-part="callout-icon"] svg {
|
|
color: var(--sm-callout) !important;
|
|
}
|
|
|
|
#content
|
|
.callout[data-callout-type="info"]
|
|
[data-component-part="callout-icon"],
|
|
#content
|
|
.callout[data-callout-type="info"]
|
|
[data-component-part="callout-icon"]
|
|
svg {
|
|
color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
/* API reference pages render outside #content, so they get the same text roles here:
|
|
section headings in ink at the h3 step, parameter prose in the body tone, links and
|
|
inline code on the shared emphasis rules. Parameter text stays a step smaller (15px). */
|
|
.api-section-heading-title {
|
|
font-size: 1.25rem !important;
|
|
line-height: 1.75rem !important;
|
|
letter-spacing: -0.025em;
|
|
color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
.api-section .prose,
|
|
.api-section .prose p {
|
|
font-size: 0.9375rem !important;
|
|
line-height: 1.6rem !important;
|
|
color: var(--sm-text-body) !important;
|
|
hyphens: manual !important;
|
|
}
|
|
|
|
.api-section .prose a {
|
|
font-weight: inherit !important;
|
|
color: var(--sm-accent-text) !important;
|
|
border-bottom: 0 !important;
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 0.2em;
|
|
text-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--sm-accent-text) 30%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.api-section .prose a:hover {
|
|
color: var(--sm-accent-text-hover) !important;
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.api-section .prose :not(pre) > code {
|
|
font-size: 0.875em !important;
|
|
font-weight: 400 !important;
|
|
padding: 0.1em 0.35em !important;
|
|
border-radius: var(--sm-radius-sm) !important;
|
|
background: var(--sm-bg-3) !important;
|
|
color: var(--sm-text-strong) !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.dark .api-section .prose :not(pre) > code {
|
|
background: rgba(255, 255, 255, 0.06) !important;
|
|
}
|
|
|
|
/* ---- Interaction layer ----
|
|
Every control answers the pointer the same way: colour, fill and border ease over
|
|
150ms on the console's ease-out, buttons dip to 0.96 on press (100ms), and every
|
|
clickable surface (cards, tiles, pager) takes the same neutral hover border.
|
|
Nothing animates layout, and nothing moves for reduced-motion users. */
|
|
#search-bar-entry,
|
|
#assistant-entry,
|
|
li.navbar-link a,
|
|
#topbar-cta-button a,
|
|
#topbar-cta-button a > span,
|
|
#theme-preference-menu-trigger,
|
|
#page-context-menu-button,
|
|
#page-context-menu button,
|
|
.code-block-copy-button button,
|
|
[data-component-part="tab-button"],
|
|
.code-group [role="tab"],
|
|
a.nav-tabs-item,
|
|
a.nav-tabs-item > div,
|
|
#navigation-items li > a,
|
|
#table-of-contents-content a,
|
|
#pagination a,
|
|
#content .card,
|
|
#content details > summary,
|
|
#content [data-component-part="accordion-button"] {
|
|
transition-property:
|
|
color, background-color, border-color, opacity, transform;
|
|
transition-duration:
|
|
var(--sm-dur-hover), var(--sm-dur-hover), var(--sm-dur-hover),
|
|
var(--sm-dur-hover), var(--sm-dur-press);
|
|
transition-timing-function: var(--sm-ease-out);
|
|
}
|
|
|
|
/* Hover: rows and quiet controls fill with the control-hover step, text moves to ink */
|
|
#navigation-items li > a:not([class*="bg-primary"]):hover,
|
|
#theme-preference-menu-trigger:hover,
|
|
.code-block-copy-button button:hover {
|
|
background-color: var(--sm-control-hover) !important;
|
|
color: var(--sm-text) !important;
|
|
}
|
|
|
|
#table-of-contents-content .toc-item:not([data-active="true"]) > a:hover,
|
|
[data-component-part="tab-button"]:not([data-active="true"]):hover,
|
|
.code-group [role="tab"]:not([aria-selected="true"]):hover {
|
|
color: var(--sm-text) !important;
|
|
}
|
|
|
|
#content details > summary:hover,
|
|
#content [data-component-part="accordion-button"]:hover {
|
|
background-color: var(--sm-control-hover) !important;
|
|
}
|
|
|
|
/* Clickable surfaces share one hover: a slightly stronger neutral hairline */
|
|
#content .card:hover,
|
|
#pagination a:hover {
|
|
border-color: var(--sm-border-hover) !important;
|
|
}
|
|
|
|
/* Mintlify paints the card hover border with a layered !important rgb(var(--primary)),
|
|
which no unlayered rule can beat. Point --primary at the hover grey on the card only,
|
|
and hand the real brand triplets back to everything inside it (icons, links). */
|
|
#content {
|
|
--sm-primary-keep: var(--primary);
|
|
--sm-primary-light-keep: var(--primary-light);
|
|
}
|
|
|
|
#content .card:hover {
|
|
--primary: 220 220 220;
|
|
--primary-light: 45 45 45;
|
|
}
|
|
|
|
#content .card:hover > * {
|
|
--primary: var(--sm-primary-keep);
|
|
--primary-light: var(--sm-primary-light-keep);
|
|
}
|
|
|
|
/* Press: buttons dip, large surfaces and text links do not */
|
|
#search-bar-entry:active,
|
|
#assistant-entry:active,
|
|
#topbar-cta-button a:active,
|
|
#theme-preference-menu-trigger:active,
|
|
#page-context-menu-button:active,
|
|
.code-block-copy-button button:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sm-home-btn,
|
|
.sm-card-title svg,
|
|
#search-bar-entry,
|
|
#assistant-entry,
|
|
#topbar-cta-button a,
|
|
#theme-preference-menu-trigger,
|
|
#page-context-menu-button,
|
|
.code-block-copy-button button {
|
|
transition-property:
|
|
color, background-color, border-color, opacity !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* Existing dark-mode logo inversions */
|
|
.dark img[src*="openai.svg"],
|
|
.dark img[src*="pipecat.svg"],
|
|
.dark img[src*="eve.svg"],
|
|
.dark img[src*="supermemory.svg"] {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.dark img[src*="opencode-logo.svg"] {
|
|
content: url("/images/opencode-logo-dark.svg");
|
|
}
|
|
|
|
.eve-memory-video {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Landing page (index.mdx, mode: custom)
|
|
------------------------------------------------------------------ */
|
|
|
|
/* Modelled on docs.privy.io: a two-column hero (title, lede, link chips | code
|
|
sample), then labelled sections of cards. Images keep their own shape. */
|
|
.sm-home {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 56px 24px 96px;
|
|
font-family: var(--sm-font-sans);
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-home-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 64px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sm-home-title {
|
|
margin: 0;
|
|
font-family: var(--sm-font-sans) !important;
|
|
font-size: 48px;
|
|
font-weight: 500 !important;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.025em;
|
|
color: var(--sm-text);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.sm-home-lede {
|
|
max-width: 480px;
|
|
margin: 20px 0 0;
|
|
font-size: 17px;
|
|
line-height: 1.55;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-home-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.sm-home-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border-radius: var(--sm-radius-md);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-decoration: none !important;
|
|
transition-property: background-color, border-color, color, transform;
|
|
transition-duration:
|
|
var(--sm-dur-hover), var(--sm-dur-hover), var(--sm-dur-hover),
|
|
var(--sm-dur-press);
|
|
transition-timing-function: var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-home-btn:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
/* The overview's one call to action keeps the accent; the rest of the chrome is black and white */
|
|
.sm-home-btn-primary {
|
|
background: var(--sm-accent);
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.sm-home-btn-primary:hover {
|
|
background: var(--sm-accent-hover);
|
|
}
|
|
|
|
.sm-home-btn-secondary {
|
|
border: 1px solid var(--sm-border);
|
|
background: var(--sm-control);
|
|
box-shadow: var(--sm-shadow-sm);
|
|
color: var(--sm-text) !important;
|
|
}
|
|
|
|
.sm-home-btn-secondary:hover {
|
|
border-color: var(--sm-border-hover);
|
|
background: var(--sm-control-hover);
|
|
}
|
|
|
|
.sm-home-sample {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sm-home-sample > div {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.sm-home-hero-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
/* Two-tone headline: what it is in ink, who it's for in grey. Each half holds one
|
|
line on desktop, so the size follows the column (6.9cqi ≈ one line of the longer
|
|
half) up to 40px. The grey sits between text-2 and text-3 to keep ~3.8:1. */
|
|
.sm-home-title-split > span {
|
|
display: block;
|
|
}
|
|
|
|
.sm-home-title-muted {
|
|
color: color-mix(in srgb, var(--sm-text-2) 60%, var(--sm-text-3));
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
.sm-home-title-split {
|
|
font-size: min(40px, 6.9cqi);
|
|
}
|
|
|
|
.sm-home-hero-copy .sm-home-lede {
|
|
text-wrap: pretty;
|
|
}
|
|
}
|
|
|
|
.sm-home-btn-primary {
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* "Or add memory to" row: quiet caption under the actions, marks in ink with names */
|
|
.sm-works {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px 16px;
|
|
margin: 24px 0 0 !important;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-works-label {
|
|
color: var(--sm-text-3);
|
|
}
|
|
|
|
.sm-works-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--sm-text-2) !important;
|
|
text-decoration: none !important;
|
|
transition: color var(--sm-dur-hover) var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-works-item:hover {
|
|
color: var(--sm-text) !important;
|
|
}
|
|
|
|
.sm-works-item svg {
|
|
width: auto;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Setup prompt: built like a docs code group (band frame, tab header, r8 inner
|
|
panel) so the hero reads as documentation, not console chrome. */
|
|
.sm-prompt-panel {
|
|
min-width: 0;
|
|
border: 1px solid var(--sm-border);
|
|
border-radius: var(--sm-radius-lg);
|
|
background: var(--sm-bg-2);
|
|
padding: 0 2px 2px;
|
|
}
|
|
|
|
.sm-prompt-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 6px 0 12px;
|
|
}
|
|
|
|
.sm-prompt-tabs {
|
|
display: flex;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Same tab treatment as the docs code groups: ink + underline when selected */
|
|
.sm-prompt-tab {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-bottom: 1.5px solid transparent;
|
|
background: transparent;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--sm-text-2);
|
|
cursor: pointer;
|
|
transition: color var(--sm-dur-hover) var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-prompt-tab:hover {
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-prompt-tab[aria-selected="true"] {
|
|
border-bottom-color: var(--sm-text);
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-prompt-string {
|
|
color: var(--sm-accent-text);
|
|
}
|
|
|
|
/* Code reads at the docs' code size and in ink, not the prompt's softer grey */
|
|
.sm-prompt-code {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-prompt-copy-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 0;
|
|
border-radius: var(--sm-radius-sm);
|
|
background: transparent;
|
|
color: var(--sm-text-3);
|
|
cursor: pointer;
|
|
transition-property: background-color, color, transform;
|
|
transition-duration:
|
|
var(--sm-dur-hover), var(--sm-dur-hover), var(--sm-dur-press);
|
|
transition-timing-function: var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-prompt-copy-icon:hover {
|
|
background: var(--sm-control-hover);
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-prompt-copy-icon:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.sm-prompt-body {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--sm-border);
|
|
border-radius: var(--sm-radius-md);
|
|
background: var(--sm-surface);
|
|
}
|
|
|
|
.sm-prompt-scroll {
|
|
height: 360px;
|
|
margin: 0 !important;
|
|
padding: 14px 18px 28px !important;
|
|
overflow-y: auto;
|
|
background: transparent !important;
|
|
font-family: var(
|
|
--sm-font-mono,
|
|
ui-monospace,
|
|
SFMono-Regular,
|
|
Menlo,
|
|
monospace
|
|
);
|
|
font-size: 12.5px;
|
|
line-height: 20px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-prompt-line {
|
|
display: block;
|
|
}
|
|
|
|
.sm-prompt-muted {
|
|
color: var(--sm-text-3);
|
|
}
|
|
|
|
.sm-prompt-heading {
|
|
font-weight: 500;
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.sm-prompt-endpoint {
|
|
font-weight: 500;
|
|
color: var(--sm-accent-text);
|
|
}
|
|
|
|
.sm-prompt-fade {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 40px;
|
|
background: linear-gradient(to top, var(--sm-surface), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sm-home-section {
|
|
margin-top: 112px;
|
|
}
|
|
|
|
.sm-home-label {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-home-heading {
|
|
margin: 8px 0 0 !important;
|
|
font-family: var(--sm-font-sans) !important;
|
|
font-size: 34px !important;
|
|
font-weight: 500 !important;
|
|
line-height: 1.2 !important;
|
|
letter-spacing: -0.03em !important;
|
|
color: var(--sm-text-strong) !important;
|
|
}
|
|
|
|
.sm-home-sub {
|
|
margin: 12px 0 0;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-home-grid {
|
|
display: grid;
|
|
gap: 24px;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.sm-home-grid-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm-home-grid-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm-home-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid var(--sm-border);
|
|
border-radius: var(--sm-radius-lg);
|
|
background: var(--sm-surface);
|
|
}
|
|
|
|
.sm-home-card-media {
|
|
display: block;
|
|
border-bottom: 1px solid var(--sm-border) !important;
|
|
}
|
|
|
|
.sm-home-card-media img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.sm-home-card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 24px;
|
|
}
|
|
|
|
.sm-home-card-title {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
letter-spacing: -0.02em;
|
|
color: var(--sm-text-strong) !important;
|
|
text-decoration: none !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.sm-home-card-desc {
|
|
margin: 8px 0 0;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: var(--sm-text-2);
|
|
}
|
|
|
|
.sm-home-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sm-home-list-card .sm-home-links {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 16px;
|
|
}
|
|
|
|
.sm-home-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 36px;
|
|
margin: 0 -8px;
|
|
padding: 0 8px;
|
|
border: 0 !important;
|
|
border-radius: var(--sm-radius-md);
|
|
color: var(--sm-text) !important;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
text-decoration: none !important;
|
|
transition: background-color var(--sm-dur-hover) var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-home-link:hover {
|
|
background: var(--sm-control-hover);
|
|
}
|
|
|
|
.sm-home-link-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--sm-radius-sm);
|
|
background: var(--sm-bg-3);
|
|
}
|
|
|
|
.sm-home-link-icon svg.icon,
|
|
.sm-home-link-icon img[src^="/icons/hugeicons/"] {
|
|
background-color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
.sm-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--sm-border);
|
|
border-radius: var(--sm-radius-lg);
|
|
background: var(--sm-surface);
|
|
overflow: hidden;
|
|
color: var(--sm-text) !important;
|
|
text-decoration: none !important;
|
|
transition: border-color var(--sm-dur-fast) var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-card:hover {
|
|
border-color: var(--sm-border-hover);
|
|
}
|
|
|
|
.sm-card-media {
|
|
height: clamp(84px, 14vh, 140px);
|
|
border-bottom: 1px solid var(--sm-border);
|
|
overflow: hidden;
|
|
background: var(--sm-bg-2);
|
|
}
|
|
|
|
.sm-card-media {
|
|
position: relative;
|
|
}
|
|
|
|
.sm-card-media::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.sm-card-media img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.sm-card-body {
|
|
padding: 14px 16px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sm-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.sm-card-title svg {
|
|
color: var(--sm-text-3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sm-card-title svg {
|
|
transition:
|
|
color var(--sm-dur-hover) var(--sm-ease-out),
|
|
transform var(--sm-dur-fast) var(--sm-ease-out);
|
|
}
|
|
|
|
.sm-card:hover .sm-card-title svg {
|
|
color: var(--sm-text);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.sm-card-desc {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--sm-text-2);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Art tiles: a film photograph (the console's plan art) with a small real
|
|
fragment of the product on top that states exactly what the block does.
|
|
The photo stays the same in both themes; the fragment follows the theme. */
|
|
.sm-art-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.sm-art-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
/* Mintlify gives every content anchor a primary underline border; tiles keep the card hairline. */
|
|
#content a.sm-card {
|
|
border-color: var(--sm-border) !important;
|
|
}
|
|
|
|
#content a.sm-card:hover {
|
|
border-color: var(--sm-border-hover) !important;
|
|
}
|
|
|
|
.sm-card-media.sm-art-media {
|
|
height: auto;
|
|
aspect-ratio: 2 / 1;
|
|
}
|
|
|
|
/* The photo is blurred into a soft colour field and washed light in the
|
|
centre, so the objects carry all the detail. */
|
|
.sm-art-media > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
filter: blur(14px) saturate(1.05);
|
|
transform: scale(1.2) scaleX(var(--flip, 1));
|
|
}
|
|
|
|
.sm-art-wash {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(
|
|
ellipse 75% 70% at 50% 50%,
|
|
rgba(255, 255, 255, 0.5),
|
|
rgba(255, 255, 255, 0.12) 75%
|
|
);
|
|
}
|
|
|
|
.dark .sm-art-wash {
|
|
background: radial-gradient(
|
|
ellipse 75% 70% at 50% 50%,
|
|
rgba(10, 10, 10, 0.42),
|
|
rgba(10, 10, 10, 0.1) 75%
|
|
);
|
|
}
|
|
|
|
/* Scenes: a fixed 264x152 stage centred on the photo; objects are placed by
|
|
inline left/top, lines are an SVG in the same coordinates.
|
|
Material, after the reference bento cards: an opaque top-lit surface, a
|
|
hairline ring, a white inner highlight and wide, faint shadows. Secondary
|
|
objects recede to a flatter, lighter fill with muted content, never to
|
|
transparency, so the photo never shows through a surface. */
|
|
.sm-scene {
|
|
--m-surface: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
|
|
--m-surface-2: linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 100%);
|
|
--m-ring: rgba(9, 17, 32, 0.06);
|
|
--m-highlight: inset 0 1px 0 #ffffff;
|
|
--m-shadow:
|
|
0 1px 2px rgba(9, 17, 32, 0.05), 0 6px 16px -6px rgba(9, 17, 32, 0.12),
|
|
0 22px 40px -18px rgba(9, 17, 32, 0.2);
|
|
--m-shadow-2:
|
|
0 1px 2px rgba(9, 17, 32, 0.04), 0 8px 18px -10px rgba(9, 17, 32, 0.12);
|
|
--m-well: #eef1f5;
|
|
--m-fg-muted: 0.5;
|
|
--m-accent-fill: linear-gradient(
|
|
180deg,
|
|
#58a0ff 0%,
|
|
#2a7ef7 55%,
|
|
#1c6ae0 100%
|
|
);
|
|
--m-accent-glow: 0 6px 16px -6px rgba(28, 106, 224, 0.55);
|
|
--m-focus-ring:
|
|
0 0 0 1px rgba(47, 134, 255, 0.55), 0 0 0 4px rgba(47, 134, 255, 0.14);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 264px;
|
|
height: 152px;
|
|
transform: translate(-50%, -50%) scale(0.84);
|
|
font-size: 11.5px;
|
|
line-height: 16px;
|
|
letter-spacing: -0.005em;
|
|
color: var(--sm-text);
|
|
}
|
|
|
|
.dark .sm-scene {
|
|
--m-surface: linear-gradient(180deg, #1c1c1c 0%, #161616 100%);
|
|
--m-surface-2: linear-gradient(180deg, #151515 0%, #121212 100%);
|
|
--m-ring: rgba(255, 255, 255, 0.08);
|
|
--m-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
--m-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -6px rgba(0, 0, 0, 0.45),
|
|
0 22px 40px -18px rgba(0, 0, 0, 0.6);
|
|
--m-shadow-2:
|
|
0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.45);
|
|
--m-well: #262626;
|
|
--m-focus-ring:
|
|
0 0 0 1px rgba(111, 168, 255, 0.6), 0 0 0 4px rgba(111, 168, 255, 0.14);
|
|
}
|
|
|
|
.sm-scene *,
|
|
.sm-scene *::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sm-scene > * {
|
|
position: absolute;
|
|
}
|
|
|
|
.sm-scene .m {
|
|
background: var(--m-surface);
|
|
box-shadow:
|
|
0 0 0 1px var(--m-ring),
|
|
var(--m-highlight),
|
|
var(--m-shadow);
|
|
}
|
|
|
|
.sm-scene .m.is-faded {
|
|
background: var(--m-surface-2);
|
|
box-shadow:
|
|
0 0 0 1px var(--m-ring),
|
|
var(--m-highlight),
|
|
var(--m-shadow-2);
|
|
}
|
|
|
|
.sm-scene .is-faded > * {
|
|
opacity: var(--m-fg-muted);
|
|
}
|
|
|
|
.sm-scene svg.m-lines {
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 0.01 4.5;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Cards, rows and chips */
|
|
.sm-scene .m-card {
|
|
border-radius: var(--sm-radius-lg);
|
|
}
|
|
|
|
.sm-scene .m-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 38px;
|
|
padding: 0 10px 0 8px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sm-scene .m-grow {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sm-scene .m-row s {
|
|
color: var(--sm-text-2);
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.sm-scene .m-ic {
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--sm-radius-sm);
|
|
background: var(--m-well);
|
|
}
|
|
|
|
.sm-scene .m-ic.is-on {
|
|
background: var(--m-accent-fill);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.28),
|
|
var(--m-accent-glow);
|
|
}
|
|
|
|
.sm-scene .m-tag,
|
|
.sm-scene .m-score {
|
|
flex-shrink: 0;
|
|
height: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 5px;
|
|
background: var(--sm-tint);
|
|
box-shadow: inset 0 0 0 1px var(--sm-tint-stroke);
|
|
color: var(--sm-accent-text);
|
|
font-size: 10.5px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.sm-scene .m-score {
|
|
font-family: var(--sm-font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.sm-scene .is-front {
|
|
z-index: 2;
|
|
}
|
|
|
|
.sm-scene .m-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 28px;
|
|
padding: 0 10px 0 8px;
|
|
border-radius: var(--sm-radius-md);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sm-scene .m-search {
|
|
gap: 8px;
|
|
padding: 0 12px;
|
|
color: var(--sm-text-2);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.sm-scene .m-ghost {
|
|
height: 38px;
|
|
}
|
|
|
|
.sm-scene .m-skel {
|
|
display: block;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
background: var(--m-well);
|
|
}
|
|
|
|
.sm-scene .m-skel + .m-skel {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Filesystems: the container mounted as a folder. A back panel with a tab,
|
|
a lighter front panel carrying the mark, both in the brand gradient. */
|
|
.sm-scene .m-folder {
|
|
width: 84px;
|
|
height: 70px;
|
|
border-radius: 4px 12px 12px 12px;
|
|
background: linear-gradient(180deg, #3b8cff 0%, #1f6fe6 100%);
|
|
box-shadow:
|
|
0 14px 28px -12px rgba(28, 106, 224, 0.6),
|
|
0 2px 4px rgba(28, 106, 224, 0.2);
|
|
}
|
|
|
|
.sm-scene .m-folder::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: -8px;
|
|
width: 34px;
|
|
height: 11px;
|
|
border-radius: 6px 8px 0 0;
|
|
background: #3b8cff;
|
|
}
|
|
|
|
.sm-scene .m-folder-front {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 58px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 10px 10px 12px 12px;
|
|
background: linear-gradient(180deg, #74b2ff 0%, #3d8fff 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.45),
|
|
0 -1px 3px rgba(9, 30, 90, 0.12);
|
|
}
|
|
|
|
.sm-scene .m-folder-front img {
|
|
width: 23px;
|
|
height: auto;
|
|
margin: 0;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.sm-scene .m-files {
|
|
padding: 4px;
|
|
}
|
|
|
|
.sm-scene .m-file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
border-radius: var(--sm-radius-sm);
|
|
color: var(--sm-text-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sm-scene .m-file svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sm-scene .m-file.is-on {
|
|
background: var(--sm-tint);
|
|
box-shadow: inset 0 0 0 1px var(--sm-tint-stroke);
|
|
color: var(--sm-accent-text);
|
|
}
|
|
|
|
/* Tiles and badges. App icons are shown as the icon itself, clipped to the
|
|
tile, the way the references show them. */
|
|
.sm-scene .m-tile {
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--sm-radius-lg);
|
|
}
|
|
|
|
.sm-scene .m-tile img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sm-scene .m-tile.is-app img {
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* Brand glyphs sit on a white tile in both themes, inset like the
|
|
reference icon tiles, so marks never touch the edge. */
|
|
.sm-scene .m-tile.is-logo {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
|
|
box-shadow:
|
|
0 0 0 1px rgba(9, 17, 32, 0.07),
|
|
inset 0 1px 0 #ffffff,
|
|
var(--m-shadow);
|
|
}
|
|
|
|
.sm-scene .m-tile.is-logo.is-on {
|
|
box-shadow:
|
|
0 0 0 1px rgba(47, 134, 255, 0.55),
|
|
0 0 0 4px rgba(47, 134, 255, 0.14),
|
|
var(--m-shadow);
|
|
}
|
|
|
|
.sm-scene .m-tile.is-on {
|
|
box-shadow: var(--m-focus-ring), var(--m-shadow);
|
|
}
|
|
|
|
.sm-scene .m-badge {
|
|
position: absolute;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--m-accent-fill);
|
|
box-shadow:
|
|
0 0 0 2px var(--sm-bg),
|
|
0 2px 4px rgba(9, 17, 32, 0.18);
|
|
}
|
|
|
|
/* The Supermemory hub: a gradient square with a spaced, concentric halo ring and a soft
|
|
coloured glow beneath, no dark inner shading. */
|
|
.sm-scene .m-orb {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: var(--sm-radius-xl);
|
|
background: var(--m-accent-fill);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 12px 24px -8px rgba(28, 106, 224, 0.6),
|
|
0 2px 4px rgba(28, 106, 224, 0.2);
|
|
}
|
|
|
|
.sm-scene .m-orb::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -7px;
|
|
border-radius: calc(var(--sm-radius-xl) + 7px);
|
|
background: rgba(255, 255, 255, 0.22);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
|
|
z-index: -1;
|
|
}
|
|
|
|
.dark .sm-scene .m-orb::before {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
|
|
}
|
|
|
|
.sm-scene .m-orb img {
|
|
width: 24px;
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Profile card: the avatar breaks out of the top edge, like the reference
|
|
profile cards; each fact row says whether it is static or dynamic. */
|
|
.sm-scene .m-profile {
|
|
padding: 0 12px 6px;
|
|
}
|
|
|
|
.sm-scene .m-profile-head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
box-shadow: inset 0 -1px 0 var(--m-ring);
|
|
}
|
|
|
|
.sm-scene .m-profile-head .m-grow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.sm-scene .m-profile-head b {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.sm-scene .m-profile-head .m-grow > span {
|
|
color: var(--sm-text-2);
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.sm-scene .m-avatar {
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
align-self: flex-start;
|
|
margin-top: -24px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, #eaf2ff 0%, #cfe0ff 100%);
|
|
box-shadow:
|
|
0 0 0 3px #ffffff,
|
|
0 0 0 4px var(--m-ring),
|
|
0 6px 14px -4px rgba(28, 106, 224, 0.35);
|
|
color: var(--sm-accent-text);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.sm-scene .m-avatar img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.dark .sm-scene .m-avatar {
|
|
background: linear-gradient(180deg, #1d2d4a 0%, #142240 100%);
|
|
box-shadow:
|
|
0 0 0 3px #1c1c1c,
|
|
0 0 0 4px var(--m-ring),
|
|
0 6px 14px -4px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.sm-scene .m-fact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 30px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sm-scene .m-fact + .m-fact {
|
|
box-shadow: inset 0 1px 0 var(--m-ring);
|
|
}
|
|
|
|
.sm-scene .m-fact .m-ic {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.sm-scene .m-fact-kind {
|
|
flex-shrink: 0;
|
|
color: var(--sm-text-3);
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
/* Extractors */
|
|
.sm-scene .m-pdf {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 64px;
|
|
height: 80px;
|
|
}
|
|
|
|
.sm-scene .m-pdf-tag {
|
|
position: absolute;
|
|
left: -6px;
|
|
bottom: 12px;
|
|
height: 16px;
|
|
padding: 0 5px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(180deg, #ef5b5b 0%, #d23a3a 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
0 3px 8px -2px rgba(210, 58, 58, 0.5);
|
|
color: #ffffff;
|
|
font-size: 9.5px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.sm-scene .m-chunk {
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sm-scene .m-chunk .m-skel {
|
|
flex: none;
|
|
}
|
|
|
|
.sm-scene .m-chunk.is-on {
|
|
box-shadow: var(--m-focus-ring), var(--m-highlight), var(--m-shadow);
|
|
}
|
|
|
|
.sm-scene .m-chunk.is-on .m-skel {
|
|
background: rgba(47, 134, 255, 0.3);
|
|
}
|
|
|
|
/* Leaderboard */
|
|
.sm-scene .m-board {
|
|
padding: 0 12px 4px;
|
|
}
|
|
|
|
.sm-scene .m-board-head {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: var(--sm-text-2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sm-scene .m-board-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 34px;
|
|
box-shadow: inset 0 1px 0 var(--m-ring);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sm-scene .m-board-row.is-faded > * {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.sm-scene .m-board-row > :last-child:not(.m-grow) {
|
|
color: var(--sm-accent-text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Mintlify icons are masks filled with the accent: neutral objects take the
|
|
secondary ink, filled accent objects take white. */
|
|
.sm-scene svg.icon,
|
|
.sm-scene img[src^="/icons/hugeicons/"] {
|
|
background-color: var(--sm-text-2) !important;
|
|
}
|
|
|
|
.sm-scene .is-on > svg.icon,
|
|
.sm-scene .is-on > img[src^="/icons/hugeicons/"],
|
|
.sm-scene .m-search svg.icon,
|
|
.sm-scene .m-search img[src^="/icons/hugeicons/"] {
|
|
background-color: var(--sm-accent-text) !important;
|
|
}
|
|
|
|
.sm-scene .m-ic.is-on svg.icon,
|
|
.sm-scene .m-ic.is-on img[src^="/icons/hugeicons/"],
|
|
.sm-scene .m-badge svg.icon,
|
|
.sm-scene .m-badge img[src^="/icons/hugeicons/"] {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
/* ---- Weights: regular (400) and medium (500) only ----
|
|
Nothing on the site is semibold or bold. Mintlify's own utility classes, headings,
|
|
bold text and table headers are all capped at medium. */
|
|
.font-semibold,
|
|
.font-bold,
|
|
.font-extrabold,
|
|
.font-black,
|
|
strong,
|
|
b,
|
|
th,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
[class*="font-semibold"],
|
|
[class*="font-bold"] {
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Heading permalink anchors carry their own semibold; they follow the heading */
|
|
:is(h1, h2, h3, h4, h5, h6) a,
|
|
a[class*="-ml-10"] {
|
|
font-weight: inherit !important;
|
|
}
|
|
|
|
/* ---- Icons: Hugeicons (free set, MIT) ----
|
|
Mintlify only ships Font Awesome, Lucide and Tabler, so the Hugeicons SVGs live in
|
|
/icons/hugeicons and are referenced by path. Mintlify draws path icons as a plain
|
|
<img>, which cannot take the text colour, so each one is redrawn as a mask filled
|
|
with currentColor: it follows the sidebar's active blue, the link ink and dark mode
|
|
exactly like the built-in icons do. */
|
|
img[src^="/icons/hugeicons/"] {
|
|
object-position: -9999px 0;
|
|
background-color: currentColor !important;
|
|
-webkit-mask: var(--hi) center / 100% 100% no-repeat;
|
|
mask: var(--hi) center / 100% 100% no-repeat;
|
|
}
|
|
|
|
img[src="/icons/hugeicons/activity-01.svg"] {
|
|
--hi: url("/icons/hugeicons/activity-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/agreement-01.svg"] {
|
|
--hi: url("/icons/hugeicons/agreement-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/ai-brain-01.svg"] {
|
|
--hi: url("/icons/hugeicons/ai-brain-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/arrow-data-transfer-horizontal.svg"] {
|
|
--hi: url("/icons/hugeicons/arrow-data-transfer-horizontal.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/arrow-up-right-01.svg"] {
|
|
--hi: url("/icons/hugeicons/arrow-up-right-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/award-01.svg"] {
|
|
--hi: url("/icons/hugeicons/award-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/balance-scale.svg"] {
|
|
--hi: url("/icons/hugeicons/balance-scale.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/book-02.svg"] {
|
|
--hi: url("/icons/hugeicons/book-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/book-open-01.svg"] {
|
|
--hi: url("/icons/hugeicons/book-open-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/brain-01.svg"] {
|
|
--hi: url("/icons/hugeicons/brain-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/bug-01.svg"] {
|
|
--hi: url("/icons/hugeicons/bug-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/building-03.svg"] {
|
|
--hi: url("/icons/hugeicons/building-03.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/chart-line-data-01.svg"] {
|
|
--hi: url("/icons/hugeicons/chart-line-data-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/chat-bot.svg"] {
|
|
--hi: url("/icons/hugeicons/chat-bot.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/check-list.svg"] {
|
|
--hi: url("/icons/hugeicons/check-list.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/clipboard.svg"] {
|
|
--hi: url("/icons/hugeicons/clipboard.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/clock-01.svg"] {
|
|
--hi: url("/icons/hugeicons/clock-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/cloud.svg"] {
|
|
--hi: url("/icons/hugeicons/cloud.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/command-line.svg"] {
|
|
--hi: url("/icons/hugeicons/command-line.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/compass-01.svg"] {
|
|
--hi: url("/icons/hugeicons/compass-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/computer.svg"] {
|
|
--hi: url("/icons/hugeicons/computer.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/copy-01.svg"] {
|
|
--hi: url("/icons/hugeicons/copy-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/cpu.svg"] {
|
|
--hi: url("/icons/hugeicons/cpu.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/credit-card.svg"] {
|
|
--hi: url("/icons/hugeicons/credit-card.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/cube.svg"] {
|
|
--hi: url("/icons/hugeicons/cube.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/cursor-01.svg"] {
|
|
--hi: url("/icons/hugeicons/cursor-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/dashboard-speed-01.svg"] {
|
|
--hi: url("/icons/hugeicons/dashboard-speed-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/database-01.svg"] {
|
|
--hi: url("/icons/hugeicons/database-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/delivery-truck-01.svg"] {
|
|
--hi: url("/icons/hugeicons/delivery-truck-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/download-01.svg"] {
|
|
--hi: url("/icons/hugeicons/download-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/eraser-01.svg"] {
|
|
--hi: url("/icons/hugeicons/eraser-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/file-01.svg"] {
|
|
--hi: url("/icons/hugeicons/file-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/file-02.svg"] {
|
|
--hi: url("/icons/hugeicons/file-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/file-search.svg"] {
|
|
--hi: url("/icons/hugeicons/file-search.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/files-01.svg"] {
|
|
--hi: url("/icons/hugeicons/files-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/files-02.svg"] {
|
|
--hi: url("/icons/hugeicons/files-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/filter.svg"] {
|
|
--hi: url("/icons/hugeicons/filter.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/flash.svg"] {
|
|
--hi: url("/icons/hugeicons/flash.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/folder-01.svg"] {
|
|
--hi: url("/icons/hugeicons/folder-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/github.svg"] {
|
|
--hi: url("/icons/hugeicons/github.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/globe-02.svg"] {
|
|
--hi: url("/icons/hugeicons/globe-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/hard-drive.svg"] {
|
|
--hi: url("/icons/hugeicons/hard-drive.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/headphones.svg"] {
|
|
--hi: url("/icons/hugeicons/headphones.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/help-circle.svg"] {
|
|
--hi: url("/icons/hugeicons/help-circle.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/hierarchy-square-01.svg"] {
|
|
--hi: url("/icons/hugeicons/hierarchy-square-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/id.svg"] {
|
|
--hi: url("/icons/hugeicons/id.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/idea-01.svg"] {
|
|
--hi: url("/icons/hugeicons/idea-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/invoice-01.svg"] {
|
|
--hi: url("/icons/hugeicons/invoice-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/java-script.svg"] {
|
|
--hi: url("/icons/hugeicons/java-script.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/justice-scale-01.svg"] {
|
|
--hi: url("/icons/hugeicons/justice-scale-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/key-01.svg"] {
|
|
--hi: url("/icons/hugeicons/key-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/layers-01.svg"] {
|
|
--hi: url("/icons/hugeicons/layers-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/left-to-right-list-bullet.svg"] {
|
|
--hi: url("/icons/hugeicons/left-to-right-list-bullet.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/link-01.svg"] {
|
|
--hi: url("/icons/hugeicons/link-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/location-01.svg"] {
|
|
--hi: url("/icons/hugeicons/location-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/lock.svg"] {
|
|
--hi: url("/icons/hugeicons/lock.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/login-01.svg"] {
|
|
--hi: url("/icons/hugeicons/login-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/logout-01.svg"] {
|
|
--hi: url("/icons/hugeicons/logout-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/mail-01.svg"] {
|
|
--hi: url("/icons/hugeicons/mail-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/message-01.svg"] {
|
|
--hi: url("/icons/hugeicons/message-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/message-02.svg"] {
|
|
--hi: url("/icons/hugeicons/message-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/note-01.svg"] {
|
|
--hi: url("/icons/hugeicons/note-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/package.svg"] {
|
|
--hi: url("/icons/hugeicons/package.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/play-circle.svg"] {
|
|
--hi: url("/icons/hugeicons/play-circle.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/play.svg"] {
|
|
--hi: url("/icons/hugeicons/play.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/plug-01.svg"] {
|
|
--hi: url("/icons/hugeicons/plug-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/plug-socket.svg"] {
|
|
--hi: url("/icons/hugeicons/plug-socket.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/plus-sign.svg"] {
|
|
--hi: url("/icons/hugeicons/plus-sign.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/puzzle.svg"] {
|
|
--hi: url("/icons/hugeicons/puzzle.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/python.svg"] {
|
|
--hi: url("/icons/hugeicons/python.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/refresh.svg"] {
|
|
--hi: url("/icons/hugeicons/refresh.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/robotic.svg"] {
|
|
--hi: url("/icons/hugeicons/robotic.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/rotate-clockwise.svg"] {
|
|
--hi: url("/icons/hugeicons/rotate-clockwise.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/route-01.svg"] {
|
|
--hi: url("/icons/hugeicons/route-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/route-02.svg"] {
|
|
--hi: url("/icons/hugeicons/route-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/search-01.svg"] {
|
|
--hi: url("/icons/hugeicons/search-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/server-stack-01.svg"] {
|
|
--hi: url("/icons/hugeicons/server-stack-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/settings-01.svg"] {
|
|
--hi: url("/icons/hugeicons/settings-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/settings-02.svg"] {
|
|
--hi: url("/icons/hugeicons/settings-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/share-08.svg"] {
|
|
--hi: url("/icons/hugeicons/share-08.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/shield-01.svg"] {
|
|
--hi: url("/icons/hugeicons/shield-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/sliders-horizontal.svg"] {
|
|
--hi: url("/icons/hugeicons/sliders-horizontal.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/source-code.svg"] {
|
|
--hi: url("/icons/hugeicons/source-code.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/sparkles.svg"] {
|
|
--hi: url("/icons/hugeicons/sparkles.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/square.svg"] {
|
|
--hi: url("/icons/hugeicons/square.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/tag-01.svg"] {
|
|
--hi: url("/icons/hugeicons/tag-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/test-tube-01.svg"] {
|
|
--hi: url("/icons/hugeicons/test-tube-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/tick-02.svg"] {
|
|
--hi: url("/icons/hugeicons/tick-02.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/triangle.svg"] {
|
|
--hi: url("/icons/hugeicons/triangle.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/upload-01.svg"] {
|
|
--hi: url("/icons/hugeicons/upload-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/user-circle.svg"] {
|
|
--hi: url("/icons/hugeicons/user-circle.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/user-multiple.svg"] {
|
|
--hi: url("/icons/hugeicons/user-multiple.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/user.svg"] {
|
|
--hi: url("/icons/hugeicons/user.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/workflow-square-01.svg"] {
|
|
--hi: url("/icons/hugeicons/workflow-square-01.svg");
|
|
}
|
|
|
|
img[src="/icons/hugeicons/wrench-01.svg"] {
|
|
--hi: url("/icons/hugeicons/wrench-01.svg");
|
|
}
|
|
|
|
/* ---- Motion: nothing moves for people who asked it not to ---- */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sm-home *,
|
|
#navigation-items li > a {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ---- Responsive ---- */
|
|
|
|
@media (max-width: 1024px) {
|
|
.sm-home {
|
|
padding-top: 56px;
|
|
}
|
|
|
|
.sm-home-hero {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
.sm-home-grid-3 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.sm-home-grid-3 .sm-home-card-body {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sm-prompt-scroll {
|
|
height: 280px;
|
|
}
|
|
|
|
.sm-home-grid-3 {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.sm-home {
|
|
padding: 40px 16px 64px;
|
|
}
|
|
|
|
.sm-home-title {
|
|
font-size: 34px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.sm-home-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.sm-home-btn {
|
|
justify-content: center;
|
|
height: 44px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sm-home-lede {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sm-home-section {
|
|
margin-top: 72px;
|
|
}
|
|
|
|
.sm-home-heading {
|
|
font-size: 26px !important;
|
|
}
|
|
|
|
.sm-home-grid-3,
|
|
.sm-home-grid-2,
|
|
.sm-home-list-card .sm-home-links {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Overview page only: swap the navbar icon for the console wordmark plus a "Docs"
|
|
label, so the landing page reads "supermemory | Docs". Every other page keeps the
|
|
icon from docs.json. The wordmark's text sits low in its box, so 18px tall lines
|
|
its x-height up with the label. */
|
|
html:has(.sm-home) a:has(> img.nav-logo) {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
html:has(.sm-home) img.nav-logo[src="/logo/light.svg"] {
|
|
content: url("/logo/wordmark-light.svg");
|
|
height: 18px !important;
|
|
}
|
|
|
|
html:has(.sm-home) img.nav-logo[src="/logo/dark.svg"] {
|
|
content: url("/logo/wordmark-dark.svg");
|
|
height: 18px !important;
|
|
}
|
|
|
|
html:has(.sm-home) a:has(> img.nav-logo)::after {
|
|
content: "Docs";
|
|
padding-left: 10px;
|
|
border-left: 1px solid var(--sm-border-hover);
|
|
font-family: var(--sm-font-sans);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
color: var(--sm-text-2);
|
|
}
|