/* ArcadeDB brand stylesheet for Antora.
Ported from src/main/asciidoc/docinfo.html (legacy single-page build).
Most rules target asciidoctor-emitted classes (.admonitionblock,
.listingblock, .tableblock, etc.) which Antora preserves verbatim.
Antora-specific selectors (.nav-menu, .toolbar, .pagination, etc.)
are layered on top to apply the same palette to chrome the legacy
build never had.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
--color-primary: #0066CC;
--color-primary-dark: #004C99;
--color-text-primary: #1A1D23;
--color-text-secondary: #4A5568;
--color-bg-secondary: #F5F6F7;
--color-bg-accent: #F0F4F8;
--color-border: #E2E8F0;
--color-border-light: #EDF2F7;
--color-code-bg: #1A1D23;
--color-code-text: #E4E8EE;
--color-inline-code-bg: #F0F4F8;
--color-inline-code-text: #0066CC;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-code: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
/* Typography */
body, .doc {
font-family: var(--font-body) !important;
color: var(--color-text-secondary);
line-height: 1.7;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
font-family: var(--font-heading) !important;
color: var(--color-text-primary) !important;
letter-spacing: -0.02em;
font-weight: 700;
}
.doc h3, .doc h4, .doc h5, .doc h6 { font-weight: 600; }
p { color: var(--color-text-secondary); }
/* Links */
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover, a:focus {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* Antora chrome — header/toolbar */
.navbar { background: #fff; border-bottom: 1px solid var(--color-border); }
.navbar-brand .navbar-item { color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; padding: 0 1rem; }
.navbar-brand-link { display: flex; align-items: center; }
.navbar-logo { height: 32px; max-height: 32px; width: auto; }
.navbar-end .navbar-item { font-family: var(--font-body); color: var(--color-text-secondary); font-weight: 500; }
.navbar-end .navbar-item:hover { color: var(--color-primary); background: transparent; }
.navbar-end .button.is-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-family: var(--font-body);
font-weight: 600;
padding: 0 1.1em;
height: 2.2em;
border-radius: 6px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.navbar-end .button.is-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #fff;
}
.toolbar { background: #fff; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.toolbar a, .crumbs a { color: var(--color-text-secondary); }
.toolbar a:hover, .crumbs a:hover { color: var(--color-primary); }
/* Antora left nav (sidebar) */
.nav-container, aside.nav { background: var(--color-bg-secondary); border-right: 1px solid var(--color-border); }
.nav-menu { font-family: var(--font-body); }
.nav-menu .title { font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75em; }
.nav-list a, .nav-list .nav-text { color: var(--color-text-secondary); }
.nav-list a:hover { color: var(--color-primary); }
.nav-list .is-current-page > .nav-link { color: var(--color-primary); font-weight: 600; }
/* Sidebar tabs (Documentation / API Reference). Tabs size to their text
instead of splitting available width 50/50, so "Documentation" doesn't
wrap when the panel is narrow. */
.nav-tabs {
display: flex;
gap: 0;
padding: 0 12px;
margin: 8px 0 12px;
border-bottom: 1px solid var(--color-border-light);
}
.nav-tab {
flex: 0 0 auto;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 9px 12px;
margin-bottom: -1px;
font-family: var(--font-body);
font-size: 0.78em;
font-weight: 600;
color: var(--color-text-secondary);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
text-transform: none;
letter-spacing: 0;
}
.nav-tab + .nav-tab { padding-left: 14px; }
.nav-tab:hover { color: var(--color-text-primary); }
.nav-tab.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.nav-tab-pane { display: none; }
.nav-tab-pane.is-active { display: block; }
/* Hide the redundant "ArcadeDB" component title in the sidebar — the
navbar logo above already identifies the project. */
.nav-menu > .title { display: none; }
/* Algolia DocSearch v3 — match the brand palette. The search button
replaces the legacy in the navbar, and the modal opens on
click / Cmd-K. */
:root {
--docsearch-primary-color: var(--color-primary);
--docsearch-highlight-color: var(--color-primary);
--docsearch-logo-color: var(--color-primary);
--docsearch-text-color: var(--color-text-primary);
--docsearch-muted-color: var(--color-text-secondary);
--docsearch-container-background: rgba(26, 29, 35, 0.5);
--docsearch-modal-background: #ffffff;
--docsearch-searchbox-background: var(--color-bg-secondary);
--docsearch-searchbox-focus-background: #ffffff;
--docsearch-hit-background: var(--color-bg-secondary);
--docsearch-hit-color: var(--color-text-primary);
--docsearch-hit-active-color: #ffffff;
--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.04);
--docsearch-footer-background: var(--color-bg-secondary);
--docsearch-footer-shadow: 0 -1px 0 0 var(--color-border);
}
.DocSearch-Button {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 6px;
height: 36px;
font-family: var(--font-body);
color: var(--color-text-secondary);
margin: 0;
min-width: 220px;
}
.DocSearch-Button:hover { background: #ffffff; border-color: var(--color-primary); box-shadow: none; }
.DocSearch-Button-Placeholder { font-size: 0.875rem; }
/* Antora right TOC ("On this page") */
aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid var(--color-border-light); }
.toc-menu .title, aside.toc .title { font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75em; }
.toc-menu a { color: var(--color-text-secondary); }
.toc-menu a:hover, .toc-menu li.is-active > a { color: var(--color-primary); }
/* Code blocks. Antora's default UI uses highlight.js (pre.highlightjs.highlight)
wrapped directly in .listingblock — no .content intermediate — so the legacy
rouge selectors don't bind. Specificity here is intentional to beat site.css.
*/
.doc pre, .doc pre > code, .doc code { font-family: var(--font-code) !important; }
/* Asciidoctor wraps inside .listingblock > .content for plain
listing blocks, and directly inside .listingblock for source-tagged
ones. The descendant combinator catches both shapes. !important
beats site.css which forces a #fafafa background on pre:not(.highlight). */
.doc .listingblock,
.doc .listingblock pre,
.doc .literalblock pre {
background: var(--color-code-bg) !important;
color: var(--color-code-text) !important;
border: none !important;
border-radius: 8px;
box-shadow: none !important;
}
.doc .listingblock { padding: 0; }
.doc .listingblock > .content { padding: 0; }
.doc .listingblock pre {
padding: 18px 20px !important;
font-size: 0.875rem;
line-height: 1.55;
overflow-x: auto;
margin: 0;
}
.doc .listingblock pre code {
background: transparent !important;
color: inherit !important;
padding: 0;
font-size: inherit;
}
/* Inline code (not inside a pre). */
.doc :not(pre) > code,
.doc p > code,
.doc li > code,
.doc td > code {
background: var(--color-inline-code-bg) !important;
color: var(--color-inline-code-text) !important;
font-family: var(--font-code);
padding: 0.15em 0.4em;
border-radius: 4px;
font-size: 0.875em;
}
/* highlight.js dark theme — palette matches the legacy docinfo.html. */
.doc .hljs { background: transparent !important; color: var(--color-code-text); }
.doc .hljs-comment, .doc .hljs-quote { color: #6B7280; font-style: italic; }
.doc .hljs-keyword, .doc .hljs-selector-tag, .doc .hljs-literal,
.doc .hljs-section, .doc .hljs-doctag, .doc .hljs-meta { color: #7DD3FC; font-weight: 600; }
.doc .hljs-type, .doc .hljs-class .hljs-title, .doc .hljs-title.class_, .doc .hljs-built_in { color: #93C5FD; }
.doc .hljs-string, .doc .hljs-regexp, .doc .hljs-attr,
.doc .hljs-template-tag { color: #6EE7B7; }
/* f-string / template substitutions — must NOT blend with the string color
that surrounds them (#6EE7B7), so use the default code text colour. */
.doc .hljs-subst, .doc .hljs-template-variable { color: var(--color-code-text); }
.doc .hljs-number, .doc .hljs-symbol, .doc .hljs-bullet { color: #5EEAD4; }
.doc .hljs-name, .doc .hljs-tag { color: #7DD3FC; }
.doc .hljs-attribute, .doc .hljs-variable { color: #5EEAD4; }
.doc .hljs-function .hljs-title, .doc .hljs-title.function_, .doc .hljs-title { color: #FCA5A5; font-weight: 600; }
.doc .hljs-params, .doc .hljs-property { color: #D1D5DB; }
.doc .hljs-emphasis { font-style: italic; }
.doc .hljs-strong { font-weight: bold; }
.doc .hljs-link { text-decoration: underline; }
.doc .hljs-deletion { color: #FCA5A5; background: rgba(252, 165, 165, 0.1); }
.doc .hljs-addition { color: #6EE7B7; background: rgba(110, 231, 183, 0.1); }
/* Tables */
.doc table.tableblock {
border: 1px solid var(--color-border);
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
max-width: 100%;
}
/* Allow long identifiers and inline code to wrap inside table cells.
Without this, names like `arcadedb.ha.stopServerOnReplicationFailure`
force a column wider than the content area and the table overflows
under the right-side "On this page" sidebar. */
.doc table.tableblock td,
.doc table.tableblock th {
word-break: break-word;
overflow-wrap: anywhere;
}
.doc table.tableblock td code,
.doc table.tableblock th code {
white-space: normal;
word-break: break-all;
overflow-wrap: anywhere;
}
.doc table.tableblock thead tr th {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
font-weight: 600;
font-family: var(--font-body);
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
}
.doc table.tableblock tbody tr td,
.doc table.tableblock tbody tr th {
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.doc table.tableblock tbody tr:last-child td,
.doc table.tableblock tbody tr:last-child th { border-bottom: none; }
/* Admonition blocks (note/tip/warning/caution/important).
Antora positions the icon badge half above the box with translateY(-50%);
keeping overflow:visible on the table avoids clipping the "NOTE" label. */
.doc .admonitionblock > table { overflow: visible; }
.doc .admonitionblock > table td.content { border-radius: 8px; }
.doc .admonitionblock > table td.content {
border-left: 4px solid var(--color-border);
padding: 16px 20px;
color: var(--color-text-secondary);
background: transparent;
}
.doc .admonitionblock.note > table td.content { border-left-color: var(--color-primary); background: rgba(0, 102, 204, 0.05); }
.doc .admonitionblock td.icon .icon-note::before { color: var(--color-primary) !important; }
.doc .admonitionblock.tip > table td.content { border-left-color: #10B981; background: rgba(16, 185, 129, 0.05); }
.doc .admonitionblock td.icon .icon-tip::before { color: #10B981 !important; }
.doc .admonitionblock.warning > table td.content { border-left-color: #F59E0B; background: rgba(245, 158, 11, 0.05); }
.doc .admonitionblock td.icon .icon-warning::before { color: #F59E0B !important; }
.doc .admonitionblock.caution > table td.content,
.doc .admonitionblock.important > table td.content { border-left-color: #EF4444; background: rgba(239, 68, 68, 0.05); }
.doc .admonitionblock td.icon .icon-caution::before,
.doc .admonitionblock td.icon .icon-important::before { color: #EF4444 !important; }
/* Sidebar / example / quote blocks */
.doc .sidebarblock { background: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; border-radius: 8px; }
.doc .exampleblock > .content { border-color: var(--color-border); background: #fff; border-radius: 8px; }
.doc .quoteblock { border-left-color: var(--color-primary); }
/* Landing page (home) */
.landing-hero { text-align: center; padding: 20px 20px 10px; max-width: 900px; margin: 0 auto; }
.landing-hero p { font-size: 1.05em; color: var(--color-text-secondary); max-width: 620px; margin: 0 auto 24px; line-height: 1.5; }
.landing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 880px;
margin: 0 auto 28px;
}
.landing-card {
display: block;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 28px 20px;
text-align: center;
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.landing-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 12px rgba(0, 102, 204, 0.10);
}
.landing-card-icon { font-size: 2em; color: var(--color-primary); margin-bottom: 12px; }
.landing-card h3 { font-size: 1.05em; font-weight: 700; color: var(--color-text-primary); margin: 0 0 6px; }
.landing-card p { font-size: 0.9em; color: var(--color-text-secondary); line-height: 1.45; margin: 0; }
@media (max-width: 700px) { .landing-cards { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 950px) { .landing-cards { grid-template-columns: repeat(2, 1fr); } }
/* Language / protocol logo cards used on the API & Drivers landing page.
Wider grid (4 columns) than .landing-cards because the cards are smaller
-- a logo + a one-line title + a short caption. */
.logo-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1080px;
margin: 0 auto 28px;
}
.logo-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 20px 14px;
text-align: center;
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.logo-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 12px rgba(0, 102, 204, 0.10); transform: translateY(-2px); }
.logo-card img { width: 48px; height: 48px; object-fit: contain; }
.logo-card h3 { font-size: 0.95em; font-weight: 700; color: var(--color-text-primary); margin: 4px 0 0; }
.logo-card p { font-size: 0.8em; color: var(--color-text-secondary); line-height: 1.4; margin: 0; }
@media (max-width: 1100px) { .logo-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .logo-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .logo-cards { grid-template-columns: 1fr; } }
/* "Get started" hero banner — used on the home page and on
/get-started.html. Tinted background card with a primary CTA
on the left and a secondary on the right. Inspired by neo4j.com/docs. */
.docs-hero {
background: linear-gradient(135deg, #F0F4F8 0%, #E2EAF2 60%, #D9E5F0 100%);
border: 1px solid var(--color-border-light);
border-radius: 12px;
padding: 48px 40px;
margin: 0 0 32px;
}
.docs-hero-title {
font-family: var(--font-heading);
font-size: 2em;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.docs-hero-subtitle {
font-size: 1.05em;
color: var(--color-text-secondary);
max-width: 720px;
margin: 0 0 24px;
line-height: 1.55;
}
.docs-hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.docs-hero-button,
.docs-hero-button-secondary {
display: inline-block;
padding: 11px 22px;
border-radius: 8px;
font-family: var(--font-body);
font-weight: 600;
text-decoration: none !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.docs-hero-button {
background: var(--color-primary);
color: #fff !important;
border: 1px solid var(--color-primary);
}
.docs-hero-button:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.docs-hero-button-secondary {
background: transparent;
color: var(--color-text-primary) !important;
border: 1px solid var(--color-border);
}
.docs-hero-button-secondary:hover {
border-color: var(--color-primary);
color: var(--color-primary) !important;
}
@media (max-width: 600px) {
.docs-hero { padding: 32px 24px; }
.docs-hero-title { font-size: 1.6em; }
}
/* "How ArcadeDB Works" architecture diagram on /get-started.html.
Hand-rolled inline SVG with clickable components and animated dot
pulses on the connector lines. Colours mirror docinfo.html's brand
palette so the diagram lives next to the rest of the docs UI. */
.docs-hero-compact { padding: 28px 32px; margin-bottom: 28px; }
.docs-hero-with-summary {
display: flex;
align-items: center;
gap: 32px;
}
.docs-hero-with-summary .docs-hero-actions { flex-shrink: 0; }
.docs-hero-summary { flex: 1; }
.docs-hero-summary p {
margin: 0 0 6px;
color: var(--color-text-secondary);
font-size: 0.95em;
line-height: 1.55;
}
.docs-hero-summary p:last-child { margin-bottom: 0; }
.docs-hero-summary strong { color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 700px) {
.docs-hero-with-summary { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.haw-heading {
font-family: var(--font-heading);
font-size: 1.65em;
font-weight: 700;
color: var(--color-text-primary);
text-align: center;
margin: 8px 0 4px;
}
.haw-subhead {
text-align: center;
color: var(--color-text-secondary);
margin: 0 0 18px;
font-size: 0.95em;
}
.haw-svg {
width: 100%;
height: auto;
max-width: 1200px;
display: block;
margin: 0 auto;
font-family: var(--font-body);
}
.haw-svg text { fill: var(--color-text-primary); }
.haw-section-label {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
fill: var(--color-text-secondary);
}
.haw-app-link { cursor: pointer; }
.haw-app-window rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
.haw-app-link:hover .haw-app-window > rect:first-of-type { stroke: var(--color-primary); stroke-width: 2; }
.haw-app-link:hover .haw-section-label { fill: var(--color-primary); }
.haw-app-stack { font-size: 12px; fill: var(--color-text-secondary); font-weight: 500; }
.haw-app-caption { font-size: 11px; fill: var(--color-text-secondary); letter-spacing: 0.04em; }
.haw-lang { cursor: pointer; }
.haw-lang rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
.haw-lang text { font-size: 14px; font-weight: 600; }
.haw-lang:hover rect { stroke-width: 2; fill: #FAFBFC; }
.haw-lang-sql text { fill: #0066CC; } .haw-lang-sql:hover rect { stroke: #0066CC; }
.haw-lang-cypher text { fill: #10B981; } .haw-lang-cypher:hover rect { stroke: #10B981; }
.haw-lang-gremlin text { fill: #7C3AED; } .haw-lang-gremlin:hover rect { stroke: #7C3AED; }
.haw-lang-graphql text { fill: #F59E0B; } .haw-lang-graphql:hover rect { stroke: #F59E0B; }
.haw-lang-mongo text { fill: #84CC16; } .haw-lang-mongo:hover rect { stroke: #84CC16; }
.haw-lang-java text { fill: #1A1D23; } .haw-lang-java:hover rect { stroke: #1A1D23; }
.haw-server-box { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
.haw-feature { cursor: pointer; }
.haw-feature rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; }
.haw-feature:hover rect { stroke-width: 2; }
.haw-feature text { font-size: 14px; font-weight: 600; }
.haw-feature .haw-feature-title { font-size: 14px; font-weight: 700; }
.haw-feature .haw-feature-sub { font-size: 11px; font-weight: 500; fill: var(--color-text-secondary); }
.haw-bullet { fill: none; stroke-width: 2; }
.haw-feature-query rect { stroke: #93C5FD; }
.haw-feature-query .haw-feature-title { fill: #0066CC; }
.haw-feature-query .haw-bullet { stroke: #0066CC; }
.haw-feature-query:hover rect { stroke: #0066CC; }
.haw-feature-http rect { stroke: #6EE7B7; }
.haw-feature-http .haw-feature-title { fill: #10B981; }
.haw-feature-http .haw-bullet { stroke: #10B981; }
.haw-feature-http:hover rect { stroke: #10B981; }
.haw-feature-acid rect { stroke: #C4B5FD; } .haw-feature-acid text { fill: #7C3AED; } .haw-feature-acid:hover rect { stroke: #7C3AED; }
.haw-feature-ha rect { stroke: #6EE7B7; } .haw-feature-ha text { fill: #10B981; } .haw-feature-ha:hover rect { stroke: #10B981; }
.haw-feature-security rect { stroke: #FCD34D; } .haw-feature-security text { fill: #F59E0B; } .haw-feature-security:hover rect { stroke: #F59E0B; }
.haw-feature-indexing rect { stroke: #FCA5A5; } .haw-feature-indexing text { fill: #EF4444; } .haw-feature-indexing:hover rect { stroke: #EF4444; }
.haw-feature-schema rect { stroke: #93C5FD; } .haw-feature-schema text { fill: #0066CC; } .haw-feature-schema:hover rect { stroke: #0066CC; }
.haw-feature-clustering rect { stroke: #6EE7B7; } .haw-feature-clustering text { fill: #10B981; } .haw-feature-clustering:hover rect { stroke: #10B981; }
.haw-feature-storage rect { fill: #F0F4F8; stroke: #93C5FD; stroke-dasharray: 4 4; }
.haw-feature-storage .haw-feature-title { fill: #0066CC; }
.haw-feature-storage:hover rect { stroke: #0066CC; }
.haw-model { cursor: pointer; }
.haw-model rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; }
.haw-model:hover rect { stroke-width: 2; fill: #FAFBFC; }
.haw-model .haw-model-title { font-size: 18px; font-weight: 700; }
.haw-model .haw-model-sub { font-size: 12px; fill: var(--color-text-secondary); }
.haw-model .haw-model-icon { font-size: 16px; font-weight: 600; }
.haw-model-graph .haw-model-title { fill: #0066CC; }
.haw-model-graph circle, .haw-model-graph line { stroke: #0066CC; fill: #0066CC; }
.haw-model-graph circle[fill="none"] { fill: none; }
.haw-model-graph:hover rect { stroke: #0066CC; }
.haw-model-document .haw-model-title { fill: #10B981; }
.haw-model-document .haw-model-icon { fill: #10B981; }
.haw-model-document:hover rect { stroke: #10B981; }
.haw-model-kv .haw-model-title { fill: #7C3AED; }
.haw-model-kv .haw-model-icon { fill: #7C3AED; }
.haw-model-kv:hover rect { stroke: #7C3AED; }
.haw-model-fts .haw-model-title { fill: #F59E0B; }
.haw-model-fts circle, .haw-model-fts line { stroke: #F59E0B; }
.haw-model-fts:hover rect { stroke: #F59E0B; }
.haw-model-vector .haw-model-title { fill: #EF4444; }
.haw-model-vector:hover rect { stroke: #EF4444; }
.haw-model-ts .haw-model-title { fill: #10B981; }
.haw-model-ts polyline { stroke: #10B981; }
.haw-model-ts:hover rect { stroke: #10B981; }
/* Connectors and animated dot pulses */
.haw-conn { stroke-width: 2; fill: none; stroke-linecap: round; }
.haw-conn-http { stroke: #0066CC; }
.haw-conn-json { stroke: #10B981; stroke-dasharray: 5 5; }
.haw-conn-pg { stroke: #7C3AED; opacity: 0.6; }
.haw-conn-rm { stroke: #EF4444; opacity: 0.6; }
.haw-conn-graph { stroke: #0066CC; opacity: 0.7; }
.haw-conn-document { stroke: #10B981; opacity: 0.7; }
.haw-conn-kv { stroke: #7C3AED; opacity: 0.7; }
.haw-conn-fts { stroke: #F59E0B; opacity: 0.7; }
.haw-conn-vector { stroke: #EF4444; opacity: 0.7; }
.haw-conn-ts { stroke: #10B981; opacity: 0.7; }
.haw-dot { stroke: #fff; stroke-width: 1; }
.haw-dot-http { fill: #0066CC; }
.haw-dot-json { fill: #10B981; }
.haw-dot-pg { fill: #7C3AED; }
.haw-dot-rm { fill: #EF4444; }
.haw-dot-graph { fill: #0066CC; }
.haw-dot-document { fill: #10B981; }
.haw-dot-kv { fill: #7C3AED; }
.haw-dot-fts { fill: #F59E0B; }
.haw-dot-vector { fill: #EF4444; }
.haw-dot-ts { fill: #10B981; }
.haw-conn-label { font-size: 11px; fill: var(--color-text-secondary); font-weight: 500; }
.haw-footer {
text-align: center;
margin: 16px auto 24px;
max-width: 720px;
padding: 12px 16px;
background: rgba(110, 231, 183, 0.08);
border: 1px dashed rgba(16, 185, 129, 0.4);
border-radius: 8px;
color: var(--color-text-secondary);
font-size: 0.9em;
}
.haw-footer strong { color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 700px) {
.haw-svg { display: none; }
}
/* Polyglot-persistence vs single-engine animation, used on
/tutorials/what-is-arcadedb. Stacked top/bottom panels with
animated dots that visualize sequential round-trips (top)
versus a single request to ArcadeDB (bottom). Same brand
palette as the "How ArcadeDB Works" diagram. */
.ppd-svg {
width: 100%;
height: auto;
max-width: 1200px;
display: block;
margin: 0 auto 1.25rem;
font-family: var(--font-body);
}
.ppd-svg text { fill: var(--color-text-primary); }
.ppd-section-label {
font-size: 19px;
font-weight: 700;
letter-spacing: 0.06em;
fill: var(--color-text-secondary);
}
.ppd-caption { font-size: 17px; fill: var(--color-text-secondary); font-style: italic; }
.ppd-divider { stroke: var(--color-border-light); stroke-width: 1; stroke-dasharray: 4 6; }
.ppd-app rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
.ppd-app-title { font-size: 22px; font-weight: 700; }
.ppd-app-sub { font-size: 16px; fill: var(--color-text-secondary); }
.ppd-db rect { fill: #fff; stroke-width: 1.5; }
.ppd-db text { font-size: 20px; font-weight: 600; }
.ppd-db-pg rect { stroke: #93C5FD; }
.ppd-db-pg text { fill: #0066CC; }
.ppd-db-mongo rect { stroke: #84CC16; }
.ppd-db-mongo text { fill: #65A30D; }
.ppd-db-neo4j rect { stroke: #C4B5FD; }
.ppd-db-neo4j text { fill: #7C3AED; }
.ppd-latency { font-size: 18px; font-weight: 600; fill: var(--color-text-secondary); }
/* Sequence-diagram classes for the polyglot panel:
actor heads, vertical lifelines below them, and message labels
that sit above (request) or below (response) each horizontal arrow. */
.ppd-actor rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; }
.ppd-actor-title { font-size: 21px; font-weight: 700; fill: var(--color-text-primary); }
.ppd-actor-pg rect { stroke: #93C5FD; } .ppd-actor-pg .ppd-actor-title { fill: #0066CC; }
.ppd-actor-mongo rect { stroke: #84CC16; } .ppd-actor-mongo .ppd-actor-title { fill: #65A30D; }
.ppd-actor-neo4j rect { stroke: #C4B5FD; } .ppd-actor-neo4j .ppd-actor-title { fill: #7C3AED; }
.ppd-lifeline { stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.4; fill: none; }
.ppd-lifeline-pg { stroke: #93C5FD; opacity: 0.55; }
.ppd-lifeline-mongo { stroke: #84CC16; opacity: 0.55; }
.ppd-lifeline-neo4j { stroke: #C4B5FD; opacity: 0.55; }
.ppd-msg-label { font-size: 16px; fill: var(--color-text-secondary); font-style: italic; }
.ppd-msg-latency { font-style: normal; font-weight: 700; fill: var(--color-text-primary); }
.ppd-arcade rect { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
.ppd-arcade-title { font-size: 26px; font-weight: 700; fill: var(--color-primary); }
.ppd-arcade-sub { font-size: 16px; fill: var(--color-text-secondary); }
/* The big ArcadeDB engine box that holds the internal model boxes
and their bouncing-data animation. */
.ppd-arcade-engine rect:first-of-type { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; }
.ppd-engine-label { font-size: 17px; font-weight: 600; fill: var(--color-text-secondary); letter-spacing: 0.02em; }
/* Internal model boxes inside the ArcadeDB engine. */
.ppd-model rect { fill: #fff; stroke-width: 1.5; }
.ppd-model .ppd-model-title { font-size: 19px; font-weight: 700; }
.ppd-model .ppd-model-sub { font-size: 14px; fill: var(--color-text-secondary); font-style: italic; }
.ppd-model-graph rect { stroke: #93C5FD; } .ppd-model-graph .ppd-model-title { fill: #0066CC; }
.ppd-model-document rect { stroke: #6EE7B7; } .ppd-model-document .ppd-model-title { fill: #10B981; }
.ppd-model-vector rect { stroke: #FCA5A5; } .ppd-model-vector .ppd-model-title { fill: #EF4444; }
.ppd-model-kv rect { stroke: #C4B5FD; } .ppd-model-kv .ppd-model-title { fill: #7C3AED; }
.ppd-model-ts rect { stroke: #6EE7B7; } .ppd-model-ts .ppd-model-title { fill: #047857; }
.ppd-model-fts rect { stroke: #FCD34D; } .ppd-model-fts .ppd-model-title { fill: #F59E0B; }
/* Internal connectors between model boxes — dashed and faint so the
data dots stand out as they hop between models. */
.ppd-conn-int { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; opacity: 0.45; stroke-dasharray: 3 3; }
/* Per-model dot colours for the internal bounce animation. */
.ppd-dot-graph { fill: #0066CC; stroke: #fff; stroke-width: 1; }
.ppd-dot-document { fill: #10B981; stroke: #fff; stroke-width: 1; }
.ppd-dot-vector { fill: #EF4444; stroke: #fff; stroke-width: 1; }
.ppd-dot-kv { fill: #7C3AED; stroke: #fff; stroke-width: 1; }
.ppd-dot-ts { fill: #047857; stroke: #fff; stroke-width: 1; }
.ppd-dot-fts { fill: #F59E0B; stroke: #fff; stroke-width: 1; }
.ppd-conn { stroke-width: 2; fill: none; stroke-linecap: round; }
.ppd-conn-back { stroke-dasharray: 5 5; opacity: 0.7; }
.ppd-conn-pg { stroke: #0066CC; opacity: 0.55; }
.ppd-conn-mongo { stroke: #65A30D; opacity: 0.55; }
.ppd-conn-neo4j { stroke: #7C3AED; opacity: 0.55; }
.ppd-conn-arcade { stroke: #0066CC; opacity: 0.7; }
.ppd-dot { stroke: #fff; stroke-width: 1; }
.ppd-dot-pg { fill: #0066CC; }
.ppd-dot-mongo { fill: #65A30D; }
.ppd-dot-neo4j { fill: #7C3AED; }
.ppd-dot-arcade { fill: #0066CC; }
.ppd-total rect { stroke-width: 1.5; }
.ppd-total text { font-size: 19px; font-weight: 700; }
.ppd-total-bad rect { fill: rgba(239, 68, 68, 0.08); stroke: #EF4444; }
.ppd-total-bad text { fill: #B91C1C; }
.ppd-total-good rect { fill: rgba(16, 185, 129, 0.08); stroke: #10B981; }
.ppd-total-good text { fill: #047857; }
@media (max-width: 700px) {
.ppd-svg { display: none; }
}
/* Home-page Tutorials section — ArcadeDB's equivalent of GraphAcademy.
Cards are taller than landing-cards because they carry a coloured
eyebrow tag plus a short blurb; 4 across on wide screens. */
.tutorial-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 1.25rem 0 0.5rem;
}
.tutorial-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 20px 18px;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tutorial-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 12px rgba(0, 102, 204, 0.10);
transform: translateY(-1px);
}
.tutorial-card-eyebrow {
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
}
.tutorial-card h3 {
margin: 8px 0 6px;
font-size: 1em;
font-weight: 700;
color: var(--color-text-primary);
}
.tutorial-card p {
font-size: 0.875em;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
@media (max-width: 1100px) { .tutorial-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .tutorial-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tutorial-cards { grid-template-columns: 1fr; } }
/* Home-page Academy section — links to free, certified courses on
arcadedb.com/academy. Cards carry an eyebrow tag (level + duration)
and a meta footer (module / lesson counts) on top of the regular
title + description. Visually adjacent to .tutorial-card but with a
tinted top accent so it reads as a distinct section. */
.academy-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 1.25rem 0 0.5rem;
}
.academy-card {
display: flex;
flex-direction: column;
position: relative;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 22px 20px 18px;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.academy-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 10px 10px 0 0;
background: linear-gradient(90deg, var(--color-primary), #5BC0EB);
}
.academy-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 12px rgba(0, 102, 204, 0.10);
transform: translateY(-1px);
}
.academy-card-eyebrow {
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
}
.academy-card h3 {
margin: 8px 0 6px;
font-size: 1.05em;
font-weight: 700;
color: var(--color-text-primary);
}
.academy-card p {
flex-grow: 1;
font-size: 0.9em;
color: var(--color-text-secondary);
margin: 0 0 10px;
line-height: 1.5;
}
.academy-card-meta {
font-size: 0.75em;
color: var(--color-text-secondary);
font-weight: 500;
}
@media (max-width: 900px) { .academy-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .academy-cards { grid-template-columns: 1fr; } }
/* Home-page Use Cases section — heavier than tutorial cards, with a
tag row at the bottom showing which features each project exercises. */
.usecase-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 1.25rem 0 0.5rem;
}
.usecase-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 22px 20px;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.usecase-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 12px rgba(0, 102, 204, 0.10);
transform: translateY(-1px);
}
.usecase-card h3 {
margin: 0 0 6px;
font-size: 1.05em;
font-weight: 700;
color: var(--color-text-primary);
}
.usecase-card p {
flex-grow: 1;
font-size: 0.9em;
color: var(--color-text-secondary);
margin: 0 0 12px;
line-height: 1.5;
}
.usecase-card-tags {
font-size: 0.75em;
color: var(--color-primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
@media (max-width: 900px) { .usecase-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .usecase-cards { grid-template-columns: 1fr; } }
.more-link {
text-align: right;
margin: 0 0 1.25rem;
}
.more-link a {
font-size: 0.9em;
font-weight: 600;
color: var(--color-primary);
}
/* Home-page Community & Resources section — compact 3-column links. */
.resource-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 1.25rem 0;
}
.resource-card {
display: block;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: 8px;
padding: 16px 18px;
text-decoration: none !important;
color: inherit !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
.resource-card:hover {
background: #fff;
border-color: var(--color-primary);
}
.resource-card h3 {
margin: 0 0 4px;
font-size: 1em;
font-weight: 700;
color: var(--color-text-primary);
}
.resource-card p {
font-size: 0.85em;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 700px) { .resource-cards { grid-template-columns: 1fr; } }
/* Chapter overview cards. Auto-generated by scripts/enrich-chapters.py
under each chapter.adoc landing page. */
.chapter-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin: 1.5rem 0;
}
.chapter-card {
display: block;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
text-decoration: none !important;
color: var(--color-text-primary) !important;
font-weight: 500;
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.chapter-card:hover {
border-color: var(--color-primary);
box-shadow: 0 1px 8px rgba(0, 102, 204, 0.10);
color: var(--color-primary) !important;
}
.chapter-card-title { display: block; font-family: var(--font-body); }
/* Cookie consent banner — fixed bottom-right pill, dismissed via the
button in cookie-banner.js. Hidden by default; the script flips
display:flex once it confirms the user hasn't already accepted. */
#arcadedb-cookie-banner {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
background: #1A1D23;
color: #CCCCCC;
border-radius: 8px;
padding: 1.2rem 1.4rem;
max-width: 340px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
font-size: 0.875rem;
line-height: 1.5;
flex-direction: column;
gap: 0.9rem;
}
#arcadedb-cookie-banner a { color: #5BC0EB; text-decoration: underline; }
#arcadedb-cookie-banner button {
align-self: flex-end;
background: #5BC0EB;
color: #1A1D23;
border: none;
border-radius: 5px;
padding: 0.45rem 1.2rem;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
}
#arcadedb-cookie-banner button:hover { background: #3aaad4; }