-
- + +
+
+
+ {page.data.title} + + {page.data.description} + +
+ {page.slugs.join('/') === 'start' ? ( + + ) : null}
diff --git a/src/docs/src/app/docs/layout.tsx b/src/docs/src/app/docs/layout.tsx index a373143bf..e4cbcb8a9 100644 --- a/src/docs/src/app/docs/layout.tsx +++ b/src/docs/src/app/docs/layout.tsx @@ -1,11 +1,24 @@ -import { source } from '@/lib/source'; import { DocsLayout } from 'fumadocs-ui/layouts/docs'; import { baseOptions } from '@/lib/layout.shared'; +import { source } from '@/lib/source'; export default function Layout({ children }: LayoutProps<'/docs'>) { return ( - - {children} - + <> + + Skip to content + + + {children} + + ); } diff --git a/src/docs/src/app/global.css b/src/docs/src/app/global.css index 3d8e7677e..42c61a1c2 100644 --- a/src/docs/src/app/global.css +++ b/src/docs/src/app/global.css @@ -5,6739 +5,288 @@ @theme { --font-sans: var(--font-oliphaunt-sans); --font-mono: var(--font-oliphaunt-mono); - --color-fd-background: hsl(200, 20%, 98%); - --color-fd-foreground: hsl(176, 26%, 10%); - --color-fd-card: hsl(0, 0%, 100%); - --color-fd-card-foreground: hsl(176, 26%, 10%); - --color-fd-popover: hsl(0, 0%, 100%); - --color-fd-popover-foreground: hsl(176, 26%, 10%); - --color-fd-primary: hsl(154, 76%, 27%); - --color-fd-primary-foreground: hsl(0, 0%, 100%); - --color-fd-secondary: hsl(184, 21%, 92%); - --color-fd-secondary-foreground: hsl(176, 26%, 12%); - --color-fd-muted: hsl(190, 10%, 94%); - --color-fd-muted-foreground: hsl(178, 12%, 34%); - --color-fd-accent: hsl(39, 88%, 87%); - --color-fd-accent-foreground: hsl(176, 26%, 10%); - --color-fd-border: hsla(184, 13%, 42%, 0.26); - --color-fd-ring: hsl(154, 76%, 27%); - --color-oliphaunt-tech: hsl(189, 78%, 38%); + --font-serif: var(--font-oliphaunt-serif); + --text-doc-title: 2.5rem; + --text-doc-title--line-height: 1.1; + --text-doc-heading: 1.125rem; + --text-doc-heading--line-height: 1.333333; + --radius-sm: 2px; + --radius-md: 4px; + --radius-lg: 4px; + --radius-xl: 6px; + --radius-2xl: 8px; + --color-fd-background: #fafafa; + --color-fd-foreground: #171717; + --color-fd-card: #ffffff; + --color-fd-card-foreground: #171717; + --color-fd-popover: #ffffff; + --color-fd-popover-foreground: #171717; + --color-fd-primary: #262626; + --color-fd-primary-foreground: #fafafa; + --color-fd-secondary: #f0f0f0; + --color-fd-secondary-foreground: #404040; + --color-fd-muted: #f0f0f0; + --color-fd-muted-foreground: #626262; + --color-fd-accent: #ededed; + --color-fd-accent-foreground: #171717; + --color-fd-border: #e2e2e2; + --color-fd-ring: #626262; } .dark { - --color-fd-background: hsl(168, 22%, 6%); - --color-fd-foreground: hsl(47, 24%, 92%); - --color-fd-card: hsl(168, 18%, 9%); - --color-fd-card-foreground: hsl(47, 24%, 92%); - --color-fd-popover: hsl(168, 20%, 7%); - --color-fd-popover-foreground: hsl(47, 24%, 92%); - --color-fd-primary: hsl(157, 74%, 56%); - --color-fd-primary-foreground: hsl(168, 26%, 7%); - --color-fd-secondary: hsl(176, 14%, 15%); - --color-fd-secondary-foreground: hsl(47, 24%, 92%); - --color-fd-muted: hsl(171, 13%, 13%); - --color-fd-muted-foreground: hsl(47, 10%, 66%); - --color-fd-accent: hsl(38, 86%, 57%); - --color-fd-accent-foreground: hsl(168, 26%, 7%); - --color-fd-border: hsla(166, 14%, 54%, 0.28); - --color-fd-ring: hsl(157, 74%, 56%); - --color-oliphaunt-tech: hsl(184, 82%, 58%); + --color-fd-background: #111111; + --color-fd-foreground: #ededed; + --color-fd-card: #191919; + --color-fd-card-foreground: #ededed; + --color-fd-popover: #1c1c1c; + --color-fd-popover-foreground: #ededed; + --color-fd-primary: #e5e5e5; + --color-fd-primary-foreground: #171717; + --color-fd-secondary: #242424; + --color-fd-secondary-foreground: #d4d4d4; + --color-fd-muted: #202020; + --color-fd-muted-foreground: #a3a3a3; + --color-fd-accent: #292929; + --color-fd-accent-foreground: #fafafa; + --color-fd-border: #303030; + --color-fd-ring: #a3a3a3; } html { scrollbar-gutter: stable; } - body { - font-family: var(--font-oliphaunt-sans), ui-sans-serif, system-ui, sans-serif; - background: - linear-gradient( - 180deg, - color-mix(in oklab, var(--color-fd-background), var(--color-fd-primary) 5%) 0, - var(--color-fd-background) 420px - ), - var(--color-fd-background); - color: var(--color-fd-foreground); - font-feature-settings: - "ss01" 1, - "cv10" 1; - letter-spacing: 0; -} - -* { - box-sizing: border-box; + font-family: var(--font-sans), system-ui, sans-serif; + font-weight: 400; } - -*::before, -*::after { - box-sizing: border-box; -} - code, -kbd, pre, -samp { - font-family: var(--font-oliphaunt-mono), ui-monospace, SFMono-Regular, Menlo, monospace; -} - -html > body[data-scroll-locked] { - margin-right: 0px !important; - --removed-body-scroll-bar-size: 0px !important; -} - -#nd-sidebar { - background: - linear-gradient( - 180deg, - color-mix(in oklab, var(--color-fd-card), transparent 0%), - var(--color-fd-background) - ), - var(--color-fd-card); -} - -#nd-sidebar a, -#nd-sidebar button { - border-radius: 8px; -} - -[data-card] { - border-radius: 8px; -} - -.prose table { - font-size: 0.925rem; -} - -.prose .not-prose { - max-width: 100%; -} - -.prose .not-prose :where(a, div, pre, code) { - min-width: 0; -} - -.prose h2 { - margin-top: 2.2rem; - scroll-margin-top: 6rem; -} - -.prose h3 { - scroll-margin-top: 6rem; -} - -.prose a { - text-decoration-thickness: 0.08em; - text-underline-offset: 0.18em; -} - -.prose th { - background: var(--color-fd-muted); - color: var(--color-fd-foreground); - font-weight: 600; -} - -.prose td, -.prose th { - vertical-align: top; -} - -.prose :where(table) { - overflow-wrap: normal; -} - -@media (max-width: 640px) { - .prose { - overflow-wrap: anywhere; - } - - .prose table { - display: block; - max-width: 100%; - overflow-x: auto; - white-space: nowrap; - } -} - -.prose pre { - border: 0; - border-left: 2px solid color-mix(in oklab, var(--color-fd-primary), transparent 34%); - border-radius: 8px; - background: color-mix(in oklab, var(--color-fd-card), var(--color-fd-background) 18%); - box-shadow: none; -} - -.prose code:not(pre code) { - border-radius: 4px; - background: color-mix(in oklab, var(--color-fd-muted), transparent 20%); - padding: 0.08rem 0.26rem; - font-size: 0.88em; -} - -.oliphaunt-home-hero { - --color-fd-foreground: hsl(48, 24%, 94%); - --color-fd-muted-foreground: hsl(47, 8%, 66%); - --color-fd-card: hsl(166, 18%, 10%); - --color-fd-background: hsl(168, 22%, 7%); - --color-fd-border: hsla(160, 12%, 76%, 0.18); - - position: relative; - isolation: isolate; - color: var(--color-fd-foreground); - background: - linear-gradient( - 90deg, - color-mix(in oklab, var(--color-fd-border), transparent 58%) 1px, - transparent 1px - ), - linear-gradient( - 180deg, - color-mix(in oklab, var(--color-fd-border), transparent 68%) 1px, - transparent 1px - ), - linear-gradient(180deg, hsl(168, 22%, 7%), hsl(166, 20%, 8%)); - background-size: - 56px 56px, - 56px 56px, - auto; -} - -.oliphaunt-home-hero::before { - position: absolute; - inset: 0; - z-index: -1; - background: - repeating-linear-gradient( - 115deg, - transparent 0 10px, - color-mix(in oklab, var(--color-fd-primary), transparent 94%) 10px 11px - ), - linear-gradient(180deg, transparent, var(--color-fd-background)); - content: ""; - mask-image: linear-gradient(180deg, black, transparent 76%); -} - -.oliphaunt-section-kicker { - display: inline-flex; - align-items: center; - gap: 0.5rem; - color: var(--color-fd-muted-foreground); - font-size: 0.8125rem; - font-weight: 500; -} - -.oliphaunt-section-kicker::before { - width: 0.55rem; - height: 0.55rem; - border: 1px solid var(--color-fd-primary); - background: color-mix(in oklab, var(--color-fd-accent), transparent 35%); - content: ""; -} - -.oliphaunt-rail-label { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.55rem; - color: var(--color-fd-muted-foreground); - font-size: 0.72rem; - font-weight: 600; - text-transform: uppercase; -} - -.oliphaunt-rail-label span { - display: inline-flex; - align-items: center; - gap: 0.55rem; -} - -.oliphaunt-rail-label span:not(:last-child)::after { - color: color-mix(in oklab, var(--color-fd-primary), var(--color-fd-muted-foreground) 50%); - content: "/"; -} - -.oliphaunt-primary-action, -.oliphaunt-secondary-action, -.oliphaunt-arrow-link { - display: inline-flex; - min-height: 2.6rem; - align-items: center; - justify-content: center; - gap: 0.5rem; - border-radius: 8px; - font-size: 0.875rem; - font-weight: 600; - transition: - transform 160ms ease, - border-color 160ms ease, - background-color 160ms ease, - color 160ms ease; -} - -.oliphaunt-primary-action { - border: 1px solid color-mix(in oklab, var(--color-fd-primary), black 8%); - background: var(--color-fd-primary); - color: var(--color-fd-primary-foreground); - padding: 0.55rem 1rem; -} - -.oliphaunt-secondary-action { - border: 1px solid var(--color-fd-border); - background: color-mix(in oklab, var(--color-fd-card), transparent 8%); - color: var(--color-fd-foreground); - padding: 0.55rem 1rem; -} - -.oliphaunt-arrow-link { - width: fit-content; - margin-top: 1.5rem; - color: var(--color-fd-foreground); +kbd { + font-family: var(--font-mono), monospace; } - -.oliphaunt-primary-action:hover, -.oliphaunt-secondary-action:hover, -.oliphaunt-arrow-link:hover { - transform: translateY(-1px); +a, +button { + -webkit-tap-highlight-color: transparent; } - -.oliphaunt-primary-action:focus-visible, -.oliphaunt-secondary-action:focus-visible, -.oliphaunt-arrow-link:focus-visible, -.oliphaunt-runtime-chip:focus-visible, -.oliphaunt-maintainer-row:focus-visible { +:focus-visible { outline: 2px solid var(--color-fd-ring); outline-offset: 3px; } - -.oliphaunt-product-visual { - overflow: hidden; - border: 1px solid var(--color-fd-border); - border-radius: 8px; - background: color-mix(in oklab, var(--color-fd-card), transparent 3%); - box-shadow: - inset 0 1px 0 color-mix(in oklab, white, transparent 82%), - 0 24px 70px color-mix(in oklab, var(--color-fd-foreground), transparent 92%); -} - -.oliphaunt-product-visual__bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-bottom: 1px solid var(--color-fd-border); - background: color-mix(in oklab, var(--color-fd-muted), transparent 34%); - padding: 0.75rem 1rem; - color: var(--color-fd-muted-foreground); - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; +::selection { + background: var(--color-fd-foreground); + color: var(--color-fd-background); } -.oliphaunt-product-visual__bar--desktop { - display: none; +#nd-sidebar { + background: var(--color-fd-background); } - -.oliphaunt-product-visual__body { - display: grid; - gap: 0; - padding: 1rem; +#nd-docs-layout { + --fd-layout-width: 78rem; } - -.oliphaunt-runtime-stack { - display: grid; - gap: 1px; - overflow: hidden; - border: 1px solid var(--color-fd-border); - border-radius: 8px; - background: var(--color-fd-border); +#nd-sidebar a, +#nd-sidebar button { + border-radius: var(--radius-sm); } - -.oliphaunt-runtime-chip, -.oliphaunt-maintainer-row { - display: grid; - min-width: 0; - align-items: center; - gap: 0.85rem; - border-radius: 8px; - transition: - background-color 160ms ease, - border-color 160ms ease, - transform 160ms ease; +#nd-sidebar a { + line-height: 24px; } - -.oliphaunt-runtime-chip { - grid-template-columns: auto auto minmax(0, 1fr); - border: 0; - border-radius: 0; - background: color-mix(in oklab, var(--color-fd-background), transparent 12%); - padding: 0.85rem 0.9rem; - color: var(--color-fd-muted-foreground); - font-size: 0.78rem; - font-weight: 600; +#nd-sidebar a[data-active="true"] { + font-weight: 500; } - -.oliphaunt-runtime-chip__index { - color: color-mix(in oklab, var(--color-fd-primary), var(--color-fd-foreground) 18%); - font-size: 0.7rem; +#nd-sidebar :has(> [data-theme-toggle]) { + align-self: flex-start; } - -.oliphaunt-runtime-chip code { - overflow: hidden; - text-overflow: ellipsis; - color: inherit; - font-size: inherit; +#nd-sidebar [data-theme-toggle] { + border-inline-start: 0; } - -.oliphaunt-runtime-chip:hover, -.oliphaunt-maintainer-row:hover { - border-color: color-mix(in oklab, var(--color-fd-primary), var(--color-fd-border) 45%); - background: color-mix(in oklab, var(--color-fd-accent), var(--color-fd-card) 72%); +#toc-title { + gap: 8px; + font-family: var(--font-mono), monospace; + font-size: 12px; + line-height: 16px; } - -.oliphaunt-mode-pill { +.oliphaunt-wordmark { display: inline-flex; align-items: center; - border: 1px solid var(--color-fd-border); - border-radius: 999px; - background: color-mix(in oklab, var(--color-fd-card), transparent 12%); - color: var(--color-fd-muted-foreground); - font-size: 0.68rem; - font-weight: 600; - line-height: 1; -} - -.oliphaunt-mode-pill { - padding: 0.32rem 0.48rem; -} - -.oliphaunt-visual-footer { - display: grid; - gap: 1px; - overflow: hidden; - border: 1px solid var(--color-fd-border); - border-radius: 8px; - background: var(--color-fd-border); - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.oliphaunt-visual-footer > div { - min-width: 0; - background: color-mix(in oklab, var(--color-fd-background), transparent 15%); - padding: 0.8rem; -} - -.oliphaunt-visual-footer p { - color: var(--color-fd-muted-foreground); - font-size: 0.68rem; - font-weight: 600; - text-transform: uppercase; -} - -.oliphaunt-visual-footer span { - display: block; - margin-top: 0.35rem; - overflow-wrap: anywhere; - color: var(--color-fd-foreground); - font-size: 0.82rem; + gap: 12px; + font-family: var(--font-sans), system-ui, sans-serif; + font-size: 18px; font-weight: 600; + line-height: 24px; + letter-spacing: -0.04em; } - -.oliphaunt-icon-tile { - display: inline-flex; - width: 2.25rem; - height: 2.25rem; - flex: 0 0 auto; - align-items: center; - justify-content: center; - border: 1px solid var(--color-fd-border); - border-radius: 8px; - background: - linear-gradient( - 135deg, - color-mix(in oklab, var(--color-fd-primary), transparent 84%), - color-mix(in oklab, var(--color-oliphaunt-tech), var(--color-fd-accent) 38%) - ), - var(--color-fd-background); - color: var(--color-fd-foreground); -} - -.oliphaunt-maintainer-row { - grid-template-columns: auto minmax(0, 1fr) auto; - border-radius: 0; - padding: 1rem; -} - -.oliphaunt-doc-page { - color: var(--color-fd-foreground); +.oliphaunt-mark { + width: 24px; + height: 24px; } .oliphaunt-doc-header { - position: relative; - isolation: isolate; - margin-bottom: 2.25rem; - border-bottom: 1px solid color-mix(in oklab, var(--color-fd-border), transparent 18%); - padding: 0 0 1.5rem; -} - -.oliphaunt-doc-header::after { - content: none; -} - -.oliphaunt-doc-header__path { - margin: 0; - color: var(--color-fd-muted-foreground); - font-size: 0.72rem; - font-weight: 600; - text-transform: uppercase; + margin-bottom: 32px; } - .oliphaunt-doc-header__path ol { display: flex; flex-wrap: wrap; - align-items: center; - gap: 0.5rem; - margin: 0; + gap: 8px; padding: 0; + margin: 0; list-style: none; + font-family: var(--font-mono), monospace; + font-size: 12px; + line-height: 16px; + color: var(--color-fd-muted-foreground); } - -.oliphaunt-doc-header__path li { - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.oliphaunt-doc-header__path li:not(:last-child)::after { - color: color-mix(in oklab, var(--color-fd-primary), var(--color-fd-muted-foreground) 50%); +.oliphaunt-doc-header__path li + li::before { content: "/"; + margin-inline-end: 8px; + color: var(--color-fd-muted-foreground); } - -.oliphaunt-doc-header__path a { - text-decoration: none; -} - -.oliphaunt-doc-header__path a:hover { - color: var(--color-fd-foreground); +.oliphaunt-title-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 32px; +} +.oliphaunt-engraving { + width: 192px; + height: 160px; + object-fit: contain; + object-position: top; + flex-shrink: 0; + pointer-events: none; } - .oliphaunt-doc-title { - max-width: 50rem; - margin-top: 1rem !important; - margin-bottom: 0 !important; - font-size: 3rem !important; - line-height: 0.95 !important; + margin: 0; + font-family: var(--font-serif), Georgia, serif; + font-size: var(--text-doc-title); + font-weight: 400; + line-height: var(--text-doc-title--line-height); + letter-spacing: 0; + text-wrap: balance; } - -.oliphaunt-doc-header--compact { - padding-bottom: 1.35rem; +.oliphaunt-doc-description { + margin: 16px 0 0; + max-width: 60ch; + font-size: 16px; + line-height: 1.5; + color: var(--color-fd-muted-foreground); + text-wrap: pretty; } - -.oliphaunt-doc-header--compact .oliphaunt-doc-title { - font-size: 2.625rem !important; +.oliphaunt-doc-body { + font-size: 16px; + line-height: 1.5; + overflow-wrap: break-word; } - -.oliphaunt-doc-header--compact .oliphaunt-doc-description { - max-width: 50rem; +.oliphaunt-doc-body h2 { + margin-block: 48px 16px; + font-family: var(--font-sans), system-ui, sans-serif; + font-size: var(--text-doc-heading); + font-weight: 500; + line-height: var(--text-doc-heading--line-height); } - -.oliphaunt-doc-description { - max-width: 42rem; - margin-top: 1.25rem !important; - margin-bottom: 0 !important; - color: var(--color-fd-muted-foreground); - font-size: 1.05rem !important; - line-height: 1.7 !important; +.oliphaunt-doc-body h3 { + margin-block: 32px 16px; + font-size: 1rem; + font-weight: 500; + line-height: 1.5; } - -.oliphaunt-doc-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: 1.25rem; +.oliphaunt-doc-body > :where(p, ul, ol, figure) { + margin-block: 16px; } - -.oliphaunt-doc-body { - --tw-prose-body: var(--color-fd-foreground); - --tw-prose-headings: var(--color-fd-foreground); - --tw-prose-links: var(--color-fd-foreground); - --tw-prose-bold: var(--color-fd-foreground); - font-size: 0.98rem; - line-height: 1.75; +.oliphaunt-doc-body > :first-child { + margin-top: 0; } - -.oliphaunt-doc-body > :where(p, ul, ol) { - max-width: 42rem; +.oliphaunt-doc-body > :last-child { + margin-bottom: 0; } - -.oliphaunt-doc-body > :where(h2) { - margin-top: 2.75rem; - font-size: 1.75rem; - line-height: 1.15; +.oliphaunt-doc-body :where(h2, h3) { + letter-spacing: 0; + text-wrap: balance; + scroll-margin-top: 6rem; } - -.oliphaunt-doc-body > :where(h3) { - font-size: 1.25rem; +.oliphaunt-doc-body :where(p, li) { + max-width: 75ch; } - -.oliphaunt-mdx-panel { - border-color: color-mix(in oklab, var(--color-fd-border), transparent 10%); - background: var(--color-fd-card); - box-shadow: none; +.oliphaunt-doc-body strong { + font-weight: 500; } - -.oliphaunt-mdx-panel__header { - background: color-mix(in oklab, var(--color-fd-muted), transparent 34%); +.oliphaunt-doc-body a { + font-weight: 400; + text-underline-offset: 4px; + text-underline-position: from-font; + text-decoration-thickness: from-font; } - -.oliphaunt-mdx-icon { - background: - linear-gradient( - 135deg, - color-mix(in oklab, var(--color-fd-primary), transparent 86%), - color-mix(in oklab, var(--color-oliphaunt-tech), transparent 85%) - ), - var(--color-fd-background); +.oliphaunt-doc-body pre { + font-size: 13px; + line-height: 1.846154; } - -.oliphaunt-inline-code { - display: inline-block; - max-width: 100%; - overflow-wrap: anywhere; - border-radius: 4px; - background: color-mix(in oklab, var(--color-fd-muted), transparent 18%); - padding: 0.08rem 0.3rem; - color: var(--color-fd-muted-foreground); - font-size: 0.78rem; +.oliphaunt-doc-body figure { + border-radius: var(--radius-md); + box-shadow: none; } - -.oliphaunt-code-block { - overflow-x: auto; - margin: 0.5rem 0 0; - border: 0; - border-left: 2px solid color-mix(in oklab, var(--color-fd-primary), transparent 34%); - border-radius: 8px; - background: color-mix(in oklab, var(--color-fd-card), var(--color-fd-background) 18%); - padding: 0.85rem 1rem; - color: var(--color-fd-foreground); - font-size: 0.78rem; - line-height: 1.7; +.oliphaunt-doc-body table { + font-size: 14px; } - -.oliphaunt-code-block code { - display: block; - min-width: max-content; - background: transparent; - padding: 0; +.oliphaunt-doc-body th { + white-space: normal; + font-weight: 500; } - -.oliphaunt-mdx-step-grid > div, -.oliphaunt-mdx-step-grid > li, -.oliphaunt-first-query .bg-fd-background { - min-width: 0; +.oliphaunt-doc-body :where(td, th) { + min-width: 120px; } - -.oliphaunt-first-query pre { - min-height: 9.5rem; - margin: 0; +.oliphaunt-doc-body [role="tablist"] { + flex-wrap: wrap; + height: auto; } - -.oliphaunt-query-example + .oliphaunt-query-example { - border-top: 1px solid var(--color-fd-border); +.oliphaunt-doc-body [role="tab"] { + min-height: 40px; + font-weight: 400; } - -@media (max-width: 639px) { - .oliphaunt-home-hero > div { - gap: 1.75rem; - padding-top: 2rem; - padding-bottom: 2rem; - } - - .oliphaunt-product-visual__body { - padding: 0.75rem; - } - - .oliphaunt-visual-footer { - margin-top: 1px; - } - - .oliphaunt-runtime-stack { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .oliphaunt-runtime-chip { - grid-template-columns: auto minmax(0, 1fr); - gap: 0.45rem; - padding: 0.55rem; - font-size: 0.68rem; - } - - .oliphaunt-runtime-chip svg { - display: none; - } - - .oliphaunt-product-visual { - margin-top: 0.5rem; - } - - .oliphaunt-doc-header { - padding: 0 0 1.35rem; - } - - .oliphaunt-doc-actions > * { - flex: 1 1 auto; - } - - .oliphaunt-first-query pre { - min-height: 0; - max-height: 18rem; - } +.sdk-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); + column-gap: 32px; + margin-block: 16px 32px; } - -@media (min-width: 640px) { - .oliphaunt-product-visual__bar--desktop { - display: flex; - } - - .oliphaunt-doc-header { - padding-bottom: 2rem; - } - - .oliphaunt-doc-header--compact { - padding-bottom: 1.7rem; - } - - .oliphaunt-doc-title { - font-size: 4.25rem !important; - } - - .oliphaunt-doc-header--compact .oliphaunt-doc-title { - font-size: 3.35rem !important; - } - - .oliphaunt-doc-description { - font-size: 1.125rem !important; - } +.sdk-link { + min-height: 80px; + padding-block: 16px calc(16px - 1px); } -@media (min-width: 1024px) { - .oliphaunt-doc-header { - padding-bottom: 2.4rem; +@media (hover: hover) { + .sdk-link:hover { + color: var(--color-fd-accent-foreground); } - - .oliphaunt-doc-header--compact { - padding-bottom: 2rem; + .oliphaunt-doc-header__path a:hover { + text-decoration: underline; } - - .oliphaunt-doc-title { - font-size: 5.35rem !important; +} +@media (min-width: 48rem) { + #nd-docs-layout { + --fd-sidebar-width: 16rem; } - - .oliphaunt-doc-header--compact .oliphaunt-doc-title { - font-size: 4rem !important; +} +@media (min-width: 80rem) { + #nd-docs-layout { + --fd-toc-width: 14rem; } - - .oliphaunt-product-visual__body { - grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); +} +@media (max-width: 40rem) { + .oliphaunt-engraving { + display: none; } - - .oliphaunt-visual-footer { - border-left: 0; - border-radius: 0 8px 8px 0; + input { + font-size: 16px; } - - .oliphaunt-runtime-stack { - border-radius: 8px 0 0 8px; - } -} - -@media (prefers-reduced-motion: no-preference) { - .oliphaunt-product-visual { - animation: oliphaunt-panel-rise 520ms ease-out both; - } -} - -@keyframes oliphaunt-panel-rise { - from { - opacity: 0; - transform: translateY(12px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Landing page ------------------------------------------------------------- */ - -.oliphaunt-wordmark { - display: inline-flex; - align-items: center; - gap: 0.65rem; - font-weight: 600; - letter-spacing: -0.025em; -} - -.oliphaunt-wordmark__mark { - display: inline-flex; - width: 1.75rem; - height: 1.75rem; - align-items: center; - justify-content: center; - border-radius: 0.55rem; - background: #12241e; - color: #f3f0e8; -} - -.oliphaunt-wordmark__mark .oliphaunt-mark { - width: 1.25rem; - height: 1.25rem; -} - -body:has(.home-page) { - --home-paper: #f3f2ec; - --home-surface: #fbfaf6; - --home-surface-raised: #fffefa; - --home-soft: #e8e7df; - --home-ink: #0d1a16; - --home-ink-soft: #14231e; - --home-text: #10201a; - --home-muted: #5c6761; - --home-line: rgb(16 32 26 / 13%); - --home-line-strong: rgb(16 32 26 / 20%); - --home-green: #1d8a5a; - --home-green-deep: #11613d; - --home-green-bright: #54d394; - --home-green-wash: #dcece2; - --home-amber: #e3a33c; - --home-amber-wash: #f1e6d1; - --home-coral: #e47754; - --home-blue: #4f83ab; - --home-white: #f5f2e9; - --home-radius: 1rem; - - background: var(--home-paper); -} - -html.dark body:has(.home-page) { - --home-paper: #0b1210; - --home-surface: #101916; - --home-surface-raised: #14201c; - --home-soft: #17221e; - --home-ink: #06100c; - --home-ink-soft: #0d1a16; - --home-text: #edf0e9; - --home-muted: #a0aaa4; - --home-line: rgb(235 240 232 / 12%); - --home-line-strong: rgb(235 240 232 / 20%); - --home-green: #53ce91; - --home-green-deep: #318c61; - --home-green-bright: #67dca0; - --home-green-wash: #163026; - --home-amber: #efb557; - --home-amber-wash: #302719; - --home-coral: #ee8868; - --home-blue: #77a9ce; - --home-white: #f5f2e9; -} - -html.dark body:has(.home-page) .home-sdk-rail, -html.dark body:has(.home-page) .home-sdk-section { - background: #111b17; -} - -html.dark body:has(.home-page) .home-use-cases { - background: #0d1613; -} - -html.dark body:has(.home-page) .home-runtime-section { - background: #07100d; -} - -html.dark body:has(.home-page) .home-examples { - background: #0d1512; -} - -html.dark body:has(.home-page) .home-lifecycle-visual__recovery code, -html.dark body:has(.home-page) .home-example-card > p:first-child, -html.dark body:has(.home-page) .home-example-card--schema > div > p { - color: var(--home-green-bright); -} - -html.dark body:has(.home-page) .home-wasix-mark { - color: #aa9cff; -} - -body:has(.home-page) #nd-nav { - height: 4rem; -} - -body:has(.home-page) #nd-nav > div { - border-color: var(--home-line); - background: color-mix(in srgb, var(--home-paper), transparent 8%); - backdrop-filter: blur(18px) saturate(1.2); -} - -body:has(.home-page) #nd-nav nav { - height: 4rem; - padding-inline: clamp(1rem, 3vw, 2rem); -} - -body:has(.home-page) #nd-nav nav > ul a { - position: relative; - color: var(--home-muted); - font-size: 0.8rem; -} - -body:has(.home-page) #nd-nav nav > ul a:hover { - color: var(--home-text); -} - -.home-page { - overflow: clip; - background: var(--home-paper); - color: var(--home-text); -} - -.home-page :where(a, button) { - -webkit-tap-highlight-color: transparent; - touch-action: manipulation; -} - -.home-page :where(a, button):focus-visible { - outline: 2px solid var(--home-green); - outline-offset: 3px; -} - -.home-shell { - width: min(100%, 86rem); - margin-inline: auto; - padding-inline: clamp(1.15rem, 3vw, 2rem); -} - -.home-hero { - --home-hero-text: #f3f1e9; - --home-hero-muted: #aab5af; - --home-hero-line: rgb(237 243 236 / 14%); - - position: relative; - color: var(--home-hero-text); - background: #08120f; -} - -.home-hero::after { - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgb(84 211 148 / 55%), transparent); - content: ""; -} - -.home-hero__grid { - display: grid; - min-height: min(54rem, calc(100svh - 4rem)); - grid-template-columns: minmax(0, 0.86fr) minmax(38rem, 1.14fr); - align-items: center; - gap: clamp(3rem, 6vw, 6.5rem); - padding-block: clamp(4.5rem, 9vw, 8rem); -} - -.home-hero__copy { - position: relative; - z-index: 2; -} - -.home-hero__copy h1 { - max-width: 48rem; - margin: 0; - font-size: clamp(4.25rem, 7vw, 7.2rem); - font-weight: 600; - letter-spacing: -0.075em; - line-height: 0.86; -} - -.home-hero__copy h1 span { - display: block; - color: #8fc9aa; -} - -.home-hero__copy h1 .home-hero__product { - display: flex; - align-items: center; - gap: 0.18em; - color: var(--home-hero-text); - font-size: 0.82em; - white-space: nowrap; -} - -.home-hero__product em { - display: inline-grid; - min-width: 1.7em; - height: 1.7em; - place-items: center; - border: 1px solid rgb(143 201 170 / 42%); - border-radius: 50%; - color: #8fc9aa; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.26em; - font-style: normal; - font-weight: 600; - letter-spacing: 0; -} - -.home-hero__copy > p { - max-width: 40rem; - margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; - color: #c0cac4; - font-size: clamp(1rem, 1.35vw, 1.18rem); - line-height: 1.68; - text-wrap: pretty; -} - -.home-actions { - display: flex; - flex-wrap: wrap; - gap: 0.7rem; - margin-top: 2.25rem; -} - -.home-button { - display: inline-flex; - min-height: 3rem; - align-items: center; - justify-content: center; - gap: 0.55rem; - border: 1px solid transparent; - border-radius: 0.65rem; - padding: 0.7rem 1rem; - font-size: 0.82rem; - font-weight: 600; - letter-spacing: -0.01em; - transition: - transform 150ms ease, - border-color 150ms ease, - background-color 150ms ease, - color 150ms ease; -} - -.home-button svg { - width: 1rem; - height: 1rem; - transition: transform 150ms ease; -} - -.home-button:hover { - transform: translateY(-1px); -} - -.home-button:hover svg { - transform: translateX(2px); -} - -.home-page :where(button, .home-button, .home-card-link, .home-example-card a):active { - opacity: 0.78; -} - -.home-button--primary { - background: var(--home-green-bright); - color: #07130e; -} - -.home-button--primary:hover { - background: #68e0a4; -} - -.home-button--secondary { - border-color: var(--home-hero-line); - background: rgb(255 255 255 / 5%); - color: var(--home-hero-text); -} - -.home-button--secondary:hover { - border-color: rgb(255 255 255 / 28%); - background: rgb(255 255 255 / 9%); -} - -.home-button--light { - background: var(--home-white); - color: #0a1712; -} - -.home-button--dark-quiet { - border-color: rgb(255 255 255 / 14%); - background: rgb(255 255 255 / 6%); - color: var(--home-white); -} - -.home-hero-visual { - position: relative; - z-index: 1; - overflow: hidden; - margin: 0; - border: 1px solid var(--home-hero-line); - border-radius: 1.15rem; - background: #0c1915; - box-shadow: - 0 3rem 8rem rgb(0 0 0 / 32%), - inset 0 1px rgb(255 255 255 / 5%); -} - -.home-window-bar { - display: grid; - min-height: 3.25rem; - grid-template-columns: 1fr auto 1fr; - align-items: center; - gap: 1rem; - border-bottom: 1px solid var(--home-hero-line); - padding: 0 1rem; - color: #74827b; - font-size: 0.68rem; -} - -.home-window-bar > span:last-child { - justify-self: end; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; -} - -.home-window-bar > code { - color: #aeb9b3; - font-size: 0.68rem; -} - -.home-window-dots { - display: flex; - gap: 0.34rem; -} - -.home-window-dots i { - width: 0.42rem; - height: 0.42rem; - border-radius: 50%; - background: #34433d; -} - -.home-window-dots i:nth-child(1) { - background: #d57558; -} - -.home-window-dots i:nth-child(2) { - background: #dca847; -} - -.home-window-dots i:nth-child(3) { - background: #4fad7a; -} - -.home-hero-visual__stage { - display: grid; - min-height: 27rem; - grid-template-columns: minmax(15rem, 1fr) 4.7rem minmax(12rem, 0.78fr); - align-items: center; - padding: clamp(1.15rem, 2.5vw, 2rem); -} - -.home-query-card, -.home-root-card { - overflow: hidden; - border: 1px solid rgb(231 239 233 / 13%); - border-radius: 0.8rem; - background: #0a1512; - box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 22%); -} - -.home-query-card__bar, -.home-root-card__head { - display: flex; - min-height: 2.55rem; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-bottom: 1px solid rgb(231 239 233 / 11%); - padding: 0 0.8rem; - color: #97a49d; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.68rem; -} - -.home-status { - display: inline-flex; - align-items: center; - gap: 0.4rem; - color: #7fbf9a; -} - -.home-status i { - width: 0.36rem; - height: 0.36rem; - border-radius: 50%; - background: var(--home-green-bright); - box-shadow: 0 0 0 0.2rem rgb(84 211 148 / 10%); -} - -.home-query-run { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - gap: 0.4rem; - border: 1px solid rgb(84 211 148 / 20%); - border-radius: 999px; - background: rgb(84 211 148 / 6%); - padding: 0.35rem 0.55rem; - color: #83cba4; - cursor: pointer; - font: inherit; - font-size: 0.6rem; - transition: - border-color 150ms ease, - background-color 150ms ease, - color 150ms ease; -} - -.home-query-run:hover:not(:disabled) { - border-color: rgb(84 211 148 / 38%); - background: rgb(84 211 148 / 11%); - color: #a2dfbd; -} - -.home-query-run:disabled { - cursor: wait; -} - -.home-query-run i { - width: 0.36rem; - height: 0.36rem; - border-radius: 50%; - background: var(--home-green-bright); - box-shadow: 0 0 0 0.2rem rgb(84 211 148 / 10%); -} - -.home-query-card pre { - overflow: hidden; - margin: 0; - border: 0; - border-radius: 0; - background: transparent; - padding: 1.15rem 1rem; - box-shadow: none; -} - -.home-query-card pre code { - display: grid; - color: #bcc8c1; - font-size: clamp(0.68rem, 0.75vw, 0.74rem); - line-height: 1.75; -} - -.home-query-card pre span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.home-query-card pre b { - color: #78a9cf; - font-weight: 600; -} - -.home-query-card pre em { - color: #e2a65a; - font-style: normal; -} - -.home-query-result { - display: grid; - border-top: 1px solid rgb(231 239 233 / 10%); - padding: 0.45rem 0.65rem 0.65rem; -} - -.home-query-result > div { - display: grid; - min-width: 0; - grid-template-columns: minmax(0, 1fr) auto; - gap: 1rem; - border-bottom: 1px solid rgb(231 239 233 / 7%); - padding: 0.5rem 0.35rem; - color: #adbbb3; - font-size: 0.7rem; -} - -.home-query-result > div:first-child { - color: #829088; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.62rem; - text-transform: uppercase; -} - -.home-query-result > div:last-child { - border-bottom: 0; -} - -.home-query-result code { - color: #7ca78e; - font-size: inherit; -} - -.home-query-result > div:not(:first-child) { - transition: - opacity 220ms ease, - transform 280ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-hero-visual[data-flow-phase="ready"] .home-query-result > div:not(:first-child), -.home-hero-visual[data-flow-phase="running"] .home-query-result > div:not(:first-child) { - visibility: hidden; - opacity: 0; - transform: translateY(0.25rem); -} - -.home-hero-visual[data-flow-phase="complete"] .home-query-result > div:not(:first-child) { - visibility: visible; - opacity: 1; - transform: translateY(0); -} - -.home-runtime-route { - position: relative; - display: flex; - height: 4rem; - align-items: center; - justify-content: center; -} - -.home-runtime-route__line { - position: absolute; - right: -1px; - left: -1px; - height: 1px; - background: rgb(84 211 148 / 31%); -} - -.home-runtime-route__line::before, -.home-runtime-route__line::after { - position: absolute; - top: -0.17rem; - width: 0.38rem; - height: 0.38rem; - border: 1px solid rgb(84 211 148 / 55%); - border-radius: 50%; - background: #0c1915; - content: ""; -} - -.home-runtime-route__line::before { - left: 0; -} - -.home-runtime-route__line::after { - right: 0; -} - -.home-runtime-route__packet { - position: absolute; - z-index: 1; - left: 0; - width: 0.55rem; - height: 0.55rem; - border: 2px solid #0c1915; - border-radius: 50%; - background: var(--home-green-bright); - box-shadow: 0 0 0 0.25rem rgb(84 211 148 / 10%); -} - -.home-hero-visual[data-flow-phase="complete"] .home-runtime-route__packet { - left: calc(100% - 0.55rem); -} - -.home-runtime-route > code { - position: relative; - z-index: 2; - border: 1px solid rgb(84 211 148 / 24%); - border-radius: 999px; - background: #0c1915; - padding: 0.28rem 0.45rem; - color: #79b493; - font-size: 0.62rem; - letter-spacing: 0.06em; -} - -.home-root-card__head > span { - display: inline-flex; - align-items: center; - gap: 0.45rem; - color: #c5d0ca; -} - -.home-root-card__head svg { - width: 0.9rem; - height: 0.9rem; - color: var(--home-green-bright); -} - -.home-root-card__head small { - color: #6f8177; - font-size: 0.62rem; -} - -.home-root-card__body { - display: grid; - gap: 1rem; - padding: 1rem; -} - -.home-wal-rings { - position: relative; - display: grid; - width: 7.6rem; - max-width: 100%; - aspect-ratio: 1; - place-items: center; - justify-self: center; -} - -.home-wal-rings > span { - position: absolute; - border: 1px solid rgb(84 211 148 / 20%); - border-radius: 50%; -} - -.home-wal-rings > span:nth-child(1) { - inset: 0; -} - -.home-wal-rings > span:nth-child(2) { - inset: 0.7rem; -} - -.home-wal-rings > span:nth-child(3) { - inset: 1.4rem; - border-color: rgb(84 211 148 / 45%); -} - -.home-wal-rings > div { - position: relative; - display: grid; - width: 3.1rem; - height: 3.1rem; - place-items: center; - border: 1px solid rgb(84 211 148 / 40%); - border-radius: 50%; - background: #12251e; - color: #8bd3aa; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.68rem; - font-weight: 600; -} - -.home-root-card__body ul { - display: grid; - margin: 0; - padding: 0; - list-style: none; -} - -.home-root-card__body li { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-top: 1px solid rgb(231 239 233 / 8%); - padding: 0.43rem 0; - color: #8e9d95; - font-size: 0.62rem; -} - -.home-root-card__body li code { - color: #829088; - font-size: inherit; -} - -.home-hero-wal-row { - border-radius: 0.3rem; - box-shadow: inset 2px 0 transparent; - transition: - background-color 220ms ease, - box-shadow 220ms ease; -} - -.home-hero-visual[data-flow-phase="complete"] .home-hero-wal-row { - background: rgb(84 211 148 / 9%); - box-shadow: inset 2px 0 #54d394; -} - -.home-hero-visual__footer { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - border-top: 1px solid var(--home-hero-line); - color: #7f8d85; - font-size: 0.65rem; -} - -.home-hero-visual__footer span { - padding: 0.85rem 0.9rem; - border-right: 1px solid var(--home-hero-line); - transition: - background-color 180ms ease, - color 180ms ease; -} - -.home-hero-visual__footer span[data-active="true"] { - color: #c0cdc6; - background: rgb(84 211 148 / 5%); -} - -.home-hero-visual__footer span:last-child { - border-right: 0; -} - -.home-hero-visual__footer i { - margin-right: 0.35rem; - color: #4fb981; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-style: normal; -} - -.home-sdk-rail { - border-bottom: 1px solid var(--home-line); - background: var(--home-paper); -} - -.home-sdk-rail > div { - display: grid; - min-height: 8.5rem; - grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 2fr); - align-items: center; - gap: 3rem; -} - -.home-sdk-rail p { - max-width: 13rem; - margin: 0; - color: var(--home-muted); - font-size: 0.7rem; - line-height: 1.5; -} - -.home-sdk-rail ul { - display: flex; - min-width: 0; - align-items: center; - justify-content: space-between; - gap: clamp(1rem, 2vw, 2.4rem); - margin: 0; - padding: 0; - list-style: none; -} - -.home-sdk-rail li { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 0.55rem; - color: color-mix(in srgb, var(--home-text), transparent 18%); - font-size: clamp(0.67rem, 0.86vw, 0.78rem); - font-weight: 600; - white-space: nowrap; -} - -.home-sdk-rail svg { - width: 1.1rem; - height: 1.1rem; - flex: 0 0 auto; -} - -.home-wasix-mark { - display: inline-grid; - width: 1.1rem; - height: 1.1rem; - flex: 0 0 auto; - place-items: center; - border: 1px solid currentColor; - border-radius: 0.24rem; - color: #6d55d9; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.47rem; - font-weight: 700; - letter-spacing: -0.08em; - line-height: 1; -} - -.home-sdk-tab__icon.home-wasix-mark, -.home-code-panel__brand.home-wasix-mark { - width: 1rem; - height: 1rem; -} - -.home-section { - padding-block: clamp(6rem, 10vw, 10rem); -} - -.home-section-heading { - display: grid; - grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.55fr); - align-items: end; - gap: clamp(2rem, 7vw, 8rem); - margin-bottom: clamp(3.5rem, 6vw, 6rem); -} - -.home-section-heading h2 { - max-width: 58rem; - margin: 0; - font-size: clamp(3.2rem, 6vw, 6.2rem); - font-weight: 600; - letter-spacing: -0.07em; - line-height: 0.91; - text-wrap: balance; -} - -.home-section-heading > p { - max-width: 31rem; - margin: 0 0 0.25rem; - color: var(--home-muted); - font-size: clamp(0.88rem, 1.1vw, 1rem); - line-height: 1.7; -} - -.home-use-cases { - border-bottom: 1px solid var(--home-line); - background: var(--home-surface); -} - -.home-use-case-explorer { - display: grid; - grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); - gap: clamp(1rem, 2vw, 1.5rem); -} - -.home-use-case-tabs { - display: grid; - align-content: stretch; - gap: 0.5rem; -} - -.home-use-case-tab { - position: relative; - display: grid; - min-height: 7.35rem; - border: 0; - border-radius: 0.9rem; - background: transparent; - padding: 1rem 1.15rem; - color: var(--home-muted); - cursor: pointer; - font: inherit; - text-align: left; -} - -.home-use-case-tab::after { - position: absolute; - top: 1rem; - bottom: 1rem; - left: 0; - width: 2px; - border-radius: 999px; - background: var(--home-line); - content: ""; - transition: background-color 160ms ease; -} - -.home-use-case-tab:hover::after, -.home-use-case-tab[aria-selected="true"]::after { - background: var(--home-green); -} - -.home-use-case-tab__highlight { - position: absolute; - inset: 0; - border: 1px solid var(--home-line); - border-radius: inherit; - background: var(--home-surface-raised); - box-shadow: - 0 1rem 2.6rem rgb(17 30 25 / 7%), - inset 0 1px rgb(255 255 255 / 42%); -} - -.home-use-case-tab__copy { - position: relative; - z-index: 1; - display: grid; - gap: 0.55rem; -} - -.home-use-case-tab__copy strong { - color: color-mix(in srgb, var(--home-text), transparent 12%); - font-size: clamp(1rem, 1.2vw, 1.12rem); - font-weight: 600; - letter-spacing: -0.025em; -} - -.home-use-case-tab__copy > span { - max-width: 31rem; - color: var(--home-muted); - font-size: 0.76rem; - line-height: 1.58; -} - -.home-use-case-panel-shell { - min-width: 0; -} - -.home-use-case-panel { - min-height: 31rem; - overflow: hidden; - margin: 0; - border: 1px solid rgb(235 241 236 / 14%); - border-radius: var(--home-radius); - color: #dce5df; - background: #0a1511; - box-shadow: - 0 2.5rem 6rem rgb(17 30 25 / 14%), - inset 0 1px rgb(255 255 255 / 5%); -} - -.home-use-case-panel__header, -.home-use-case-query__bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - color: #81938a; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.62rem; -} - -.home-use-case-panel__header { - min-height: 3.2rem; - border-bottom: 1px solid rgb(235 241 236 / 10%); - padding: 0.75rem 1rem; -} - -.home-use-case-panel__header code { - color: #a9b8b0; -} - -.home-use-case-panel__header span::before { - display: inline-block; - width: 0.38rem; - height: 0.38rem; - margin-right: 0.45rem; - border-radius: 50%; - background: var(--home-green-bright); - box-shadow: 0 0 0 0.2rem rgb(84 211 148 / 10%); - content: ""; - vertical-align: 0.04rem; -} - -.home-use-case-model { - position: relative; - min-height: 10.5rem; - border-bottom: 1px solid rgb(235 241 236 / 10%); - background: - linear-gradient(rgb(232 241 235 / 4%) 1px, transparent 1px), - linear-gradient(90deg, rgb(232 241 235 / 4%) 1px, transparent 1px); - background-position: -1px -1px; - background-size: 3rem 3rem; - padding: 2rem clamp(1rem, 3vw, 2.4rem); -} - -.home-use-case-model::after { - position: absolute; - inset: 0; - background: radial-gradient(circle at center, transparent 22%, #0a1511 89%); - content: ""; - pointer-events: none; -} - -.home-use-case-model svg { - position: absolute; - z-index: 1; - inset: 1.25rem 2.4rem; - width: calc(100% - 4.8rem); - height: calc(100% - 2.5rem); - overflow: visible; -} - -.home-use-case-model path { - fill: none; - stroke: rgb(84 211 148 / 48%); - stroke-dasharray: 0.025 0.02; - stroke-linecap: round; - stroke-width: 1.2; - vector-effect: non-scaling-stroke; -} - -.home-use-case-model ol { - position: relative; - z-index: 2; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: clamp(0.75rem, 2vw, 1.5rem); - margin: 0; - padding: 0; - list-style: none; -} - -.home-use-case-model li { - display: grid; - min-width: 0; - justify-items: center; - gap: 0.4rem; - text-align: center; -} - -.home-use-case-model li > span { - display: grid; - width: 2.4rem; - height: 2.4rem; - place-items: center; - border: 1px solid rgb(84 211 148 / 32%); - border-radius: 50%; - background: #11251d; - box-shadow: - 0 0.8rem 1.8rem rgb(0 0 0 / 22%), - inset 0 1px rgb(255 255 255 / 5%); -} - -.home-use-case-model li > span::before { - width: 0.55rem; - height: 0.55rem; - border: 1px solid #65d49b; - border-radius: 0.14rem; - content: ""; -} - -.home-use-case-model li code { - overflow: hidden; - max-width: 100%; - color: #dce5df; - font-size: 0.72rem; - text-overflow: ellipsis; -} - -.home-use-case-model li small { - color: #809087; - font-size: 0.66rem; -} - -.home-use-case-query { - margin: 1rem; - border: 1px solid rgb(235 241 236 / 11%); - border-radius: 0.75rem; - background: #07100d; -} - -.home-use-case-query__bar { - border-bottom: 1px solid rgb(235 241 236 / 9%); - padding: 0.62rem 0.75rem; -} - -.home-use-case-query__bar span:last-child { - color: #5fc990; -} - -.home-use-case-query pre { - min-height: 8.1rem; - overflow: auto; - margin: 0; - border: 0; - border-radius: 0; - background: transparent; - padding: 0.85rem; - box-shadow: none; -} - -.home-use-case-query pre > code { - display: grid; - min-width: max-content; - color: #bdc9c2; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.74rem; - line-height: 1.62; -} - -.home-use-case-query__line { - display: block; -} - -.home-use-case-query__keyword { - color: #79add3; -} - -.home-use-case-query__parameter { - color: #dda75a; -} - -.home-use-case-panel figcaption { - border-top: 1px solid rgb(235 241 236 / 10%); - padding: 0.95rem 1rem; - color: #94a49b; - font-size: 0.69rem; - line-height: 1.55; -} - -.home-bento-grid { - display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - grid-template-rows: minmax(32rem, auto) minmax(34rem, auto); - gap: clamp(0.8rem, 1.2vw, 1rem); -} - -.home-card { - position: relative; - display: flex; - min-width: 0; - overflow: hidden; - flex-direction: column; - border: 1px solid var(--home-line); - border-radius: var(--home-radius); - background: var(--home-surface); - padding: clamp(1.5rem, 2.7vw, 2.45rem); - box-shadow: inset 0 1px rgb(255 255 255 / 35%); -} - -.home-card--root { - grid-column: 1 / span 5; - grid-row: 1; - background: var(--home-ink-soft); - color: var(--home-white); - box-shadow: inset 0 1px rgb(255 255 255 / 6%); -} - -.home-card--model { - grid-column: 6 / span 7; - grid-row: 1; -} - -.home-card--extensions { - grid-column: 1 / span 7; - grid-row: 2; - background: var(--home-amber-wash); -} - -.home-card--lifecycle { - grid-column: 8 / span 5; - grid-row: 2; - background: var(--home-green-wash); -} - -.home-card__copy { - position: relative; - z-index: 2; - max-width: 37rem; -} - -.home-card__copy h3 { - margin: 0; - font-size: clamp(1.7rem, 2.5vw, 2.45rem); - font-weight: 600; - letter-spacing: -0.052em; - line-height: 0.98; -} - -.home-card__copy p { - max-width: 33rem; - margin: 1rem 0 0; - color: var(--home-muted); - font-size: 0.88rem; - line-height: 1.68; -} - -.home-card--root .home-card__copy p { - color: #a9b6af; -} - -.home-card-link { - display: inline-flex; - width: fit-content; - min-height: 2.75rem; - align-items: center; - gap: 0.45rem; - margin-top: 1.25rem; - color: color-mix(in srgb, var(--home-text), transparent 12%); - font-size: 0.76rem; - font-weight: 600; -} - -.home-card-link svg { - width: 0.9rem; - height: 0.9rem; -} - -.home-root-visual, -.home-model-visual, -.home-lifecycle-visual { - position: relative; - min-height: 0; - flex: 1; - margin: clamp(2rem, 4vw, 3.5rem) 0 0; -} - -.home-root-visual { - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.home-root-visual__path { - display: flex; - min-width: 0; - align-items: center; - gap: 0.6rem; - border-bottom: 1px solid rgb(255 255 255 / 10%); - padding: 0.7rem 0; - color: #899a91; -} - -.home-root-visual__path > span { - width: 0.45rem; - height: 0.45rem; - flex: 0 0 auto; - border-radius: 50%; - background: var(--home-green-bright); -} - -.home-root-visual__path code { - overflow: hidden; - text-overflow: ellipsis; - color: inherit; - font-size: 0.6rem; - white-space: nowrap; -} - -.home-root-visual__tree { - margin-top: 1rem; - border: 1px solid rgb(255 255 255 / 10%); - border-radius: 0.8rem; - background: #0b1612; -} - -.home-root-visual__folder { - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: center; - gap: 0.8rem; - border-bottom: 1px solid rgb(255 255 255 / 9%); - padding: 0.85rem; -} - -.home-folder-icon { - position: relative; - width: 1.45rem; - height: 1.08rem; - border-radius: 0.18rem; - background: #dba74e; -} - -.home-folder-icon::before { - position: absolute; - bottom: 100%; - left: 0.15rem; - width: 0.7rem; - height: 0.25rem; - border-radius: 0.14rem 0.14rem 0 0; - background: #dba74e; - content: ""; -} - -.home-root-visual__folder strong, -.home-root-visual__folder small { - display: block; -} - -.home-root-visual__folder strong { - font-size: 0.75rem; - font-weight: 600; -} - -.home-root-visual__folder small { - margin-top: 0.15rem; - color: #87988f; - font-size: 0.56rem; -} - -.home-root-visual__write { - border: 1px solid rgb(84 211 148 / 22%); - border-radius: 999px; - padding: 0.28rem 0.4rem; - color: #67c992; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.5rem; -} - -.home-root-visual__tree ul { - display: grid; - margin: 0; - padding: 0.6rem 0.85rem; - list-style: none; -} - -.home-root-visual__tree li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 1rem; - padding: 0.48rem 0 0.48rem 1.15rem; - color: #98a79f; - font-size: 0.63rem; -} - -.home-root-visual__tree li > span { - position: relative; -} - -.home-root-visual__tree li > span::before { - position: absolute; - top: 0.45em; - left: -1rem; - width: 0.35rem; - height: 1px; - background: #405048; - content: ""; -} - -.home-root-visual__tree li :is(code, small) { - color: #83968c; - font-size: inherit; -} - -.home-root-visual__wal { - border-radius: 0.35rem; - background: rgb(84 211 148 / 7%); - box-shadow: inset 2px 0 #4cbf7d; -} - -.home-model-visual { - min-height: 20rem; -} - -.home-model-visual > svg { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-model-visual path { - fill: none; - stroke: color-mix(in srgb, var(--home-green), transparent 52%); - stroke-dasharray: 1; - stroke-dashoffset: 0; - stroke-width: 1.4; - vector-effect: non-scaling-stroke; -} - -.home-model-node { - position: absolute; - z-index: 1; - display: grid; - min-width: 10.5rem; - gap: 0.4rem; - border: 1px solid var(--home-line); - border-radius: 0.7rem; - background: var(--home-surface-raised); - padding: 0.85rem 0.95rem; - box-shadow: 0 1rem 2.4rem rgb(17 30 25 / 7%); -} - -.home-model-node strong { - font-size: 0.76rem; - font-weight: 600; -} - -.home-model-node code { - color: var(--home-muted); - font-size: 0.66rem; -} - -.home-model-node--project { - top: 4%; - left: 4%; -} - -.home-model-node--document { - top: 34%; - left: 45%; -} - -.home-model-node--revision { - bottom: 2%; - left: 20%; -} - -.home-model-node--tag { - right: 1%; - bottom: 8%; -} - -.home-model-visual__pulse { - position: absolute; - z-index: 2; - top: 47%; - left: 45%; - width: 0.5rem; - height: 0.5rem; - border: 2px solid var(--home-surface); - border-radius: 50%; - background: var(--home-green); - box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--home-green), transparent 86%); -} - -.home-lifecycle-visual { - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.home-lifecycle-visual ol { - position: relative; - display: grid; - gap: 0; - margin: 0; - padding: 0; - list-style: none; -} - -.home-lifecycle-visual ol::before { - position: absolute; - top: 1.3rem; - bottom: 1.3rem; - left: 1.15rem; - width: 1px; - background: color-mix(in srgb, var(--home-green), transparent 52%); - content: ""; -} - -.home-lifecycle-visual li { - position: relative; - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - gap: 0.85rem; - border-bottom: 1px solid color-mix(in srgb, var(--home-text), transparent 91%); - padding: 0.65rem 0; -} - -.home-lifecycle-visual li > span { - position: relative; - z-index: 1; - display: grid; - width: 2.3rem; - height: 2.3rem; - place-items: center; - border: 1px solid color-mix(in srgb, var(--home-green), transparent 58%); - border-radius: 50%; - background: var(--home-green-wash); -} - -.home-lifecycle-visual li > span i { - width: 0.38rem; - height: 0.38rem; - border-radius: 50%; - background: var(--home-green); -} - -.home-lifecycle-visual strong, -.home-lifecycle-visual small { - display: block; -} - -.home-lifecycle-visual strong { - font-size: 0.76rem; - font-weight: 600; -} - -.home-lifecycle-visual small { - margin-top: 0.18rem; - color: var(--home-muted); - font-size: 0.58rem; -} - -.home-lifecycle-visual__recovery { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - margin-top: 1rem; - border: 1px solid color-mix(in srgb, var(--home-green), transparent 67%); - border-radius: 0.65rem; - background: color-mix(in srgb, var(--home-green), transparent 91%); - padding: 0.85rem; - font-size: 0.65rem; -} - -.home-lifecycle-visual__recovery code { - color: var(--home-green-deep); - font-size: 0.62rem; -} - -.home-runtime-section { - color: #edf1ea; - background: #0b1512; -} - -.home-runtime-section .home-section-heading > p { - color: #9ca9a2; -} - -.home-brand-icon { - display: block; - fill: var(--home-brand-color, currentColor); -} - -.home-code-panel .home-brand-icon[data-brand="rust"] { - fill: #f4f2eb; -} - -html.dark body:has(.home-page) .home-brand-icon[data-brand="rust"] { - fill: #f4f2eb; -} - -.home-runtime-explorer { - --runtime-line: rgb(232 241 235 / 13%); - --runtime-line-strong: rgb(232 241 235 / 22%); - --runtime-surface: #0e1c17; - --runtime-surface-raised: #12241d; - - min-width: 0; -} - -.home-runtime-tabs, -.home-sdk-tabs { - display: flex; - width: fit-content; - max-width: 100%; - align-items: center; - gap: 0.2rem; - border: 1px solid var(--runtime-line, var(--home-line)); - border-radius: 0.78rem; - background: var(--runtime-surface, var(--home-paper)); - padding: 0.24rem; -} - -.home-runtime-tab, -.home-sdk-tab { - position: relative; - isolation: isolate; - display: inline-flex; - min-height: 2.75rem; - flex: 0 0 auto; - align-items: center; - justify-content: center; - border: 0; - border-radius: 0.56rem; - background: transparent; - color: #86968d; - cursor: pointer; - font: inherit; - font-size: 0.72rem; - font-weight: 600; - transition: color 150ms ease; -} - -.home-runtime-tab { - min-width: 8.2rem; - padding-inline: 1rem; -} - -.home-runtime-tab:hover, -.home-runtime-tab[aria-selected="true"] { - color: #eff4ef; -} - -.home-runtime-tab__highlight, -.home-sdk-tab__highlight { - position: absolute; - z-index: -1; - inset: 0; - border: 1px solid var(--runtime-line-strong, var(--home-line-strong)); - border-radius: inherit; - background: var(--runtime-surface-raised, var(--home-surface-raised)); - box-shadow: - 0 0.35rem 1rem rgb(0 0 0 / 14%), - inset 0 1px rgb(255 255 255 / 4%); -} - -.home-runtime-tab__label, -.home-sdk-tab__content { - position: relative; - z-index: 1; -} - -.home-runtime-panel-shell { - min-width: 0; - margin-top: 1rem; -} - -.home-runtime-panel { - display: grid; - min-width: 0; - min-height: 25.5rem; - grid-template-columns: minmax(17rem, 0.58fr) minmax(0, 1.42fr); - overflow: hidden; - border: 1px solid var(--runtime-line); - border-radius: var(--home-radius); - background: var(--runtime-surface); - box-shadow: inset 0 1px rgb(255 255 255 / 4%); -} - -.home-runtime-panel__copy { - display: flex; - min-width: 0; - flex-direction: column; - justify-content: space-between; - border-right: 1px solid var(--runtime-line); - padding: clamp(1.7rem, 3.5vw, 3rem); -} - -.home-runtime-panel__title { - max-width: 17rem; - margin: 0; - font-size: clamp(2rem, 3.1vw, 3.25rem); - font-weight: 600; - letter-spacing: -0.057em; - line-height: 0.98; -} - -.home-runtime-panel__use-when { - max-width: 23rem; - margin: 1.2rem 0 0; - color: #9eaaa3; - font-size: 0.83rem; - line-height: 1.68; -} - -.home-runtime-panel__facts { - margin: 3rem 0 0; -} - -.home-runtime-panel__fact { - border-top: 1px solid var(--runtime-line); - padding-top: 1rem; -} - -.home-runtime-panel__term { - color: #5fce8e; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.62rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.home-runtime-panel__definition { - margin: 0.55rem 0 0; - color: #a7b3ac; - font-size: 0.74rem; - line-height: 1.55; -} - -.home-runtime-stage { - position: relative; - min-width: 0; - min-height: 25.5rem; - margin: 0; - background: - linear-gradient(rgb(232 241 235 / 5%) 1px, transparent 1px), - linear-gradient(90deg, rgb(232 241 235 / 5%) 1px, transparent 1px); - background-position: -1px -1px; - background-size: 4rem 4rem; -} - -.home-runtime-stage::after { - position: absolute; - inset: 0; - background: radial-gradient(circle at center, transparent 24%, var(--runtime-surface) 86%); - content: ""; - pointer-events: none; -} - -.home-runtime-stage__caption { - position: absolute; - z-index: 4; - top: 1.15rem; - left: 1.25rem; - color: #87988f; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.66rem; -} - -.home-runtime-stage__routes { - position: absolute; - z-index: 1; - inset: 5.45rem 1.5rem 2.75rem; - width: calc(100% - 3rem); - height: calc(100% - 8.2rem); - overflow: visible; -} - -.home-runtime-stage__route { - fill: none; - stroke: rgb(83 206 145 / 55%); - stroke-dasharray: 0.025 0.02; - stroke-linecap: round; - stroke-width: 1.25; - vector-effect: non-scaling-stroke; -} - -.home-runtime-stage__groups { - position: absolute; - z-index: 3; - inset: 3.25rem 1.5rem 1.5rem; - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; - align-items: center; - gap: clamp(2.5rem, 5vw, 5rem); - margin: 0; - padding: 0; - list-style: none; -} - -.home-runtime-stage__group { - position: relative; - display: flex; - min-width: 0; - min-height: 13.25rem; - align-items: center; - border: 1px dashed rgb(232 241 235 / 16%); - border-radius: 0.85rem; - padding: 2.25rem 1rem 1rem; -} - -.home-runtime-stage__group-label { - position: absolute; - top: 0.75rem; - left: 0.85rem; - color: #87988f; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.68rem; -} - -.home-runtime-stage__nodes { - position: relative; - display: flex; - width: 100%; - min-width: 0; - align-items: center; - justify-content: space-around; - gap: 0.65rem; - margin: 0; - padding: 0; - list-style: none; -} - -.home-runtime-stage__nodes::before { - position: absolute; - z-index: -1; - right: 10%; - left: 10%; - height: 1px; - background: rgb(83 206 145 / 30%); - content: ""; -} - -.home-runtime-stage__node { - position: relative; - display: grid; - width: min(100%, 9.5rem); - min-width: 0; - justify-items: center; - gap: 0.72rem; - text-align: center; -} - -.home-runtime-stage__node-mark { - display: grid; - width: 2.5rem; - height: 2.5rem; - place-items: center; - border: 1px solid rgb(232 241 235 / 18%); - border-radius: 0.62rem; - background: #15271f; - box-shadow: - 0 0.75rem 1.8rem rgb(0 0 0 / 18%), - inset 0 1px rgb(255 255 255 / 5%); -} - -.home-runtime-stage__node-mark::before, -.home-runtime-stage__node-mark::after { - position: absolute; - content: ""; -} - -.home-runtime-stage__node-mark::before { - width: 0.68rem; - height: 0.68rem; - border: 1px solid currentColor; - border-radius: 0.16rem; - color: #77877e; -} - -.home-runtime-stage__node-mark::after { - width: 0.22rem; - height: 0.22rem; - border-radius: 50%; - background: currentColor; - color: #77877e; -} - -.home-runtime-stage__node[data-node="sdk"] .home-runtime-stage__node-mark, -.home-runtime-stage__node[data-node="broker"] .home-runtime-stage__node-mark, -.home-runtime-stage__node[data-node="server"] .home-runtime-stage__node-mark { - border-color: rgb(119 169 206 / 30%); - color: #77a9ce; -} - -.home-runtime-stage__node[data-node="postgres"] .home-runtime-stage__node-mark { - border-color: rgb(83 206 145 / 38%); - border-radius: 50%; - color: #61d498; -} - -.home-runtime-stage__node[data-node="app"] .home-runtime-stage__node-mark, -.home-runtime-stage__node[data-node="tools"] .home-runtime-stage__node-mark { - border-color: rgb(239 181 87 / 28%); - color: #dca64f; -} - -.home-runtime-stage__node-copy, -.home-runtime-stage__node-label, -.home-runtime-stage__node-detail { - display: block; - min-width: 0; -} - -.home-runtime-stage__node-label { - color: #d9e0da; - font-size: 0.75rem; - font-weight: 600; -} - -.home-runtime-stage__node-detail { - max-width: 8.5rem; - margin-top: 0.26rem; - color: #899990; - font-size: 0.7rem; - line-height: 1.45; -} - -.home-sdk-section { - border-bottom: 1px solid var(--home-line); - background: var(--home-surface); -} - -.home-sdk-tabs { - --runtime-line: var(--home-line); - --runtime-line-strong: var(--home-line-strong); - --runtime-surface: var(--home-paper); - --runtime-surface-raised: var(--home-surface-raised); - - width: 100%; - overflow-x: auto; - scrollbar-width: none; -} - -.home-sdk-tabs::-webkit-scrollbar { - display: none; -} - -.home-sdk-tab { - min-width: 7.25rem; - flex: 1 0 auto; - padding-inline: 0.8rem; - color: var(--home-muted); -} - -.home-sdk-tab:hover, -.home-sdk-tab[aria-selected="true"] { - color: var(--home-text); -} - -.home-sdk-tab__highlight { - box-shadow: - 0 0.35rem 1rem rgb(17 30 25 / 7%), - inset 0 1px rgb(255 255 255 / 45%); -} - -.home-sdk-tab__content, -.home-code-panel__identity { - display: inline-flex; - align-items: center; - gap: 0.55rem; -} - -.home-sdk-tab__icon { - width: 0.92rem; - height: 0.92rem; - flex: 0 0 auto; - color: var(--home-text); -} - -.home-code-panel-shell { - min-width: 0; - margin-top: 1rem; -} - -.home-code-panel { - position: relative; - min-width: 0; - overflow: hidden; - border: 1px solid rgb(235 241 236 / 15%); - border-radius: var(--home-radius); - background: #09130f; - box-shadow: - 0 2.5rem 6rem rgb(17 30 25 / 15%), - inset 0 1px rgb(255 255 255 / 5%); -} - -.home-code-panel__header { - display: flex; - min-height: 3.6rem; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-bottom: 1px solid rgb(235 241 236 / 11%); - padding: 0.85rem 1rem; -} - -.home-code-panel__identity { - color: #d9e2dc; - font-size: 0.72rem; - font-weight: 600; -} - -.home-code-panel__brand { - width: 1rem; - height: 1rem; -} - -.home-code-panel__package { - overflow: hidden; - color: #84968c; - font-size: 0.68rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.home-code-panel__tools { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 0.8rem; -} - -.home-code-panel__copy { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - gap: 0.38rem; - border: 1px solid rgb(235 241 236 / 13%); - border-radius: 0.5rem; - background: rgb(255 255 255 / 4%); - padding: 0.4rem 0.55rem; - color: #aebdb5; - cursor: pointer; - font: inherit; - font-size: 0.68rem; - transition: - border-color 140ms ease, - background-color 140ms ease, - color 140ms ease; -} - -.home-code-panel__copy:hover { - border-color: rgb(235 241 236 / 24%); - background: rgb(255 255 255 / 7%); - color: #eef3ef; -} - -.home-code-panel__copy svg { - width: 0.8rem; - height: 0.8rem; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.35; -} - -.home-code-panel__pre { - min-height: 26rem; - max-height: 41rem; - overflow: auto; - margin: 0; - border: 0; - border-radius: 0; - background: transparent; - padding: 1.4rem 0 1.8rem; - box-shadow: none; - scrollbar-color: #293b33 transparent; -} - -.home-code-panel__pre:focus-visible { - outline: 2px solid var(--home-green-bright); - outline-offset: -3px; -} - -.home-code-panel__scroll-hint { - display: none; -} - -.home-code-panel__code { - display: grid; - min-width: max-content; - color: #c7d2cc; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: clamp(0.75rem, 0.92vw, 0.8rem); - line-height: 1.72; -} - -.home-code-panel__line { - display: grid; - min-height: 1.35rem; - grid-template-columns: 3.6rem minmax(32rem, 1fr); - padding-right: 2rem; -} - -.home-code-panel__line:hover { - background: rgb(255 255 255 / 2.8%); -} - -.home-code-panel__line-number { - border-right: 1px solid rgb(235 241 236 / 8%); - padding-right: 0.9rem; - color: #70837a; - text-align: right; - user-select: none; -} - -.home-code-panel__line-content { - padding-left: 1.15rem; - color: #b9c8c0; - white-space: pre; -} - -.home-code-token--keyword, -.home-code-token--directive { - color: #79add3; -} - -.home-code-token--string { - color: #dda75a; -} - -.home-code-token--comment { - color: #64766c; - font-style: italic; -} - -.home-code-token--number, -.home-code-token--constant, -.home-code-token--macro { - color: #d7896c; -} - -.home-code-token--type { - color: #7fc6a0; -} - -.home-code-token--function, -.home-code-token--property { - color: #c7d5cd; -} - -.home-code-token--operator { - color: #7f9187; -} - -.home-extension-packer { - display: grid; - min-width: 0; - grid-template-columns: minmax(12.5rem, 0.62fr) minmax(0, 1.38fr); - gap: clamp(1.5rem, 3vw, 2.5rem); - margin-top: auto; - padding-top: 2rem; -} - -.home-extension-options { - min-width: 0; - margin: 0; - border: 0; - padding: 0; -} - -.home-extension-options__legend, -.home-extension-output__title, -.home-extension-manifest__title { - color: color-mix(in srgb, var(--home-text), transparent 25%); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.68rem; - font-weight: 600; - letter-spacing: 0.02em; -} - -.home-extension-options__grid { - display: grid; - gap: 0.45rem; - margin-top: 0.9rem; -} - -.home-extension-option { - display: grid; - min-width: 0; - grid-template-columns: auto minmax(0, 1fr); - align-items: center; - gap: 0.68rem; - border: 1px solid color-mix(in srgb, var(--home-text), transparent 88%); - border-radius: 0.62rem; - background: color-mix(in srgb, var(--home-surface), transparent 36%); - padding: 0.68rem; - cursor: pointer; - transition: - border-color 140ms ease, - background-color 140ms ease; -} - -.home-extension-option:hover { - border-color: color-mix(in srgb, var(--home-text), transparent 76%); -} - -.home-extension-option[data-selected="true"] { - border-color: color-mix(in srgb, var(--home-green), transparent 48%); - background: color-mix(in srgb, var(--home-green), transparent 90%); -} - -.home-extension-option__input { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - clip-path: inset(50%); - white-space: nowrap; -} - -.home-extension-option:has(.home-extension-option__input:focus-visible) { - outline: 2px solid var(--home-green); - outline-offset: 2px; -} - -.home-extension-option__control { - display: grid; - width: 1.15rem; - height: 1.15rem; - place-items: center; - border: 1px solid color-mix(in srgb, var(--home-text), transparent 62%); - border-radius: 0.28rem; - background: var(--home-surface-raised); -} - -.home-extension-option[data-selected="true"] .home-extension-option__control { - border-color: var(--home-green-deep); - background: var(--home-green-deep); - color: white; -} - -.home-extension-option__check { - width: 0.7rem; - height: 0.7rem; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.8; -} - -.home-extension-option__copy, -.home-extension-option__name, -.home-extension-option__dependencies { - display: block; - min-width: 0; -} - -.home-extension-option__name { - color: var(--home-text); - font-size: 0.7rem; - font-weight: 600; -} - -.home-extension-option__dependencies { - margin-top: 0.18rem; - color: color-mix(in srgb, var(--home-text), transparent 24%); - font-size: 0.65rem; - line-height: 1.3; -} - -.home-extension-output { - min-width: 0; - border-left: 1px solid color-mix(in srgb, var(--home-text), transparent 86%); - padding-left: clamp(1.5rem, 3vw, 2.5rem); -} - -.home-extension-output__header { - display: flex; - min-width: 0; - align-items: baseline; - justify-content: space-between; - gap: 1rem; -} - -.home-extension-output__summary { - overflow: hidden; - color: var(--home-muted); - font-size: 0.65rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.home-extension-dock { - position: relative; - min-height: 10.2rem; - margin-top: 0.9rem; - overflow: hidden; - border: 1px solid color-mix(in srgb, var(--home-text), transparent 83%); - border-radius: 0.78rem; - background: color-mix(in srgb, var(--home-surface-raised), transparent 20%); -} - -.home-extension-dock::before { - position: absolute; - inset: 0; - background: repeating-linear-gradient( - 135deg, - transparent 0, - transparent 0.45rem, - color-mix(in srgb, var(--home-text), transparent 96%) 0.45rem, - color-mix(in srgb, var(--home-text), transparent 96%) 0.5rem - ); - content: ""; - pointer-events: none; -} - -.home-extension-dock__base { - position: relative; - z-index: 1; - display: flex; - min-height: 2.4rem; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-bottom: 1px solid color-mix(in srgb, var(--home-text), transparent 86%); - background: color-mix(in srgb, var(--home-text), transparent 95%); - padding-inline: 0.75rem; - color: var(--home-muted); - font-size: 0.65rem; -} - -.home-extension-dock__count { - display: grid; - min-width: 1.25rem; - height: 1.25rem; - place-items: center; - border-radius: 50%; - background: var(--home-text); - color: var(--home-surface); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.5rem; -} - -.home-extension-dock__slots { - position: relative; - z-index: 1; - display: flex; - min-height: 7.75rem; - align-items: flex-end; - gap: 0.38rem; - padding: 0.75rem; -} - -.home-extension-dock__item { - display: flex; - min-width: 0; - flex: 1 1 0; - flex-direction: column; - align-items: center; - justify-content: flex-end; - gap: 0.45rem; - border: 1px solid color-mix(in srgb, var(--home-green-deep), transparent 48%); - border-radius: 0.52rem 0.52rem 0.25rem 0.25rem; - background: color-mix(in srgb, var(--home-green), var(--home-surface) 84%); - padding: 0.6rem 0.4rem; - box-shadow: 0 0.45rem 0 color-mix(in srgb, var(--home-green-deep), transparent 30%); -} - -.home-extension-dock__grip { - width: 1.4rem; - height: 0.22rem; - border-top: 1px solid color-mix(in srgb, var(--home-green-deep), transparent 36%); - border-bottom: 1px solid color-mix(in srgb, var(--home-green-deep), transparent 36%); -} - -.home-extension-dock__name { - max-width: 100%; - overflow: hidden; - color: var(--home-text); - font-size: clamp(0.62rem, 0.7vw, 0.68rem); - font-weight: 600; - text-overflow: ellipsis; -} - -.home-extension-dock__dependency-count { - display: block; - max-width: 100%; - overflow: hidden; - color: var(--home-muted); - font-size: 0.56rem; - line-height: 1.2; - text-overflow: ellipsis; - white-space: nowrap; -} - -.home-extension-dock__empty { - align-self: center; - margin: auto; - color: var(--home-muted); - font-size: 0.6rem; -} - -.home-extension-manifest { - display: grid; - max-height: 12.5rem; - gap: 0.45rem; - margin-top: 1rem; - overflow: auto; - padding-right: 0.25rem; - scrollbar-color: color-mix(in srgb, var(--home-text), transparent 74%) transparent; -} - -.home-extension-manifest__title { - margin: 0 0 0.15rem; -} - -.home-extension-manifest__item { - display: grid; - min-width: 0; - grid-template-columns: minmax(5.2rem, 0.3fr) minmax(0, 1fr); - gap: 0.8rem; - border-top: 1px solid color-mix(in srgb, var(--home-text), transparent 88%); - padding-top: 0.48rem; -} - -.home-extension-manifest__name { - overflow: hidden; - color: var(--home-text); - font-size: 0.68rem; - font-weight: 600; - text-overflow: ellipsis; -} - -.home-extension-manifest__dependencies { - min-width: 0; - margin: 0; -} - -.home-extension-manifest__dependency-row { - display: grid; - min-width: 0; - grid-template-columns: 3.5rem minmax(0, 1fr); - gap: 0.5rem; - font-size: 0.64rem; - line-height: 1.45; -} - -.home-extension-manifest__term { - color: var(--home-muted); -} - -.home-extension-manifest__definition { - min-width: 0; - margin: 0; - overflow-wrap: anywhere; -} - -.home-extension-manifest__empty { - margin: 0.4rem 0 0; - color: var(--home-muted); - font-size: 0.65rem; -} - -.home-examples { - background: var(--home-paper); -} - -.home-examples__grid { - display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - gap: clamp(0.8rem, 1.2vw, 1rem); -} - -.home-example-card { - display: flex; - min-height: 26rem; - flex-direction: column; - grid-column: span 4; - border: 1px solid var(--home-line); - border-radius: var(--home-radius); - background: var(--home-surface); - padding: clamp(1.5rem, 2.5vw, 2.2rem); -} - -.home-example-card > p:first-child, -.home-example-card--schema > div > p { - margin: 0; - color: var(--home-green-deep); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.62rem; - font-weight: 600; -} - -.home-example-card h3 { - margin: 1.1rem 0 0; - font-size: clamp(1.7rem, 2.4vw, 2.3rem); - font-weight: 600; - letter-spacing: -0.05em; - line-height: 1; -} - -.home-example-card > p:not(:first-child) { - margin: 1.15rem 0 0; - color: var(--home-muted); - font-size: 0.84rem; - line-height: 1.65; -} - -.home-example-boundary { - position: relative; - display: flex; - min-height: 9rem; - align-items: center; - margin: auto 0 1.5rem; - border-top: 1px solid var(--home-line); - border-bottom: 1px solid var(--home-line); -} - -.home-example-boundary__track { - position: absolute; - top: calc(50% - 1.05rem); - right: 15%; - left: 15%; - height: 1px; - background: color-mix(in srgb, var(--home-green), transparent 54%); - transform-origin: center; -} - -.home-example-boundary__track::before, -.home-example-boundary__track::after { - position: absolute; - top: -0.19rem; - width: 0.42rem; - height: 0.42rem; - border: 1px solid color-mix(in srgb, var(--home-green), transparent 38%); - border-radius: 50%; - background: var(--home-surface); - content: ""; -} - -.home-example-boundary__track::before { - left: 0; -} - -.home-example-boundary__track::after { - right: 0; -} - -.home-example-boundary__track > span { - position: absolute; - top: -0.27rem; - left: calc(50% - 0.28rem); - width: 0.56rem; - height: 0.56rem; - border: 2px solid var(--home-surface); - border-radius: 50%; - background: var(--home-green); -} - -.home-example-boundary ol { - position: relative; - z-index: 1; - display: grid; - width: 100%; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.45rem; - margin: 0; - padding: 0; - list-style: none; -} - -.home-example-boundary li { - display: grid; - min-width: 0; - justify-items: center; - text-align: center; -} - -.home-example-boundary__mark { - display: grid; - width: 2.1rem; - height: 2.1rem; - place-items: center; - border: 1px solid var(--home-line-strong); - border-radius: 0.52rem; - background: var(--home-surface); - box-shadow: 0 0.7rem 1.5rem rgb(17 30 25 / 8%); -} - -.home-example-boundary li[data-owner="true"] .home-example-boundary__mark { - border-color: color-mix(in srgb, var(--home-green), transparent 44%); - background: color-mix(in srgb, var(--home-green), var(--home-surface) 88%); -} - -.home-example-boundary__mark i { - width: 0.42rem; - height: 0.42rem; - border: 1px solid var(--home-muted); - border-radius: 0.12rem; -} - -.home-example-boundary strong, -.home-example-boundary small { - display: block; - max-width: 100%; -} - -.home-example-boundary strong { - margin-top: 0.55rem; - font-size: 0.64rem; - font-weight: 600; -} - -.home-example-boundary small { - margin-top: 0.18rem; - overflow: hidden; - color: var(--home-muted); - font-size: 0.65rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.home-example-card > a { - display: inline-flex; - width: fit-content; - min-height: 2.75rem; - align-items: center; - gap: 0.45rem; - margin-top: auto; - color: var(--home-text); - font-size: 0.75rem; - font-weight: 600; -} - -.home-example-card > a svg { - width: 0.9rem; - height: 0.9rem; -} - -.home-example-card--schema { - background: var(--home-ink-soft); - color: var(--home-white); -} - -.home-example-card--schema > div > p { - color: #77c899; -} - -.home-example-card--schema > a { - color: var(--home-white); -} - -.home-example-card__links { - display: grid; - gap: 0.55rem; - margin-top: auto; -} - -.home-example-card__links a { - display: flex; - min-height: 2.75rem; - align-items: center; - justify-content: space-between; - gap: 0.8rem; - border-top: 1px solid rgb(255 255 255 / 10%); - padding-top: 0.55rem; - color: var(--home-white); - font-size: 0.67rem; - font-weight: 600; -} - -.home-example-card__links svg { - width: 0.82rem; - height: 0.82rem; - flex: 0 0 auto; -} - -.home-example-product { - display: grid; - min-height: 14rem; - align-content: center; - gap: 0.65rem; - flex: 1; - margin: 1.35rem -0.25rem 1.1rem; -} - -.home-example-product__window { - overflow: hidden; - border: 1px solid rgb(255 255 255 / 12%); - border-radius: 0.72rem; - background: #f4f5f1; - color: #18251f; - box-shadow: 0 1.2rem 2.6rem rgb(0 0 0 / 18%); -} - -.home-example-product__header, -.home-example-product__filters, -.home-example-product__summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.6rem; -} - -.home-example-product__header { - border-bottom: 1px solid rgb(16 32 26 / 11%); - background: #fff; - padding: 0.7rem; -} - -.home-example-product__header > span:first-child, -.home-example-product__status { - display: inline-flex; - align-items: center; -} - -.home-example-product__header > span:first-child { - gap: 0.42rem; -} - -.home-example-product__header svg { - width: 0.9rem; - height: 0.9rem; - color: #167249; -} - -.home-example-product__header strong { - font-size: 0.68rem; - font-weight: 600; -} - -.home-example-product__status { - gap: 0.3rem; - color: #387257; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.58rem; -} - -.home-example-product__status i { - width: 0.34rem; - height: 0.34rem; - border-radius: 50%; - background: #32b977; - box-shadow: 0 0 0 0.18rem rgb(50 185 119 / 12%); -} - -.home-example-product__filters { - padding: 0.65rem 0.7rem 0.5rem; -} - -.home-example-product__search { - min-width: 0; - flex: 1; - border: 1px solid rgb(16 32 26 / 13%); - border-radius: 0.38rem; - background: #fff; - padding: 0.46rem 0.55rem; - color: #626e68; - font-size: 0.58rem; -} - -.home-example-product__segments { - display: inline-flex; - overflow: hidden; - border: 1px solid rgb(16 32 26 / 13%); - border-radius: 0.38rem; - background: #fff; -} - -.home-example-product__segments b, -.home-example-product__segments i { - padding: 0.46rem 0.48rem; - font-size: 0.6rem; - font-style: normal; - font-weight: 600; -} - -.home-example-product__segments b { - background: #183a2e; - color: #fff; -} - -.home-example-product__segments i { - color: #66716b; -} - -.home-example-product__summary { - margin-inline: 0.7rem; - border: 1px solid rgb(16 32 26 / 10%); - border-radius: 0.42rem; - background: #fff; - padding: 0.55rem; - color: #66716b; - font-size: 0.52rem; -} - -.home-example-product__summary strong { - color: #17251f; - font-weight: 600; -} - -.home-example-product__proof { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.45rem; - padding: 0.75rem; -} - -.home-example-product__proof span { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 0.38rem; - color: #56645d; - font-size: 0.58rem; - line-height: 1.3; -} - -.home-example-product__proof i { - width: 0.4rem; - height: 0.4rem; - flex: 0 0 auto; - border: 1px solid #2d8f61; - border-radius: 50%; - background: #dff2e7; - box-shadow: inset 0 0 0 1px #fff; -} - -.home-example-product__targets { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.35rem; -} - -.home-example-product__targets span { - border: 1px solid rgb(255 255 255 / 9%); - border-radius: 0.36rem; - background: rgb(255 255 255 / 3%); - padding: 0.38rem 0.45rem; - color: #91a098; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.52rem; - text-align: center; -} - -.home-close { - color: var(--home-white); - background: #10613d; -} - -.home-close__inner { - display: grid; - min-height: 37rem; - grid-template-columns: auto minmax(0, 1fr); - align-items: center; - gap: clamp(2rem, 5vw, 5rem); - padding-block: clamp(5rem, 9vw, 8rem); -} - -.home-close__mark { - display: grid; - width: clamp(6rem, 12vw, 10rem); - height: clamp(6rem, 12vw, 10rem); - place-items: center; - border: 1px solid rgb(255 255 255 / 18%); - border-radius: 50%; - background: rgb(0 0 0 / 10%); -} - -.home-close__mark svg { - width: 52%; - height: 52%; -} - -.home-close h2 { - max-width: 66rem; - margin: 0; - font-size: clamp(3.4rem, 6.5vw, 6.7rem); - font-weight: 600; - letter-spacing: -0.072em; - line-height: 0.89; - text-wrap: balance; -} - -.home-footer { - border-top: 1px solid rgb(255 255 255 / 8%); - color: #c3cdc7; - background: #07100d; -} - -.home-footer__inner { - display: flex; - min-height: 9rem; - align-items: center; - justify-content: space-between; - gap: 2rem; -} - -.home-footer .oliphaunt-wordmark__mark { - border: 1px solid rgb(255 255 255 / 12%); -} - -.home-footer nav { - display: flex; - flex-wrap: wrap; - gap: 1.4rem; -} - -.home-footer nav a { - color: #8e9c94; - font-size: 0.72rem; - transition: color 150ms ease; -} - -.home-footer nav a:hover { - color: #eef1e9; -} - -@media (hover: hover) { - .home-card, - .home-example-card { - transition: border-color 220ms ease; - } - - .home-card:hover, - .home-example-card:hover { - border-color: var(--home-line-strong); - } -} - -@media (max-width: 1100px) { - .home-hero__grid { - grid-template-columns: 1fr; - } - - .home-hero__copy { - max-width: 54rem; - } - - .home-hero-visual { - width: min(100%, 50rem); - } - - .home-sdk-rail > div { - grid-template-columns: 1fr; - gap: 1.5rem; - padding-block: 2rem; - } - - .home-sdk-rail p { - max-width: none; - } - - .home-sdk-rail ul { - flex-wrap: wrap; - justify-content: flex-start; - } -} - -@media (max-width: 940px) { - .home-section-heading { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .home-section-heading > p { - max-width: 40rem; - } - - .home-use-case-explorer { - grid-template-columns: 1fr; - } - - .home-use-case-tabs { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .home-use-case-tab { - min-height: 8.2rem; - } - - .home-sdk-tabs { - flex-wrap: wrap; - overflow: visible; - } - - .home-sdk-tab { - min-width: 7rem; - flex: 1 0 calc(25% - 0.2rem); - } - - .home-model-visual { - display: grid; - min-height: 0; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.75rem; - align-content: end; - } - - .home-model-visual > svg, - .home-model-visual__pulse { - display: none; - } - - .home-model-node { - position: relative; - inset: auto; - min-width: 0; - min-height: 5.4rem; - align-content: center; - } - - .home-bento-grid { - grid-template-rows: none; - } - - .home-card--root, - .home-card--model, - .home-card--extensions, - .home-card--lifecycle { - min-height: 31rem; - grid-column: span 6; - grid-row: auto; - } - - .home-extension-packer { - grid-template-columns: 1fr; - } - - .home-extension-output { - border-top: 1px solid color-mix(in srgb, var(--home-text), transparent 86%); - border-left: 0; - padding-top: 1.4rem; - padding-left: 0; - } - - .home-runtime-panel { - grid-template-columns: 1fr; - } - - .home-runtime-panel__copy { - border-right: 0; - border-bottom: 1px solid var(--runtime-line); - } - - .home-runtime-panel__title { - max-width: 28rem; - } - - .home-runtime-panel__facts { - margin-top: 2rem; - } - - .home-examples__grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .home-example-card { - grid-column: auto; - } - - .home-example-card--schema { - grid-column: span 2; - } -} - -@media (max-width: 640px) { - body:has(.home-page) #nd-nav, - body:has(.home-page) #nd-nav nav { - height: 3.6rem; - } - - .home-shell { - padding-inline: 1rem; - } - - .home-hero__grid { - min-height: auto; - gap: 2.5rem; - padding-block: 4.25rem 2.5rem; - } - - .home-hero__copy h1 { - font-size: clamp(3.55rem, 17.8vw, 5.1rem); - } - - .home-hero__copy h1 .home-hero__product { - font-size: 0.82em; - } - - .home-hero__copy > p { - font-size: 0.98rem; - } - - .home-actions { - align-items: stretch; - } - - .home-actions .home-button { - flex: 1 1 auto; - } - - .home-window-bar { - grid-template-columns: 1fr auto; - } - - .home-window-bar > code { - display: none; - } - - .home-hero-visual__stage { - min-height: 0; - grid-template-columns: 1fr; - grid-template-rows: auto 2.5rem auto; - padding: 0.8rem; - } - - .home-runtime-route { - height: 2.5rem; - transform: rotate(90deg); - } - - .home-query-card pre { - padding: 0.85rem; - } - - .home-query-result > div:nth-child(3) { - display: none; - } - - .home-query-card, - .home-root-card { - width: 100%; - } - - .home-root-card__body { - grid-template-columns: 1fr; - align-items: center; - gap: 0.65rem; - padding: 0.8rem; - } - - .home-wal-rings { - width: 4.7rem; - } - - .home-wal-rings > span:nth-child(2) { - inset: 0.55rem; - } - - .home-wal-rings > span:nth-child(3) { - inset: 1.1rem; - } - - .home-wal-rings > div { - width: 2.35rem; - height: 2.35rem; - } - - .home-root-card__body li { - padding-block: 0.34rem; - } - - .home-hero-visual__footer { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .home-hero-visual__footer span { - border-right: 1px solid var(--home-hero-line); - border-bottom: 0; - padding: 0.7rem 0.55rem; - font-size: 0.58rem; - } - - .home-hero-visual__footer span:last-child { - border-right: 0; - } - - .home-sdk-rail li { - flex: 0 0 calc(50% - 0.75rem); - } - - .home-section { - padding-block: 5.5rem; - } - - .home-section-heading { - margin-bottom: 2.75rem; - } - - .home-section-heading h2 { - font-size: clamp(3rem, 14vw, 4.6rem); - } - - .home-use-case-tabs { - display: flex; - margin-inline: -1rem; - overflow-x: auto; - padding-inline: 1rem; - scroll-padding-inline: 1rem; - scroll-snap-type: x proximity; - scrollbar-width: none; - } - - .home-use-case-tabs::-webkit-scrollbar { - display: none; - } - - .home-use-case-tab { - min-width: min(18rem, calc(100vw - 3rem)); - min-height: 8.8rem; - flex: 0 0 min(18rem, calc(100vw - 3rem)); - scroll-snap-align: start; - } - - .home-use-case-panel { - min-height: 0; - } - - .home-use-case-model { - min-height: 9.6rem; - padding-inline: 0.75rem; - } - - .home-use-case-model svg { - inset-inline: 1.4rem; - width: calc(100% - 2.8rem); - } - - .home-use-case-model ol { - gap: 0.35rem; - } - - .home-use-case-model li code { - font-size: 0.59rem; - } - - .home-use-case-model li small { - max-width: 6rem; - font-size: 0.52rem; - } - - .home-bento-grid { - display: grid; - grid-template-columns: 1fr; - } - - .home-card--root, - .home-card--model, - .home-card--extensions, - .home-card--lifecycle { - min-height: 30rem; - grid-column: auto; - } - - .home-model-visual { - min-height: 19rem; - transform: scale(0.92); - transform-origin: center bottom; - } - - .home-model-node { - min-width: 8rem; - padding: 0.7rem; - } - - .home-model-node code { - max-width: none; - overflow: visible; - overflow-wrap: anywhere; - text-overflow: clip; - white-space: normal; - } - - .home-runtime-tabs { - width: 100%; - flex-wrap: wrap; - overflow: visible; - scrollbar-width: none; - } - - .home-runtime-tabs::-webkit-scrollbar { - display: none; - } - - .home-runtime-tab { - min-width: 0; - flex: 1 0 calc(50% - 0.2rem); - padding-inline: 0.75rem; - } - - .home-runtime-panel, - .home-runtime-stage { - min-height: 0; - } - - .home-runtime-panel__copy { - padding: 1.4rem; - } - - .home-runtime-panel__title { - font-size: 2.15rem; - } - - .home-runtime-stage { - padding: 3.5rem 1rem 1rem; - background-size: 2.75rem 2.75rem; - } - - .home-runtime-stage::after { - background: linear-gradient(180deg, transparent, var(--runtime-surface) 94%); - } - - .home-runtime-stage__routes { - display: none; - } - - .home-runtime-stage__groups { - position: relative; - inset: auto; - grid-auto-columns: auto; - grid-auto-flow: row; - gap: 0.75rem; - } - - .home-runtime-stage__group { - min-height: 0; - padding: 2.2rem 0.75rem 0.85rem; - } - - .home-runtime-stage__group + .home-runtime-stage__group::before { - position: absolute; - top: -0.8rem; - left: 50%; - width: 1px; - height: 0.8rem; - background: rgb(83 206 145 / 38%); - content: ""; - } - - .home-runtime-stage__nodes { - align-items: flex-start; - } - - .home-runtime-stage__node-mark { - width: 2.15rem; - height: 2.15rem; - } - - .home-runtime-stage__node-detail { - font-size: 0.66rem; - } - - .home-sdk-tab { - min-width: 0; - flex: 1 0 calc(25% - 0.2rem); - } - - .home-sdk-tabs { - flex-wrap: wrap; - overflow: visible; - } - - .home-sdk-tab__label { - font-size: 0.62rem; - } - - .home-code-panel__header { - align-items: flex-start; - flex-direction: column; - gap: 0.35rem; - } - - .home-code-panel__tools { - width: 100%; - justify-content: space-between; - } - - .home-code-panel__pre { - min-height: 26rem; - padding-bottom: 3.4rem; - } - - .home-code-panel__scroll-hint { - position: absolute; - right: 0.75rem; - bottom: 0.75rem; - z-index: 2; - display: inline-flex; - align-items: center; - gap: 0.35rem; - border: 1px solid rgb(235 241 236 / 14%); - border-radius: 999px; - background: rgb(17 30 25 / 92%); - box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 20%); - padding: 0.38rem 0.55rem; - color: #9baba2; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.58rem; - pointer-events: none; - } - - .home-code-panel__scroll-hint span { - color: var(--home-green-bright); - } - - .home-code-panel__line { - grid-template-columns: 3rem minmax(28rem, 1fr); - padding-right: 1rem; - } - - .home-extension-packer { - padding-top: 1.5rem; - } - - .home-extension-output__header { - align-items: flex-start; - flex-direction: column; - gap: 0.35rem; - } - - .home-extension-output__summary { - max-width: 100%; - } - - .home-extension-manifest__item { - grid-template-columns: 1fr; - gap: 0.3rem; - } - - .home-examples__grid { - grid-template-columns: 1fr; - } - - .home-example-card, - .home-example-card--schema { - min-height: 24rem; - grid-column: auto; - } - - .home-close__inner { - min-height: auto; - grid-template-columns: 1fr; - gap: 2rem; - padding-block: 4.5rem; - } - - .home-close__mark { - width: 5rem; - height: 5rem; - } - - .home-close h2 { - font-size: clamp(2.55rem, 10.75vw, 3.7rem); - line-height: 0.94; - } - - .home-footer__inner { - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-block: 2rem; - } - - .home-footer nav { - gap: 0.9rem 1.15rem; - } - - .home-footer nav a { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - } -} - -@media (max-width: 340px) { - .home-model-visual { - grid-template-columns: 1fr; - transform: none; - } - - .home-model-node { - min-height: 4.4rem; - } -} - -@media (prefers-reduced-motion: no-preference) { - .home-hero__copy { - animation: home-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-hero-visual { - animation: home-reveal 850ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-runtime-route__line { - transform-origin: left center; - animation: home-route-reveal 720ms 450ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-hero-visual[data-flow-phase="running"] .home-runtime-route__packet { - animation: home-packet-route 760ms 100ms cubic-bezier(0.45, 0, 0.2, 1) both; - } - - .home-hero-visual[data-flow-phase="running"] .home-query-run i { - animation: home-query-running 760ms ease-in-out infinite; - } - - .home-hero-visual[data-flow-phase="complete"] .home-wal-rings > span { - animation: home-wal-ring 520ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-hero-visual[data-flow-phase="complete"] .home-wal-rings > span:nth-child(2) { - animation-delay: 70ms; - } - - .home-hero-visual[data-flow-phase="complete"] .home-wal-rings > span:nth-child(3) { - animation-delay: 140ms; - } - - .home-card[data-motion-state="entered"] .home-root-visual__wal { - animation: home-wal-row 1.25s 120ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card[data-motion-state="entered"] .home-model-visual__pulse { - animation: home-model-pulse 900ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card[data-motion-state="entered"] .home-model-path { - animation: home-model-path 720ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card[data-motion-state="entered"] .home-model-path--two { - animation-delay: 180ms; - } - - .home-card[data-motion-state="entered"] .home-model-path--three { - animation-delay: 260ms; - } - - .home-card[data-motion-state="entered"] .home-lifecycle-visual li > span i { - animation: home-lifecycle-step 420ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: calc(120ms + var(--state-index) * 150ms); - } - - .home-example-card[data-motion-state="entered"] .home-example-boundary__track { - animation: home-example-track 800ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; - } -} - -@media (hover: hover) and (prefers-reduced-motion: no-preference) { - .home-card--root:hover .home-root-visual__wal { - animation: home-wal-row 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card--model:hover .home-model-visual__pulse { - animation: home-model-pulse 900ms ease-out 1; - } - - .home-card--model:hover .home-model-path { - animation: home-model-path 680ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card--model:hover .home-model-path--two { - animation-delay: 160ms; - } - - .home-card--model:hover .home-model-path--three { - animation-delay: 240ms; - } - - .home-card--lifecycle:hover .home-lifecycle-visual li > span i { - animation: home-lifecycle-step 420ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: calc(var(--state-index) * 0.15s); - } - - .home-example-card:hover .home-example-boundary__track { - animation: home-example-track 900ms ease-out 1; - } -} - -@keyframes home-reveal { - from { - opacity: 0; - transform: translateY(1.25rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes home-route-reveal { - from { - opacity: 0; - transform: scaleX(0); - } - to { - opacity: 1; - transform: scaleX(1); - } -} - -@keyframes home-packet-route { - from { - left: 0; - } - to { - left: calc(100% - 0.55rem); - } -} - -@keyframes home-query-running { - 0%, - 100% { - opacity: 0.55; - transform: scale(0.78); - } - 50% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes home-wal-ring { - from { - opacity: 0.35; - transform: scale(0.82); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@keyframes home-example-track { - from { - opacity: 0.35; - transform: scaleX(0.82); - } - to { - opacity: 1; - transform: scaleX(1); - } -} - -@keyframes home-wal-row { - from { - background: rgb(84 211 148 / 7%); - } - to { - background: rgb(84 211 148 / 16%); - box-shadow: - inset 2px 0 #61d498, - inset 0 0 0 1px rgb(84 211 148 / 8%); - } -} - -@keyframes home-model-pulse { - from { - opacity: 0.35; - transform: scale(0.7); - } - 55% { - opacity: 1; - transform: scale(1.45); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@keyframes home-model-path { - from { - opacity: 0.32; - stroke-dashoffset: 1; - } - to { - opacity: 1; - stroke-dashoffset: 0; - } -} - -@keyframes home-lifecycle-step { - from { - opacity: 0.38; - transform: scale(0.74); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@media (prefers-reduced-motion: reduce) { - .home-page *, - .home-page *::before, - .home-page *::after { - scroll-behavior: auto !important; - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* Landing v2: embedded-core illustration system */ - -.wasix-mark { - display: block; -} - -.wasix-mark__bridge { - fill: #939393; -} - -.wasix-mark__surface { - fill: #fff; - stroke: #000; -} - -.wasix-mark__ink { - fill: #000; -} - -html.dark body:has(.home-page) :where(.wasix-mark__surface) { - fill: #000; - stroke: #fff; -} - -html.dark body:has(.home-page) :where(.wasix-mark__ink) { - fill: #fff; -} - -.home-page--v2 .home-hero { - background: - radial-gradient(circle at 74% 44%, rgb(62 173 117 / 11%), transparent 30rem), - radial-gradient(circle at 60% 102%, rgb(58 147 105 / 8%), transparent 28rem), #07110e; -} - -.home-page--v2 .home-hero::before { - position: absolute; - inset: 0; - background-image: - linear-gradient(rgb(237 243 236 / 2.4%) 1px, transparent 1px), - linear-gradient(90deg, rgb(237 243 236 / 2.4%) 1px, transparent 1px); - background-size: 4.5rem 4.5rem; - content: ""; - mask-image: linear-gradient(90deg, transparent 6%, #000 44%, #000 88%, transparent); - pointer-events: none; -} - -.home-page--v2 .home-hero__grid { - min-height: min(55rem, calc(100svh - 4rem)); - grid-template-columns: minmax(25rem, 0.82fr) minmax(38rem, 1.18fr); - gap: clamp(1.5rem, 3vw, 4rem); -} - -.home-page--v2 .home-hero__copy h1 { - font-size: clamp(4.35rem, 6.7vw, 7rem); -} - -.home-page--v2 .home-hero__copy > p { - max-width: 37rem; -} - -.home-core-hero { - position: relative; - z-index: 1; - width: 100%; - height: clamp(36rem, 43vw, 43.5rem); - margin: 0; - isolation: isolate; -} - -.home-core-hero::before, -.home-core-hero::after { - position: absolute; - border-radius: 50%; - content: ""; - pointer-events: none; -} - -.home-core-hero::before { - inset: 9% 5% 4% 1%; - background: radial-gradient(circle, rgb(77 209 144 / 11%), transparent 62%); - filter: blur(1rem); -} - -.home-core-hero::after { - top: 43%; - left: 52%; - width: 16rem; - height: 16rem; - background: rgb(84 211 148 / 8%); - filter: blur(3rem); - transform: translate(-50%, -50%); -} - -.home-core-hero__contours, -.home-core-hero__routes { - position: absolute; - z-index: 1; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-core-hero__contours path { - fill: none; - stroke: rgb(205 230 215 / 7.5%); - stroke-width: 1; - vector-effect: non-scaling-stroke; -} - -.home-core-hero__boundary { - position: absolute; - z-index: 2; - inset: 8% 3% 10% 4%; - overflow: hidden; - border: 1px solid rgb(213 233 220 / 17%); - border-radius: 42% 32% 39% 28% / 25% 37% 27% 34%; - background: linear-gradient(136deg, rgb(255 255 255 / 1.8%), transparent 54%); - box-shadow: - inset 0 1px rgb(255 255 255 / 3.5%), - 0 3rem 8rem rgb(0 0 0 / 18%); -} - -.home-core-hero__boundary::before, -.home-core-hero__boundary::after { - position: absolute; - border: 1px solid rgb(146 208 174 / 8%); - border-radius: inherit; - content: ""; -} - -.home-core-hero__boundary::before { - inset: 1.4rem; -} - -.home-core-hero__boundary::after { - inset: 3rem; - border-color: rgb(146 208 174 / 5%); -} - -.home-core-hero__boundary-label, -.home-core-hero__boundary-state { - position: absolute; - z-index: 2; - top: 1.55rem; - color: #718279; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.56rem; - letter-spacing: 0.15em; -} - -.home-core-hero__boundary-label { - left: 2.25rem; -} - -.home-core-hero__boundary-state { - right: 2.25rem; - display: inline-flex; - align-items: center; - gap: 0.45rem; - letter-spacing: 0.03em; -} - -.home-core-hero__boundary-state i { - width: 0.36rem; - height: 0.36rem; - border-radius: 50%; - background: #54d394; - box-shadow: 0 0 0 0.25rem rgb(84 211 148 / 9%); -} - -.home-core-hero__routes { - z-index: 3; - pointer-events: none; -} - -.home-core-hero__routes path { - fill: none; - stroke-linecap: round; - vector-effect: non-scaling-stroke; -} - -.home-core-hero__route-base { - stroke: rgb(127 178 151 / 14%); - stroke-dasharray: 2 7; - stroke-width: 1; -} - -.home-core-hero__route-active { - stroke-width: 1.35; -} - -.home-core-hero__route-active--entry { - stroke: #67daa1; -} - -.home-core-hero__route-active--result { - stroke: #d0a35d; -} - -.home-core-hero__signal { - position: absolute; - z-index: 5; - display: grid; - gap: 0.2rem; - color: #e9eee9; -} - -.home-core-hero__signal::before { - position: absolute; - top: 0.36rem; - width: 0.46rem; - height: 0.46rem; - border: 2px solid #07110e; - border-radius: 50%; - content: ""; - box-shadow: 0 0 0 1px rgb(99 213 157 / 55%); -} - -.home-core-hero__signal--query { - bottom: 25%; - left: 1.4%; - padding-left: 1.25rem; -} - -.home-core-hero__signal--query::before { - left: 0; - background: #67daa1; -} - -.home-core-hero__signal--result { - top: 14%; - right: 0.75%; - padding-right: 1.25rem; - text-align: right; -} - -.home-core-hero__signal--result::before { - right: 0; - background: #d0a35d; - box-shadow: 0 0 0 1px rgb(208 163 93 / 58%); -} - -.home-core-hero__signal span { - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.67rem; - font-weight: 650; - letter-spacing: 0.05em; -} - -.home-core-hero__signal small { - color: #72847a; - font-size: 0.58rem; -} - -.home-core-hero__engine { - position: absolute; - z-index: 5; - top: 43%; - left: 50%; - width: 14rem; - height: 14rem; - transform: translate(-50%, -50%); -} - -.home-core-hero__halo { - position: absolute; - border: 1px solid rgb(84 211 148 / 18%); - border-radius: 50%; - transition: - opacity 280ms ease, - transform 520ms cubic-bezier(0.16, 1, 0.3, 1), - border-color 280ms ease; -} - -.home-core-hero__halo--one { - inset: -1.7rem; -} - -.home-core-hero__halo--two { - inset: -3.55rem; - border-color: rgb(84 211 148 / 11%); -} - -.home-core-hero__halo--three { - inset: -5.6rem; - border-color: rgb(84 211 148 / 7%); - border-style: dashed; -} - -.home-core-hero__disc { - position: absolute; - z-index: 2; - inset: 0; - display: grid; - place-content: center; - border: 1px solid rgb(109 221 166 / 37%); - border-radius: 50%; - background: - radial-gradient(circle at 35% 26%, rgb(107 222 166 / 14%), transparent 42%), - linear-gradient(145deg, #112a20, #091813 72%); - box-shadow: - 0 2rem 5rem rgb(0 0 0 / 34%), - inset 0 1px rgb(255 255 255 / 8%), - inset 0 0 0 0.7rem rgb(84 211 148 / 3%); - text-align: center; - transition: - border-color 260ms ease, - box-shadow 420ms ease, - transform 420ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-core-hero__disc small { - color: #74b995; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.54rem; - letter-spacing: 0.17em; -} - -.home-core-hero__disc strong { - margin-block: 0.15rem; - color: #f1f3ec; - font-size: 4.1rem; - font-weight: 560; - letter-spacing: -0.09em; - line-height: 0.95; -} - -.home-core-hero__disc > span { - color: #7f9187; - font-size: 0.57rem; -} - -.home-core-hero__layers { - position: absolute; - z-index: 3; - top: 76%; - left: 76%; - display: grid; - width: 12.5rem; - gap: 0.45rem; -} - -.home-core-hero__layers span { - display: flex; - min-height: 2.15rem; - align-items: center; - border: 1px solid rgb(222 235 225 / 11%); - border-radius: 999px; - background: rgb(8 19 15 / 86%); - padding-inline: 0.85rem; - color: #73847a; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.57rem; - box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 18%); - transition: - border-color 220ms ease, - color 220ms ease, - transform 320ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-core-hero__layers span:nth-child(2) { - transform: translateX(1.35rem); -} - -.home-core-hero__layers span:nth-child(3) { - transform: translateX(0.4rem); -} - -.home-core-hero__layers span[data-active="true"] { - border-color: rgb(93 210 152 / 37%); - color: #a6d9bd; -} - -.home-core-hero__wal { - position: absolute; - z-index: 4; - top: 43%; - left: 50%; - width: 24rem; - height: 24rem; - border-radius: 50%; - pointer-events: none; - transform: translate(-50%, -50%) rotate(-28deg); -} - -.home-core-hero__wal-ring { - position: absolute; - inset: 0; - border: 1px solid transparent; - border-top-color: rgb(208 163 93 / 60%); - border-right-color: rgb(208 163 93 / 18%); - border-radius: 50%; - opacity: 0.35; - transform: rotate(-72deg); - transition: - opacity 260ms ease, - transform 620ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-core-hero__wal-dot { - position: absolute; - top: 2.1rem; - right: 3.2rem; - width: 0.48rem; - height: 0.48rem; - border: 2px solid #07110e; - border-radius: 50%; - background: #d0a35d; - box-shadow: 0 0 0 0.25rem rgb(208 163 93 / 9%); -} - -.home-core-hero__wal code { - position: absolute; - top: 1.3rem; - right: 5.1rem; - color: #8e7957; - font-size: 0.55rem; - letter-spacing: 0.1em; - transform: rotate(28deg); -} - -.home-core-hero[data-flow-phase="query"] .home-core-hero__disc, -.home-core-hero[data-flow-phase="commit"] .home-core-hero__disc { - border-color: rgb(103 218 161 / 70%); - box-shadow: - 0 2rem 5rem rgb(0 0 0 / 34%), - 0 0 4rem rgb(84 211 148 / 15%), - inset 0 1px rgb(255 255 255 / 9%), - inset 0 0 0 0.7rem rgb(84 211 148 / 5%); - transform: scale(1.025); -} - -.home-core-hero[data-flow-phase="query"] .home-core-hero__halo--one, -.home-core-hero[data-flow-phase="commit"] .home-core-hero__halo--one { - border-color: rgb(84 211 148 / 38%); - transform: scale(1.04); -} - -.home-core-hero[data-flow-phase="commit"] .home-core-hero__wal-ring, -.home-core-hero[data-flow-phase="complete"] .home-core-hero__wal-ring { - opacity: 1; - transform: rotate(42deg); -} - -.home-core-hero__capabilities { - position: absolute; - z-index: 4; - top: 25%; - left: 15%; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; -} - -.home-core-hero__capabilities span { - color: #60736a; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.55rem; -} - -.home-core-hero__capabilities span:nth-child(2) { - transform: translateX(-1.3rem); -} - -.home-core-hero__capabilities span:nth-child(3) { - transform: translateX(0.8rem); -} - -.home-core-hero__run { - position: absolute; - z-index: 8; - right: 4.5%; - bottom: 8%; - display: inline-flex; - min-height: 2.75rem; - align-items: center; - gap: 0.65rem; - border: 1px solid rgb(217 234 222 / 15%); - border-radius: 999px; - background: rgb(12 27 21 / 88%); - padding: 0.45rem 0.85rem 0.45rem 0.55rem; - color: #c7d1cb; - cursor: pointer; - font: inherit; - font-size: 0.65rem; - box-shadow: - 0 1rem 2.5rem rgb(0 0 0 / 25%), - inset 0 1px rgb(255 255 255 / 4%); - backdrop-filter: blur(0.8rem); - transition: - border-color 160ms ease, - background-color 160ms ease, - transform 160ms ease; -} - -.home-core-hero__run:hover:not(:disabled) { - border-color: rgb(103 218 161 / 42%); - background: rgb(17 39 29 / 92%); - transform: translateY(-1px); -} - -.home-core-hero__run:disabled { - cursor: wait; -} - -.home-core-hero__run-icon { - display: grid; - width: 1.85rem; - height: 1.85rem; - place-items: center; - border-radius: 50%; - background: #54d394; -} - -.home-core-hero__run-icon i { - width: 0; - height: 0; - margin-left: 0.12rem; - border-top: 0.25rem solid transparent; - border-bottom: 0.25rem solid transparent; - border-left: 0.38rem solid #07130e; -} - -.home-core-hero[data-flow-phase="query"] .home-core-hero__run-icon i, -.home-core-hero[data-flow-phase="commit"] .home-core-hero__run-icon i { - width: 0.42rem; - height: 0.42rem; - margin: 0; - border: 1.5px solid rgb(7 19 14 / 32%); - border-top-color: #07130e; - border-radius: 50%; -} - -.home-page--v2 .home-sdk-rail > div { - min-height: 7.75rem; - grid-template-columns: minmax(10rem, 0.5fr) minmax(0, 2fr); -} - -.home-page--v2 .home-sdk-rail ul { - justify-content: space-around; -} - -.home-page--v2 .home-sdk-rail p { - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.62rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.home-page--v2 .home-section-heading h2 { - max-width: 53rem; - font-size: clamp(3.1rem, 5.25vw, 5.35rem); - line-height: 0.94; -} - -.home-page--v2 .home-use-cases { - background: - radial-gradient( - circle at 0 100%, - color-mix(in srgb, var(--home-green-wash), transparent 42%), - transparent 30rem - ), - var(--home-surface); -} - -.home-use-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: clamp(0.75rem, 1.2vw, 1rem); -} - -.home-use-card { - position: relative; - display: flex; - min-width: 0; - min-height: 31rem; - overflow: hidden; - flex-direction: column; - border: 1px solid var(--home-line); - border-radius: 1.25rem; - background: var(--home-paper); - box-shadow: inset 0 1px rgb(255 255 255 / 38%); - transition: - border-color 220ms ease, - box-shadow 220ms ease, - transform 260ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-use-card:nth-child(2) { - background: color-mix(in srgb, var(--home-green-wash), var(--home-paper) 58%); -} - -.home-use-card:nth-child(3) { - background: color-mix(in srgb, #ece8f6, var(--home-paper) 62%); -} - -.home-use-card:nth-child(4) { - background: color-mix(in srgb, var(--home-amber-wash), var(--home-paper) 56%); -} - -.home-use-card__copy { - position: relative; - z-index: 2; - max-width: 34rem; - padding: clamp(1.5rem, 2.6vw, 2.4rem); -} - -.home-use-card__copy h3 { - margin: 0; - font-size: clamp(1.45rem, 2vw, 2rem); - font-weight: 610; - letter-spacing: -0.045em; - line-height: 1; -} - -.home-use-card__copy p { - max-width: 31rem; - margin: 0.9rem 0 1rem; - color: var(--home-muted); - font-size: 0.83rem; - line-height: 1.65; -} - -.home-use-card__copy code { - color: color-mix(in srgb, var(--home-muted), transparent 10%); - font-size: 0.59rem; - letter-spacing: 0.025em; -} - -.home-use-signal { - position: relative; - min-height: 14rem; - flex: 1; - overflow: hidden; - margin: 0; - mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%); -} - -.home-use-signal::after { - position: absolute; - right: -10%; - bottom: -42%; - width: 65%; - aspect-ratio: 1; - border-radius: 50%; - background: color-mix(in srgb, var(--home-green), transparent 92%); - content: ""; - filter: blur(1.5rem); -} - -.home-use-signal svg { - position: absolute; - z-index: 1; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-use-signal svg * { - vector-effect: non-scaling-stroke; -} - -.home-use-signal__guide, -.home-use-signal__trace, -.home-use-signal__node rect, -.home-use-signal__node path, -.home-use-signal__contour, -.home-use-signal__radius, -.home-use-signal__crosshair, -.home-use-signal__vector-line, -.home-use-signal__table rect, -.home-use-signal__table path, -.home-use-signal__match-ring { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; -} - -.home-use-signal__guide { - stroke: color-mix(in srgb, var(--home-text), transparent 82%); - stroke-width: 1; -} - -.home-use-signal__trace { - stroke: var(--home-green); - stroke-dasharray: 1; - stroke-dashoffset: 0; - stroke-width: 1.35; -} - -.home-use-signal__node rect { - fill: color-mix(in srgb, var(--home-paper), transparent 15%); - stroke: color-mix(in srgb, var(--home-text), transparent 68%); -} - -.home-use-signal__node path { - stroke: color-mix(in srgb, var(--home-text), transparent 58%); - stroke-width: 1; -} - -.home-use-signal__node--source rect { - stroke: color-mix(in srgb, var(--home-green), transparent 28%); -} - -.home-use-signal__pulse, -.home-use-signal__target, -.home-use-signal__query, -.home-use-signal__vector--match { - fill: var(--home-green); -} - -.home-use-signal__pulse { - stroke: color-mix(in srgb, var(--home-paper), transparent 20%); - stroke-width: 4; -} - -.home-use-signal__contour { - stroke: color-mix(in srgb, var(--home-text), transparent 82%); -} - -.home-use-signal__radius { - stroke: color-mix(in srgb, var(--home-green), transparent 28%); - stroke-dasharray: 3 5; -} - -.home-use-signal__radius--inner { - fill: color-mix(in srgb, var(--home-green), transparent 92%); - stroke-dasharray: none; -} - -.home-use-signal__crosshair { - stroke: color-mix(in srgb, var(--home-green), transparent 78%); -} - -.home-use-signal__target { - stroke: var(--home-paper); - stroke-width: 5; -} - -.home-use-signal__asset { - fill: color-mix(in srgb, var(--home-text), transparent 28%); -} - -.home-use-signal__asset--outside { - opacity: 0.28; -} - -.home-use-signal__vector-line { - stroke: color-mix(in srgb, var(--home-text), transparent 83%); -} - -.home-use-signal__vector-line--active { - stroke: color-mix(in srgb, #6e58c7, transparent 18%); - stroke-width: 1.4; -} - -.home-use-signal__query { - fill: #6e58c7; - stroke: var(--home-paper); - stroke-width: 5; -} - -.home-use-signal__vector { - fill: color-mix(in srgb, var(--home-text), transparent 34%); -} - -.home-use-signal__vector--match { - fill: #6e58c7; - stroke: var(--home-paper); - stroke-width: 5; -} - -.home-use-signal__match-ring { - stroke: color-mix(in srgb, #6e58c7, transparent 30%); - stroke-dasharray: 3 4; -} - -.home-use-signal__table rect, -.home-use-signal__table path { - stroke: color-mix(in srgb, var(--home-text), transparent 72%); -} - -.home-use-signal__table rect { - fill: color-mix(in srgb, var(--home-paper), transparent 9%); -} - -.home-use-signal__table--back { - opacity: 0.56; -} - -.home-use-signal__table--front rect { - stroke: color-mix(in srgb, #b57d2e, transparent 35%); -} - -.home-use-signal__cursor { - fill: color-mix(in srgb, var(--home-paper), transparent 5%); - stroke: color-mix(in srgb, var(--home-text), transparent 20%); - stroke-linejoin: round; -} - -.home-use-signal__selection { - fill: color-mix(in srgb, #d6a456, transparent 77%); - stroke: color-mix(in srgb, #b57d2e, transparent 36%); -} - -.home-page--v2 .home-foundation { - border-bottom: 1px solid var(--home-line); - background: var(--home-paper); -} - -.home-bento-grid--v2 { - grid-template-rows: minmax(36rem, auto) minmax(34rem, auto); -} - -.home-bento-grid--v2 .home-card { - padding: clamp(1.6rem, 2.8vw, 2.7rem); -} - -.home-card--engine { - display: grid; - min-height: 36rem; - grid-column: 1 / span 12; - grid-row: 1; - grid-template-columns: minmax(19rem, 0.62fr) minmax(0, 1.38fr); - align-items: center; - gap: clamp(2rem, 5vw, 6rem); - color: #f0f3ec; - background: - radial-gradient(circle at 74% 42%, rgb(84 211 148 / 12%), transparent 23rem), - linear-gradient(145deg, #0b1914, #08120f 66%); - box-shadow: - inset 0 1px rgb(255 255 255 / 6%), - 0 2rem 5rem rgb(17 32 25 / 7%); -} - -.home-card--engine::before { - position: absolute; - inset: 0; - background-image: - linear-gradient(rgb(236 243 237 / 2.3%) 1px, transparent 1px), - linear-gradient(90deg, rgb(236 243 237 / 2.3%) 1px, transparent 1px); - background-size: 3.6rem 3.6rem; - content: ""; - mask-image: linear-gradient(90deg, transparent, #000 55%, #000); -} - -.home-card--engine .home-card__copy { - align-self: start; - padding-top: clamp(1rem, 4vw, 4rem); -} - -.home-card--engine .home-card__copy h3 { - font-size: clamp(2.35rem, 4vw, 4.35rem); - line-height: 0.95; -} - -.home-card--engine .home-card__copy p { - max-width: 29rem; - color: #a9b7af; - font-size: 0.92rem; -} - -.home-card--runtime-family { - grid-column: 1 / span 5; - grid-row: 2; - color: #eef2eb; - background: - radial-gradient(circle at 80% 58%, rgb(140 126 210 / 14%), transparent 19rem), #0c1512; - box-shadow: inset 0 1px rgb(255 255 255 / 6%); -} - -.home-card--runtime-family .home-card__copy p { - color: #9ba9a1; -} - -.home-card--runtime-family .home-card-link { - color: #d5ddd8; -} - -.home-card--extension-ecosystem { - grid-column: 6 / span 7; - grid-row: 2; - background: - radial-gradient(circle at 75% 72%, rgb(199 146 66 / 14%), transparent 20rem), - color-mix(in srgb, var(--home-amber-wash), var(--home-paper) 24%); -} - -.home-card--extension-ecosystem .home-card__copy { - max-width: 42rem; -} - -.home-engine-visual { - position: relative; - z-index: 1; - min-height: 30rem; - margin: 0; -} - -.home-engine-visual__field { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-engine-visual__field path, -.home-engine-visual__field circle { - fill: none; - stroke: rgb(176 215 193 / 9%); - stroke-width: 1; - vector-effect: non-scaling-stroke; -} - -.home-engine-visual__field circle:last-child { - stroke: rgb(84 211 148 / 13%); - stroke-dasharray: 3 6; -} - -.home-engine-visual__boundary { - position: absolute; - inset: 8% 4% 6% 3%; - border: 1px solid rgb(218 234 222 / 14%); - border-radius: 39% 28% 36% 27% / 25% 35% 25% 33%; -} - -.home-engine-visual__boundary span, -.home-engine-visual__boundary code { - position: absolute; - top: 1.1rem; - color: #6f8077; - font-size: 0.54rem; - letter-spacing: 0.09em; -} - -.home-engine-visual__boundary span { - left: 1.7rem; -} - -.home-engine-visual__boundary code { - right: 1.7rem; -} - -.home-engine-visual__core { - position: absolute; - z-index: 2; - top: 48%; - left: 49%; - width: min(26rem, 62%); - transform: translate(-50%, -50%); -} - -.home-engine-visual__cap { - position: relative; - z-index: 4; - display: flex; - width: 12rem; - height: 12rem; - flex-direction: column; - align-items: center; - justify-content: center; - margin-inline: auto; - border: 1px solid rgb(99 213 157 / 46%); - border-radius: 50%; - background: radial-gradient(circle at 35% 25%, rgb(111 226 169 / 17%), transparent 42%), #10271d; - box-shadow: - 0 1.6rem 4rem rgb(0 0 0 / 30%), - inset 0 0 0 0.75rem rgb(84 211 148 / 3%); -} - -.home-engine-visual__cap small { - color: #75ba97; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.5rem; - letter-spacing: 0.13em; -} - -.home-engine-visual__cap strong { - color: #f0f3ed; - font-size: 3.7rem; - font-weight: 560; - letter-spacing: -0.1em; - line-height: 1; -} - -.home-engine-visual__layer { - position: relative; - display: flex; - min-height: 3.35rem; - align-items: center; - justify-content: center; - gap: clamp(0.7rem, 2vw, 1.5rem); - margin-top: -0.55rem; - border: 1px solid rgb(219 234 223 / 13%); - border-radius: 999px; - background: rgb(9 23 17 / 93%); - color: #8d9e94; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.57rem; - box-shadow: - 0 1.1rem 2.4rem rgb(0 0 0 / 19%), - inset 0 1px rgb(255 255 255 / 3%); -} - -.home-engine-visual__layer::before { - width: 0.34rem; - height: 0.34rem; - border-radius: 50%; - background: #54d394; - content: ""; - opacity: 0.42; -} - -.home-engine-visual__layer--sql { - z-index: 3; - width: 86%; - margin-inline: auto; -} - -.home-engine-visual__layer--data { - z-index: 2; - width: 100%; - min-height: 3.65rem; -} - -.home-engine-visual__layer--wal { - z-index: 1; - width: 88%; - margin-inline: auto; - border-color: rgb(208 163 93 / 27%); - color: #ae9874; -} - -.home-engine-visual__layer--wal::before { - background: #d0a35d; -} - -.home-engine-visual__commit, -.home-engine-visual__reopen { - position: absolute; - z-index: 3; - display: flex; - align-items: center; - gap: 0.55rem; - color: #74857b; -} - -.home-engine-visual__commit { - top: 24%; - right: 3%; -} - -.home-engine-visual__reopen { - bottom: 22%; - left: 3%; -} - -.home-engine-visual__commit span, -.home-engine-visual__reopen span { - width: 0.44rem; - height: 0.44rem; - border: 2px solid #0a1511; - border-radius: 50%; - background: #54d394; - box-shadow: 0 0 0 1px rgb(84 211 148 / 46%); -} - -.home-engine-visual__commit code, -.home-engine-visual__reopen code { - font-size: 0.53rem; - letter-spacing: 0.09em; -} - -.home-runtime-family { - position: relative; - min-height: 19rem; - flex: 1; - margin: 1.4rem 0 0; -} - -.home-runtime-family__routes { - position: absolute; - inset: 0; - width: 100%; - height: 100%; -} - -.home-runtime-family__routes path { - fill: none; - stroke: rgb(210 225 215 / 17%); - stroke-dasharray: 3 5; - stroke-linecap: round; - vector-effect: non-scaling-stroke; -} - -.home-runtime-family__postgres { - position: absolute; - z-index: 3; - top: 50%; - left: 50%; - display: grid; - width: 7.2rem; - height: 7.2rem; - place-content: center; - border: 1px solid rgb(96 208 152 / 40%); - border-radius: 50%; - background: #10271d; - box-shadow: - 0 1.4rem 3rem rgb(0 0 0 / 28%), - 0 0 0 1.25rem rgb(84 211 148 / 3%); - text-align: center; - transform: translate(-50%, -50%); -} - -.home-runtime-family__postgres small { - color: #6da68a; - font-size: 0.43rem; - letter-spacing: 0.12em; -} - -.home-runtime-family__postgres strong { - color: #eef2eb; - font-size: 1.65rem; - line-height: 1; -} - -.home-runtime-family__postgres span { - color: #79be99; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.56rem; -} - -.home-runtime-family__native, -.home-runtime-family__wasix { - position: absolute; - z-index: 4; - display: flex; - align-items: center; - gap: 0.8rem; -} - -.home-runtime-family__native { - top: 18%; - left: 2%; -} - -.home-runtime-family__wasix { - right: 1%; - bottom: 16%; -} - -.home-runtime-family__native > div, -.home-runtime-family__wasix > div { - display: grid; - gap: 0.12rem; -} - -.home-runtime-family__native strong, -.home-runtime-family__wasix strong { - font-size: 0.77rem; -} - -.home-runtime-family__native small, -.home-runtime-family__wasix small { - color: #7e8e85; - font-size: 0.53rem; -} - -.home-runtime-family__native-mark { - display: flex; - width: 2.8rem; - height: 2.8rem; - align-items: flex-end; - justify-content: center; - gap: 0.18rem; - border: 1px solid rgb(232 239 233 / 16%); - border-radius: 0.7rem; - background: rgb(255 255 255 / 4%); - padding: 0.65rem; -} - -.home-runtime-family__native-mark i { - width: 0.3rem; - border-radius: 999px; - background: #cbd4ce; -} - -.home-runtime-family__native-mark i:nth-child(1) { - height: 45%; -} - -.home-runtime-family__native-mark i:nth-child(2) { - height: 100%; - background: #54d394; -} - -.home-runtime-family__native-mark i:nth-child(3) { - height: 68%; -} - -.home-runtime-family__wasix > .wasix-mark { - width: 3.25rem; - height: 3.25rem; -} - -.home-runtime-family .wasix-mark__surface { - fill: #0c1512; - stroke: #eef2eb; -} - -.home-runtime-family .wasix-mark__ink { - fill: #eef2eb; -} - -.home-runtime-family__surface { - position: absolute; - right: 4%; - bottom: -0.2rem; - left: 4%; - display: flex; - justify-content: space-between; - gap: 0.75rem; - border-top: 1px solid rgb(231 239 233 / 10%); - padding-top: 0.7rem; - color: #697a71; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.5rem; -} - -.home-extension-orbit { - position: relative; - min-height: 19rem; - flex: 1; - margin: 0.8rem 0 0; -} - -.home-extension-orbit > svg { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-extension-orbit > svg ellipse, -.home-extension-orbit > svg path { - fill: none; - stroke: color-mix(in srgb, #9b6a2b, transparent 72%); - stroke-width: 1; - vector-effect: non-scaling-stroke; -} - -.home-extension-orbit > svg path { - stroke: color-mix(in srgb, #9b6a2b, transparent 46%); - stroke-dasharray: 3 5; -} - -.home-extension-orbit__core { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - display: grid; - width: 7.6rem; - height: 7.6rem; - place-content: center; - border: 1px solid color-mix(in srgb, var(--home-green), transparent 38%); - border-radius: 50%; - background: color-mix(in srgb, var(--home-green-wash), var(--home-paper) 60%); - box-shadow: - 0 1.5rem 3.5rem rgb(77 57 28 / 10%), - 0 0 0 1.15rem color-mix(in srgb, var(--home-green), transparent 95%); - text-align: center; - transform: translate(-50%, -50%); -} - -.home-extension-orbit__core small { - color: var(--home-green-deep); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.43rem; - letter-spacing: 0.1em; -} - -.home-extension-orbit__core strong { - font-size: 2.3rem; - font-weight: 580; - letter-spacing: -0.08em; - line-height: 1; -} - -.home-extension-orbit ul { - position: absolute; - inset: 0; - margin: 0; - padding: 0; - list-style: none; -} - -.home-extension-orbit li { - position: absolute; - z-index: 3; - display: grid; - min-width: 7.2rem; - grid-template-columns: auto 1fr; - align-items: center; - gap: 0.1rem 0.5rem; - border: 1px solid color-mix(in srgb, var(--home-text), transparent 82%); - border-radius: 0.75rem; - background: color-mix(in srgb, var(--home-paper), transparent 5%); - padding: 0.55rem 0.7rem; - box-shadow: 0 0.8rem 2rem rgb(81 58 23 / 7%); - transform: translate(-50%, -50%); - transition: - border-color 180ms ease, - transform 280ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-extension-orbit li:nth-child(1) { - top: 15%; - left: 27%; -} - -.home-extension-orbit li:nth-child(2) { - top: 17%; - left: 73%; -} - -.home-extension-orbit li:nth-child(3) { - top: 50%; - left: 12%; -} - -.home-extension-orbit li:nth-child(4) { - top: 51%; - left: 88%; -} - -.home-extension-orbit li:nth-child(5) { - top: 84%; - left: 27%; -} - -.home-extension-orbit li:nth-child(6) { - top: 82%; - left: 73%; -} - -.home-extension-orbit li i { - width: 0.44rem; - height: 0.44rem; - grid-row: 1 / span 2; - border-radius: 50%; - background: #c38b3b; - box-shadow: 0 0 0 0.22rem color-mix(in srgb, #c38b3b, transparent 88%); -} - -.home-extension-orbit li code { - color: color-mix(in srgb, var(--home-text), transparent 4%); - font-size: 0.58rem; - font-weight: 650; -} - -.home-extension-orbit li small { - color: var(--home-muted); - font-size: 0.48rem; -} - -.home-extension-orbit > p { - position: absolute; - right: 0; - bottom: -0.35rem; - margin: 0; - color: color-mix(in srgb, #9b6a2b, transparent 24%); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.5rem; -} - -.home-page--v2 .home-examples { - border-bottom: 1px solid var(--home-line); - background: var(--home-surface); -} - -.home-example-list { - border-top: 1px solid var(--home-line-strong); -} - -.home-example-row { - display: grid; - min-height: 8rem; - grid-template-columns: 3.5rem minmax(13rem, 0.65fr) minmax(18rem, 1fr) auto; - align-items: center; - gap: clamp(1rem, 2.5vw, 2.5rem); - border-bottom: 1px solid var(--home-line); - padding: 1.2rem 0.8rem; - transition: - background-color 180ms ease, - padding-inline 220ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.home-example-row__number { - color: color-mix(in srgb, var(--home-muted), transparent 24%); - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.58rem; -} - -.home-example-row__name { - display: grid; - gap: 0.48rem; -} - -.home-example-row h3 { - margin: 0; - font-size: 1.1rem; - font-weight: 620; - letter-spacing: -0.025em; -} - -.home-example-row__name code { - color: var(--home-muted); - font-size: 0.55rem; -} - -.home-example-row > p { - max-width: 39rem; - margin: 0; - color: var(--home-muted); - font-size: 0.8rem; - line-height: 1.55; -} - -.home-example-row > a { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - gap: 0.45rem; - color: var(--home-text); - font-size: 0.72rem; - font-weight: 650; -} - -.home-example-row > a svg { - width: 0.85rem; - height: 0.85rem; - transition: transform 150ms ease; -} - -.home-example-row > a:hover svg { - transform: translate(2px, -2px); -} - -@media (hover: hover) { - .home-use-card:hover { - border-color: var(--home-line-strong); - box-shadow: - inset 0 1px rgb(255 255 255 / 42%), - 0 1.5rem 4rem rgb(21 40 31 / 7%); - transform: translateY(-2px); - } - - .home-example-row:hover { - background: color-mix(in srgb, var(--home-paper), transparent 32%); - padding-inline: 1.1rem; - } - - .home-extension-orbit li:hover { - border-color: color-mix(in srgb, #b47729, transparent 38%); - } -} - -@media (max-width: 1100px) { - .home-page--v2 .home-hero__grid { - grid-template-columns: 1fr; - } - - .home-core-hero { - width: min(100%, 52rem); - height: 38rem; - } - - .home-page--v2 .home-sdk-rail > div { - grid-template-columns: 1fr; - } - - .home-page--v2 .home-sdk-rail ul { - justify-content: flex-start; - } - - .home-example-row { - grid-template-columns: 2.5rem minmax(12rem, 0.65fr) minmax(16rem, 1fr) auto; - } -} - -@media (max-width: 940px) { - .home-use-grid { - grid-template-columns: 1fr; - } - - .home-use-card { - min-height: 27rem; - } - - .home-bento-grid--v2 { - grid-template-rows: none; - } - - .home-card--engine, - .home-card--runtime-family, - .home-card--extension-ecosystem { - min-height: 34rem; - grid-column: 1 / span 12; - grid-row: auto; - } - - .home-card--engine { - display: flex; - } - - .home-card--engine .home-card__copy { - align-self: auto; - padding-top: 0; - } - - .home-engine-visual { - width: 100%; - min-height: 27rem; - } - - .home-example-row { - grid-template-columns: 2.5rem minmax(0, 1fr) auto; - } - - .home-example-row > p { - grid-column: 2 / span 2; - padding-bottom: 0.75rem; - } -} - -@media (max-width: 640px) { - .home-page--v2 .home-hero__grid { - min-height: 0; - gap: 2.25rem; - padding-block: 4rem 2.75rem; - } - - .home-page--v2 .home-hero__copy h1 { - font-size: clamp(3.55rem, 18vw, 5.1rem); - } - - .home-core-hero { - width: calc(100% + 1.5rem); - height: 29rem; - margin-inline: -0.75rem; - } - - .home-core-hero__boundary { - inset: 6% 1% 11%; - } - - .home-core-hero__boundary-label { - left: 1.4rem; - } - - .home-core-hero__boundary-state { - right: 1.4rem; - } - - .home-core-hero__engine { - top: 45%; - left: 51%; - width: 10.5rem; - height: 10.5rem; - } - - .home-core-hero__disc strong { - font-size: 3.25rem; - } - - .home-core-hero__halo--one { - inset: -1.25rem; - } - - .home-core-hero__halo--two { - inset: -2.7rem; - } - - .home-core-hero__halo--three { - inset: -4.2rem; - } - - .home-core-hero__wal { - top: 45%; - left: 51%; - width: 18rem; - height: 18rem; - } - - .home-core-hero__layers, - .home-core-hero__capabilities, - .home-core-hero__contours { - display: none; - } - - .home-core-hero__signal--query { - bottom: 24%; - left: 1%; - } - - .home-core-hero__signal--result { - top: 16%; - right: 1%; - } - - .home-core-hero__run { - right: 4%; - bottom: 5%; - } - - .home-page--v2 .home-sdk-rail ul { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1.25rem; - } - - .home-page--v2 .home-sdk-rail li:last-child { - grid-column: 1 / span 2; - } - - .home-page--v2 .home-section-heading h2 { - font-size: clamp(2.85rem, 13vw, 4.15rem); - } - - .home-use-card { - min-height: 25rem; - } - - .home-use-card__copy { - padding: 1.4rem; - } - - .home-use-signal { - min-height: 13rem; - } - - .home-bento-grid--v2 .home-card { - padding: 1.4rem; - } - - .home-card--engine, - .home-card--runtime-family, - .home-card--extension-ecosystem { - min-height: 31rem; - } - - .home-card--engine .home-card__copy h3 { - font-size: 2.45rem; - } - - .home-engine-visual { - min-height: 23rem; - } - - .home-engine-visual__core { - width: 72%; - } - - .home-engine-visual__cap { - width: 8.8rem; - height: 8.8rem; - } - - .home-engine-visual__cap strong { - font-size: 2.8rem; - } - - .home-engine-visual__layer { - min-height: 2.75rem; - gap: 0.5rem; - font-size: 0.46rem; - } - - .home-engine-visual__layer--data { - min-height: 3rem; - } - - .home-engine-visual__boundary code, - .home-engine-visual__commit, - .home-engine-visual__reopen { - display: none; - } - - .home-runtime-family { - min-height: 19rem; - } - - .home-runtime-family__postgres { - width: 6rem; - height: 6rem; - } - - .home-runtime-family__native { - left: 0; - } - - .home-runtime-family__wasix { - right: 0; - } - - .home-runtime-family__native small, - .home-runtime-family__wasix small { - display: none; - } - - .home-extension-orbit { - min-height: 20rem; - transform: scale(0.92); - } - - .home-extension-orbit li { - min-width: 6rem; - padding: 0.45rem 0.55rem; - } - - .home-extension-orbit > p { - display: none; - } - - .home-example-row { - min-height: 0; - grid-template-columns: 2rem minmax(0, 1fr) auto; - gap: 0.85rem; - padding-block: 1.4rem; - } - - .home-example-row > p { - grid-column: 2 / span 2; - } - - .home-example-row__name code { - white-space: normal; - } -} - -@media (max-width: 390px) { - .home-core-hero__signal small, - .home-core-hero__boundary-state { - display: none; - } - - .home-core-hero__signal--query { - bottom: 25%; - } - - .home-core-hero__signal--result { - top: 18%; - } - - .home-runtime-family__surface { - font-size: 0.44rem; - } - - .home-extension-orbit { - margin-inline: -1rem; - } -} - -@media (prefers-reduced-motion: no-preference) { - .home-core-hero { - animation: home-reveal 850ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-core-hero[data-flow-phase="query"] .home-core-hero__run-icon i, - .home-core-hero[data-flow-phase="commit"] .home-core-hero__run-icon i { - animation: home-core-spin 680ms linear infinite; - } - - .home-core-hero[data-flow-phase="commit"] .home-core-hero__wal-dot { - animation: home-core-wal-dot 620ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-use-card[data-motion-state="entered"] .home-use-signal__trace { - animation: home-use-trace 760ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-use-card[data-motion-state="entered"] .home-use-signal__radius { - animation: home-use-radius 620ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-use-card[data-motion-state="entered"] .home-use-signal__match-ring { - animation: home-use-match 620ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-use-card[data-motion-state="entered"] .home-use-signal__table--front { - animation: home-use-table 620ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card--engine[data-motion-state="entered"] .home-engine-visual__layer { - animation: home-engine-layer 620ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-card--engine[data-motion-state="entered"] .home-engine-visual__layer--data { - animation-delay: 90ms; - } - - .home-card--engine[data-motion-state="entered"] .home-engine-visual__layer--wal { - animation-delay: 180ms; - } - - .home-card--runtime-family[data-motion-state="entered"] .home-runtime-family__routes path, - .home-card--extension-ecosystem[data-motion-state="entered"] .home-extension-orbit > svg path { - animation: home-use-trace 760ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; - } -} - -@media (hover: hover) and (prefers-reduced-motion: no-preference) { - .home-use-card:hover .home-use-signal__pulse, - .home-use-card:hover .home-use-signal__target, - .home-use-card:hover .home-use-signal__vector--match { - animation: home-use-match 620ms ease-out 1; - } - - .home-card--engine:hover .home-engine-visual__layer--wal { - border-color: rgb(208 163 93 / 52%); - } - - .home-card--extension-ecosystem:hover .home-extension-orbit li:nth-child(odd) { - transform: translate(-50%, calc(-50% - 2px)); - } - - .home-card--extension-ecosystem:hover .home-extension-orbit li:nth-child(even) { - transform: translate(-50%, calc(-50% + 2px)); - } -} - -@keyframes home-core-spin { - to { - transform: rotate(1turn); - } -} - -@keyframes home-core-wal-dot { - from { - opacity: 0.3; - transform: scale(0.65); - } - 55% { - opacity: 1; - transform: scale(1.4); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@keyframes home-use-trace { - from { - opacity: 0.25; - stroke-dashoffset: 1; - } - to { - opacity: 1; - stroke-dashoffset: 0; - } -} - -@keyframes home-use-radius { - from { - opacity: 0; - transform: scale(0.72); - transform-origin: 228px 103px; - } - to { - opacity: 1; - transform: scale(1); - transform-origin: 228px 103px; - } -} - -@keyframes home-use-match { - from { - opacity: 0.35; - transform: scale(0.72); - transform-origin: center; - } - 60% { - opacity: 1; - transform: scale(1.18); - transform-origin: center; - } - to { - opacity: 1; - transform: scale(1); - transform-origin: center; - } -} - -@keyframes home-use-table { - from { - opacity: 0.38; - transform: translate(0.8rem, 0.6rem); - } - to { - opacity: 1; - transform: translate(0); - } -} - -@keyframes home-engine-layer { - from { - opacity: 0; - transform: translateY(-0.7rem) scale(0.96); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Abstract PostgreSQL hero sculpture */ - -.home-pg-sculpture { - position: relative; - z-index: 1; - width: 100%; - height: clamp(36rem, 43vw, 43.5rem); - margin: 0; - perspective: 1100px; - isolation: isolate; -} - -.home-pg-sculpture::before, -.home-pg-sculpture::after { - position: absolute; - border-radius: 50%; - content: ""; - pointer-events: none; -} - -.home-pg-sculpture::before { - z-index: -1; - top: 11%; - left: 15%; - width: 72%; - height: 72%; - background: radial-gradient(circle, rgb(97 188 147 / 12%), transparent 67%); - filter: blur(1rem); -} - -.home-pg-sculpture::after { - z-index: -1; - right: 7%; - bottom: 8%; - width: 42%; - height: 42%; - background: radial-gradient(circle, rgb(84 113 191 / 10%), transparent 68%); - filter: blur(2.2rem); -} - -.home-pg-sculpture__field { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-pg-sculpture__field path, -.home-pg-sculpture__field circle { - fill: none; - stroke: rgb(198 224 209 / 7.5%); - stroke-width: 1; - vector-effect: non-scaling-stroke; -} - -.home-pg-sculpture__field circle:first-of-type { - stroke: rgb(112 184 147 / 9%); - stroke-dasharray: 2 8; -} - -.home-pg-sculpture__field circle:last-of-type { - stroke: rgb(116 148 202 / 9%); -} - -.home-pg-sculpture__stage { - position: absolute; - z-index: 2; - top: 50%; - left: 52%; - width: min(33rem, 76%); - aspect-ratio: 1; - translate: -50% -50%; - /* Keep centering independent from Motion's pointer-driven transform. */ - transform-style: preserve-3d; - will-change: transform; -} - -.home-pg-sculpture__orbit { - position: absolute; - border: 1px solid rgb(177 212 192 / 14%); - border-radius: 50%; - transform-style: preserve-3d; -} - -.home-pg-sculpture__orbit::before, -.home-pg-sculpture__orbit::after { - position: absolute; - width: 0.5rem; - height: 0.5rem; - border: 2px solid #07110e; - border-radius: 50%; - content: ""; -} - -.home-pg-sculpture__orbit--outer { - inset: 3%; - border-color: rgb(140 183 160 / 13%); - transform: rotate(-19deg) rotateX(64deg) translateZ(-2rem); -} - -.home-pg-sculpture__orbit--outer::before { - top: 3%; - left: 26%; - background: #6ba6d0; - box-shadow: 0 0 0 0.28rem rgb(107 166 208 / 8%); -} - -.home-pg-sculpture__orbit--outer::after { - right: 7%; - bottom: 25%; - background: #54d394; - box-shadow: 0 0 0 0.28rem rgb(84 211 148 / 8%); -} - -.home-pg-sculpture__orbit--inner { - inset: 17%; - border-color: rgb(119 168 142 / 17%); - transform: rotate(31deg) rotateY(66deg) translateZ(-0.8rem); -} - -.home-pg-sculpture__orbit--inner::before { - top: 11%; - right: 18%; - background: #d0a35d; - box-shadow: 0 0 0 0.28rem rgb(208 163 93 / 8%); -} - -.home-pg-sculpture__orbit--inner::after { - display: none; -} - -.home-pg-sculpture__planes { - position: absolute; - inset: 10%; - transform-style: preserve-3d; -} - -.home-pg-sculpture__plane { - position: absolute; - inset: 12%; - border: 1px solid rgb(208 229 216 / 10%); - border-radius: 37% 30% 39% 28% / 30% 38% 29% 41%; - background: linear-gradient(145deg, rgb(255 255 255 / 2.5%), transparent 48%); - box-shadow: inset 0 1px rgb(255 255 255 / 3%); - transform-style: preserve-3d; -} - -.home-pg-sculpture__plane--one { - border-color: rgb(95 202 149 / 20%); - transform: rotate(-13deg) translate3d(-1.8rem, 1.25rem, -4rem); -} - -.home-pg-sculpture__plane--two { - border-color: rgb(117 169 207 / 20%); - transform: rotate(-5deg) translate3d(-0.8rem, 0.55rem, -2.5rem); -} - -.home-pg-sculpture__plane--three { - border-color: rgb(212 228 217 / 17%); - transform: rotate(5deg) translate3d(0.55rem, -0.35rem, -1rem); -} - -.home-pg-sculpture__plane--four { - border-color: rgb(98 210 154 / 22%); - transform: rotate(13deg) translate3d(1.35rem, -1rem, 0.5rem); -} - -.home-pg-sculpture__glyph-stack { - position: absolute; - z-index: 3; - inset: 20%; - transform-style: preserve-3d; -} - -.home-pg-sculpture__glyph { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow: visible; -} - -.home-pg-sculpture__glyph path { - vector-effect: non-scaling-stroke; -} - -.home-pg-sculpture__glyph--echo-one, -.home-pg-sculpture__glyph--echo-two, -.home-pg-sculpture__glyph--echo-three { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; -} - -.home-pg-sculpture__glyph--echo-one { - stroke: rgb(121 176 211 / 37%); - stroke-width: 0.7; - transform: translate3d(-1.4rem, 1rem, -0.5rem); -} - -.home-pg-sculpture__glyph--echo-two { - stroke: rgb(104 202 153 / 27%); - stroke-width: 0.58; - transform: translate3d(-2.7rem, 2rem, -1.3rem); -} - -.home-pg-sculpture__glyph--echo-three { - stroke: rgb(211 228 217 / 12%); - stroke-width: 0.48; - transform: translate3d(-4rem, 3rem, -2.1rem); } - -.home-pg-sculpture__core { - position: absolute; - z-index: 4; - inset: 0; - border: 1px solid rgb(212 229 218 / 17%); - border-radius: 38% 31% 39% 30% / 29% 39% 31% 40%; - background: - radial-gradient(circle at 36% 25%, rgb(116 171 207 / 14%), transparent 42%), - linear-gradient(145deg, rgb(17 42 32 / 96%), rgb(8 21 16 / 98%)); - box-shadow: - 0 3rem 7rem rgb(0 0 0 / 34%), - inset 0 1px rgb(255 255 255 / 6%), - inset 0 0 0 0.75rem rgb(255 255 255 / 1.7%); - transform: translateZ(1.4rem); -} - -.home-pg-sculpture__glyph--main { - inset: 15%; - width: 70%; - height: 70%; - fill: #8eb6d2; - filter: drop-shadow(0 1.25rem 2.5rem rgb(51 93 127 / 22%)); -} - -.home-pg-sculpture__version { - position: absolute; - right: 13%; - bottom: 12%; - display: grid; - width: 2.65rem; - height: 2.65rem; - place-items: center; - border: 1px solid rgb(84 211 148 / 38%); - border-radius: 50%; - background: #10271d; - color: #83d4aa; - font-family: var(--font-oliphaunt-mono), ui-monospace, monospace; - font-size: 0.68rem; - box-shadow: - 0 0.8rem 1.8rem rgb(0 0 0 / 24%), - 0 0 0 0.35rem rgb(84 211 148 / 4%); -} - -.home-pg-sculpture__satellite { - position: absolute; - z-index: 5; - display: grid; - width: 3.6rem; - height: 3.6rem; - place-items: center; - border: 1px solid rgb(209 228 216 / 13%); - border-radius: 1rem; - background: rgb(10 24 18 / 84%); - box-shadow: - 0 1.2rem 2.6rem rgb(0 0 0 / 24%), - inset 0 1px rgb(255 255 255 / 4%); - backdrop-filter: blur(0.7rem); -} - -.home-pg-sculpture__satellite i { - display: block; - width: 0.58rem; - height: 0.58rem; - border: 1px solid currentColor; - border-radius: 50%; - color: #64c997; - background: rgb(84 211 148 / 14%); - box-shadow: 0 0 0 0.35rem rgb(84 211 148 / 4%); -} - -.home-pg-sculpture__satellite--one { - top: 15%; - left: 5%; - transform: translateZ(2rem) rotate(-9deg); -} - -.home-pg-sculpture__satellite--two { - top: 23%; - right: 2%; - width: 2.8rem; - height: 2.8rem; - border-radius: 50%; - transform: translateZ(3rem); -} - -.home-pg-sculpture__satellite--two i { - color: #80acd0; - background: rgb(99 148 190 / 15%); - box-shadow: 0 0 0 0.35rem rgb(99 148 190 / 4%); -} - -.home-pg-sculpture__satellite--three { - right: 8%; - bottom: 12%; - width: 3rem; - height: 3rem; - transform: translateZ(1.5rem) rotate(12deg); -} - -.home-pg-sculpture__satellite--three i { - color: #d0a35d; - background: rgb(208 163 93 / 14%); - box-shadow: 0 0 0 0.35rem rgb(208 163 93 / 4%); -} - -@media (max-width: 1100px) { - .home-pg-sculpture { - width: min(100%, 52rem); - height: 38rem; - } -} - -@media (max-width: 640px) { - .home-pg-sculpture { - width: calc(100% + 1rem); - height: 28.5rem; - margin-inline: -0.5rem; - } - - .home-pg-sculpture__stage { - left: 50%; - width: 88%; - } - - .home-pg-sculpture__glyph--echo-three, - .home-pg-sculpture__field path:nth-child(-n + 2) { - display: none; - } - - .home-pg-sculpture__satellite--one { - left: -1%; - } - - .home-pg-sculpture__satellite--two { - right: -2%; - } - - .home-pg-sculpture__satellite--three { - right: 1%; - } -} - -@media (prefers-reduced-motion: no-preference) { - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__plane { - animation: home-pg-plane-reveal 780ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__plane--two { - animation-delay: 70ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__plane--three { - animation-delay: 140ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__plane--four { - animation-delay: 210ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__glyph--echo-one, - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__glyph--echo-two, - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__glyph--echo-three { - animation: home-pg-contour-draw 920ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__satellite { - animation: home-pg-satellite-reveal 620ms 320ms cubic-bezier(0.16, 1, 0.3, 1) both; - } -} - -@keyframes home-pg-plane-reveal { - from { - opacity: 0; - scale: 0.9; - } - to { - opacity: 1; - scale: 1; - } -} - -@keyframes home-pg-contour-draw { - from { - opacity: 0.18; - stroke-dasharray: 1; - stroke-dashoffset: 1; - } - to { - opacity: 1; - stroke-dasharray: 1; - stroke-dashoffset: 0; - } -} - -@keyframes home-pg-satellite-reveal { - from { - opacity: 0; - scale: 0.72; - } - to { - opacity: 1; - scale: 1; +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + /* biome-ignore lint/complexity/noImportantStyles: Respect reduced motion over component styles. */ + animation-duration: 0s !important; + /* biome-ignore lint/complexity/noImportantStyles: Respect reduced motion over component styles. */ + transition-duration: 0s !important; + /* biome-ignore lint/complexity/noImportantStyles: Respect reduced motion over component styles. */ + scroll-behavior: auto !important; } } diff --git a/src/docs/src/app/layout.tsx b/src/docs/src/app/layout.tsx index 87fbce951..de8cd72d4 100644 --- a/src/docs/src/app/layout.tsx +++ b/src/docs/src/app/layout.tsx @@ -1,20 +1,24 @@ import { RootProvider } from 'fumadocs-ui/provider/next'; import './global.css'; -import { IBM_Plex_Mono, IBM_Plex_Sans } from 'next/font/google'; import type { Metadata } from 'next'; +import { DM_Sans, Geist_Mono, Instrument_Serif } from 'next/font/google'; -const plexSans = IBM_Plex_Sans({ +const sans = DM_Sans({ subsets: ['latin'], - weight: ['400', '500', '600', '700'], variable: '--font-oliphaunt-sans', }); -const plexMono = IBM_Plex_Mono({ +const mono = Geist_Mono({ subsets: ['latin'], - weight: ['400', '500', '600'], variable: '--font-oliphaunt-mono', }); +const serif = Instrument_Serif({ + subsets: ['latin'], + weight: '400', + variable: '--font-oliphaunt-serif', +}); + export const metadata: Metadata = { metadataBase: new URL(process.env.NEXT_PUBLIC_OLIPHAUNT_DOCS_URL ?? 'https://oliphaunt.dev'), title: { @@ -32,11 +36,21 @@ export default function Layout({ children }: LayoutProps<'/'>) { return ( - - {children} + + + {children} + ); diff --git a/src/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts b/src/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts index 250181a70..5094f7e89 100644 --- a/src/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts +++ b/src/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts @@ -1,5 +1,5 @@ -import { getLLMText, getPageMarkdownUrl, source } from '@/lib/source'; import { notFound } from 'next/navigation'; +import { getLLMText, getPageMarkdownUrl, source } from '@/lib/source'; export const revalidate = false; diff --git a/src/docs/src/app/llms.txt/route.ts b/src/docs/src/app/llms.txt/route.ts index fc80cb652..ae69f77c2 100644 --- a/src/docs/src/app/llms.txt/route.ts +++ b/src/docs/src/app/llms.txt/route.ts @@ -1,5 +1,5 @@ -import { source } from '@/lib/source'; import { llms } from 'fumadocs-core/source'; +import { source } from '@/lib/source'; export const revalidate = false; diff --git a/src/docs/src/app/og/docs/[...slug]/route.tsx b/src/docs/src/app/og/docs/[...slug]/route.tsx index 877166d34..cef5a2ee4 100644 --- a/src/docs/src/app/og/docs/[...slug]/route.tsx +++ b/src/docs/src/app/og/docs/[...slug]/route.tsx @@ -1,8 +1,7 @@ -import { getPageImage, source } from '@/lib/source'; import { notFound } from 'next/navigation'; import { ImageResponse } from 'next/og'; -import { generate as DefaultImage } from 'fumadocs-ui/og'; -import { appName } from '@/lib/shared'; +import { OliphauntMark } from '@/components/brand'; +import { getPageImage, source } from '@/lib/source'; export const revalidate = false; @@ -12,7 +11,39 @@ export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[... if (!page) notFound(); return new ImageResponse( - , +
+
+ + oliphaunt + Documentation +
+
+ {page.data.title} +
+
+ {page.data.description} +
+
oliphaunt.dev / docs
+
, { width: 1200, height: 630, diff --git a/src/docs/src/components/brand.tsx b/src/docs/src/components/brand.tsx index 208c3afea..0e0eaf16c 100644 --- a/src/docs/src/components/brand.tsx +++ b/src/docs/src/components/brand.tsx @@ -7,31 +7,14 @@ export function OliphauntMark({ className, ...props }: ComponentPropsWithoutRef< aria-hidden="true" className={cn('oliphaunt-mark', className)} viewBox="0 0 32 32" - fill="none" + fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props} > - - - - ); } @@ -39,72 +22,8 @@ export function OliphauntMark({ className, ...props }: ComponentPropsWithoutRef< export function OliphauntWordmark({ className }: { className?: string }) { return ( - - - - Oliphaunt + + oliphaunt ); } - -/** - * Official WASIX mark, adapted from the MIT-licensed WASIX site component. - * Source pinned at wasix-org/wasix.org@d084eeea153766d6d419d995be0585cd0eac86ac. - */ -export function WasixMark({ className, ...props }: ComponentPropsWithoutRef<'svg'>) { - return ( - - ); -} diff --git a/src/docs/src/components/home-hero-flow.tsx b/src/docs/src/components/home-hero-flow.tsx deleted file mode 100644 index fe5fbfb47..000000000 --- a/src/docs/src/components/home-hero-flow.tsx +++ /dev/null @@ -1,227 +0,0 @@ -'use client'; - -import { - motion, - useInView, - useMotionValue, - useReducedMotion, - useSpring, - useTransform, -} from 'motion/react'; -import { useRef } from 'react'; -import { siPostgresql } from 'simple-icons'; -import './home-hero-sculpture.css'; - -const SPRING = { stiffness: 170, damping: 24, mass: 0.72 }; - -export function HomeHeroFlow() { - const figureRef = useRef(null); - const inView = useInView(figureRef, { amount: 0.35, once: true }); - const reduceMotion = useReducedMotion(); - const pointerX = useMotionValue(0); - const pointerY = useMotionValue(0); - const rotateX = useSpring(useTransform(pointerY, [-1, 1], [4.5, -4.5]), SPRING); - const rotateY = useSpring(useTransform(pointerX, [-1, 1], [-5.5, 5.5]), SPRING); - const shiftX = useSpring(useTransform(pointerX, [-1, 1], [-7, 7]), SPRING); - const shiftY = useSpring(useTransform(pointerY, [-1, 1], [-5, 5]), SPRING); - - return ( -
{ - pointerX.set(0); - pointerY.set(0); - }} - onPointerMove={(event) => { - if (reduceMotion || event.pointerType === 'touch') { - return; - } - - const bounds = event.currentTarget.getBoundingClientRect(); - pointerX.set(((event.clientX - bounds.left) / bounds.width - 0.5) * 2); - pointerY.set(((event.clientY - bounds.top) / bounds.height - 0.5) * 2); - }} - ref={figureRef} - > -
- An abstract layered PostgreSQL elephant sculpture representing the database embedded inside - the application. -
- - - - -
- ); -} diff --git a/src/docs/src/components/home-hero-sculpture.css b/src/docs/src/components/home-hero-sculpture.css deleted file mode 100644 index 32c7e28dc..000000000 --- a/src/docs/src/components/home-hero-sculpture.css +++ /dev/null @@ -1,249 +0,0 @@ -/* Deconstructed embedded-engine hero */ - -.home-pg-sculpture__assembly { - display: block; - width: 100%; - height: 100%; - overflow: visible; - filter: drop-shadow(0 2.75rem 4.5rem rgb(0 0 0 / 18%)); -} - -.home-pg-sculpture__boundary-line, -.home-pg-sculpture__flow-line, -.home-pg-sculpture__elephant-outline, -.home-pg-sculpture__elephant-fragment { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; - vector-effect: non-scaling-stroke; -} - -.home-pg-sculpture__boundary-line { - stroke: rgb(181 217 198 / 15%); - stroke-width: 1; -} - -.home-pg-sculpture__boundary-line--inner { - stroke: rgb(122 172 146 / 11%); - stroke-dasharray: 0.012 0.026; -} - -.home-pg-sculpture__stratum { - stroke-width: 1; - transform-box: fill-box; - transform-origin: center; - vector-effect: non-scaling-stroke; -} - -.home-pg-sculpture__stratum--one { - fill: url("#home-pg-stratum-blue"); - stroke: rgb(122 175 211 / 16%); -} - -.home-pg-sculpture__stratum--two { - fill: url("#home-pg-stratum-mint"); - stroke: rgb(94 204 150 / 19%); -} - -.home-pg-sculpture__stratum--three { - fill: rgb(238 245 240 / 1.8%); - stroke: rgb(205 229 216 / 11%); -} - -.home-pg-sculpture__flow-line { - stroke-width: 1; -} - -.home-pg-sculpture__flow-line--quiet { - stroke: rgb(186 216 200 / 9%); -} - -.home-pg-sculpture__flow-line--active { - stroke: rgb(91 210 151 / 26%); - stroke-dasharray: 0.005 0.018; -} - -.home-pg-sculpture__flow-line--return { - stroke: rgb(122 174 211 / 13%); - stroke-dasharray: 0.09 0.02 0.015 0.02; -} - -.home-pg-sculpture__elephant-ghost { - fill: rgb(127 176 207 / 4.5%); - stroke: none; -} - -.home-pg-sculpture__elephant-outline { - stroke: rgb(196 222 209 / 15%); - stroke-width: 1; -} - -.home-pg-sculpture__elephant-fragment { - stroke-width: 2; -} - -.home-pg-sculpture__elephant-fragment--top { - stroke: rgb(126 180 216 / 68%); -} - -.home-pg-sculpture__elephant-fragment--middle { - stroke: rgb(189 225 207 / 76%); -} - -.home-pg-sculpture__elephant-fragment--bottom { - stroke: rgb(89 211 150 / 72%); -} - -.home-pg-sculpture__core-halo { - fill: url("#home-pg-core-glow"); -} - -.home-pg-sculpture__core-ring { - fill: rgb(7 19 14 / 68%); - stroke: rgb(90 211 150 / 24%); - stroke-width: 1; -} - -.home-pg-sculpture__node { - fill: #07120e; - stroke: rgb(116 191 153 / 38%); - stroke-width: 1; - transform-box: fill-box; - transform-origin: center; -} - -.home-pg-sculpture__node--one, -.home-pg-sculpture__node--four { - fill: #74afd4; - stroke: #07120e; - stroke-width: 3; -} - -.home-pg-sculpture__node--two, -.home-pg-sculpture__node--three { - fill: #5fd498; - stroke: #07120e; - stroke-width: 3; -} - -.home-pg-sculpture__node--core { - fill: #65d69b; - stroke: #d2f4e2; - stroke-width: 2; -} - -@media (max-width: 640px) { - .home-pg-sculpture__stage { - width: 97%; - } - - .home-pg-sculpture__assembly { - filter: drop-shadow(0 2rem 3.2rem rgb(0 0 0 / 16%)); - } - - .home-pg-sculpture__elephant-fragment { - stroke-width: 1.65; - } -} - -@media (prefers-reduced-motion: no-preference) { - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__boundary-line { - animation: home-pg-boundary-draw 1.15s 80ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__boundary-line--inner { - animation-delay: 170ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__stratum { - animation: home-pg-stratum-enter 850ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__stratum--two { - animation-delay: 230ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__stratum--three { - animation-delay: 300ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__elephant-outline, - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__elephant-fragment { - animation: home-pg-contour-draw 1.1s 230ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__elephant-fragment--middle { - animation-delay: 310ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__elephant-fragment--bottom { - animation-delay: 390ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__flow-line--active { - animation: home-pg-flow-travel 8s 900ms linear infinite; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__node { - animation: home-pg-node-enter 620ms 620ms cubic-bezier(0.16, 1, 0.3, 1) both; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__node--two { - animation-delay: 690ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__node--core { - animation-delay: 760ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__node--three { - animation-delay: 830ms; - } - - .home-pg-sculpture[data-motion-state="entered"] .home-pg-sculpture__node--four { - animation-delay: 900ms; - } -} - -@keyframes home-pg-boundary-draw { - from { - opacity: 0.15; - stroke-dasharray: 1; - stroke-dashoffset: 1; - } - to { - opacity: 1; - stroke-dasharray: 1; - stroke-dashoffset: 0; - } -} - -@keyframes home-pg-stratum-enter { - from { - opacity: 0; - scale: 0.94; - translate: 0 1.2rem; - } - to { - opacity: 1; - scale: 1; - translate: 0 0; - } -} - -@keyframes home-pg-flow-travel { - to { - stroke-dashoffset: -1; - } -} - -@keyframes home-pg-node-enter { - from { - opacity: 0; - scale: 0; - } - to { - opacity: 1; - scale: 1; - } -} diff --git a/src/docs/src/components/home-interactive.tsx b/src/docs/src/components/home-interactive.tsx deleted file mode 100644 index 1605d4c29..000000000 --- a/src/docs/src/components/home-interactive.tsx +++ /dev/null @@ -1,1717 +0,0 @@ -'use client'; - -import { AnimatePresence, LayoutGroup, motion, useInView } from 'motion/react'; -import type { CSSProperties, KeyboardEvent, ReactNode } from 'react'; -import { useEffect, useId, useRef, useState } from 'react'; -import { siKotlin, siReact, siRust, siSwift, siTypescript } from 'simple-icons'; -import { WasixMark } from '@/components/brand'; - -type BrandIconProps = { - id: string; - className?: string; - title?: string; -}; - -type BrandMark = { - hex: string; - path: string; - title: string; -}; - -const BRAND_ICONS: Record = { - rust: siRust, - swift: siSwift, - kotlin: siKotlin, - react: siReact, - 'react-native': siReact, - typescript: siTypescript, -}; - -export function BrandIcon({ id, className, title }: BrandIconProps) { - const icon = BRAND_ICONS[id]; - - if (id === 'wasix') { - return ( - - ); - } - - if (!icon) { - return null; - } - - return ( - - {title ? {title} : null} - - - ); -} - -type ProductUseCaseId = 'workspace' | 'field' | 'retrieval' | 'data-tools'; - -type ProductUseCase = { - id: ProductUseCaseId; - title: string; - description: string; - nodes: readonly { label: string; detail: string }[]; - sql: string; - meaning: string; -}; - -const PRODUCT_USE_CASES: readonly ProductUseCase[] = [ - { - id: 'workspace', - title: 'Knowledge and creative tools', - description: - 'Keep documents, projects, revision history, metadata, and retrieval in one local PostgreSQL model.', - nodes: [ - { label: 'projects', detail: 'workspace' }, - { label: 'documents', detail: 'content + metadata' }, - { label: 'revisions', detail: 'history' }, - ], - sql: `SELECT d.title, count(r.id) AS revisions -FROM documents d -LEFT JOIN revisions r ON r.document_id = d.id -GROUP BY d.id;`, - meaning: 'The document, its history, and its metadata remain queryable together.', - }, - { - id: 'field', - title: 'Field and mobile software', - description: - 'Keep field records in an app-owned root; select PostGIS for nearby-asset queries on supported targets.', - nodes: [ - { label: 'assets', detail: 'reference data' }, - { label: 'locations', detail: 'PostGIS geography' }, - { label: 'inspections', detail: 'workflow history' }, - ], - sql: `SELECT id, ST_Distance(location, $1::geography) AS distance_m -FROM assets -WHERE ST_DWithin(location, $1::geography, 5000);`, - meaning: 'On a target that ships PostGIS, location stays queryable beside field records.', - }, - { - id: 'retrieval', - title: 'Local retrieval', - description: - 'With vector selected for the target, store embeddings beside source data and combine semantic ranking with relational filters.', - nodes: [ - { label: 'sources', detail: 'original content' }, - { label: 'embeddings', detail: 'vector' }, - { label: 'metadata', detail: 'relational filters' }, - ], - sql: `SELECT title -FROM documents -WHERE project_id = $1 -ORDER BY embedding <=> $2 -LIMIT 8;`, - meaning: 'The selected vector extension and structured filters run in the same query.', - }, - { - id: 'data-tools', - title: 'Data and developer tools', - description: - 'Import, inspect, transform, and query complex local datasets with familiar PostgreSQL behavior.', - nodes: [ - { label: 'imports', detail: 'source records' }, - { label: 'transforms', detail: 'PostgreSQL SQL' }, - { label: 'results', detail: 'queryable data' }, - ], - sql: `SELECT event_type, count(*) -FROM imported_events -GROUP BY event_type -ORDER BY count(*) DESC;`, - meaning: 'Imported records and transformations stay inspectable in PostgreSQL.', - }, -]; - -export function MotionArticle({ className, children }: { className: string; children: ReactNode }) { - const ref = useRef(null); - const inView = useInView(ref, { amount: 0.32, once: true }); - - return ( -
- {children} -
- ); -} - -type RuntimeId = 'direct' | 'broker' | 'server' | 'wasix'; - -type RuntimeNode = { - id: string; - label: string; - detail: string; -}; - -type RuntimeGroup = { - id: string; - label: string; - nodes: RuntimeNode[]; -}; - -type RuntimeMode = { - id: RuntimeId; - label: string; - title: string; - useWhen: string; - boundary: string; - groups: RuntimeGroup[]; - routes: string[]; -}; - -const RUNTIME_MODES: readonly RuntimeMode[] = [ - { - id: 'direct', - label: 'Native direct', - title: 'The embedded session', - useWhen: 'One app database needs the lowest overhead path.', - boundary: 'One physical PostgreSQL session with serialized work.', - groups: [ - { - id: 'application', - label: 'Application process', - nodes: [ - { id: 'app', label: 'App code', detail: 'Owns the database handle' }, - { id: 'sdk', label: 'Oliphaunt SDK', detail: 'Serializes calls' }, - { id: 'postgres', label: 'PostgreSQL', detail: 'One physical session' }, - ], - }, - ], - routes: ['M72 112H648'], - }, - { - id: 'broker', - label: 'Native broker', - title: 'A helper-process boundary', - useWhen: 'A desktop app needs helper-process ownership, multiple roots, or recovery.', - boundary: 'Helper process boundary for desktop SDKs.', - groups: [ - { - id: 'application', - label: 'Application process', - nodes: [ - { id: 'app', label: 'App code', detail: 'Owns SDK handles' }, - { id: 'sdk', label: 'Oliphaunt SDK', detail: 'Routes work by root' }, - ], - }, - { - id: 'helper', - label: 'Helper process', - nodes: [ - { id: 'broker', label: 'Broker', detail: 'Owns the active root' }, - { id: 'postgres', label: 'PostgreSQL', detail: 'One session per root' }, - ], - }, - ], - routes: ['M72 112H292C324 112 324 112 356 112H648'], - }, - { - id: 'server', - label: 'Native server', - title: 'Independent PostgreSQL sessions', - useWhen: 'A supported target advertises server mode for PostgreSQL clients and tools.', - boundary: 'PostgreSQL-compatible process boundary with independent client sessions.', - groups: [ - { - id: 'clients', - label: 'PostgreSQL clients', - nodes: [ - { id: 'app', label: 'App client', detail: 'Connection string' }, - { id: 'tools', label: 'ORM or tools', detail: 'PostgreSQL protocol' }, - ], - }, - { - id: 'server', - label: 'Server process', - nodes: [ - { id: 'server', label: 'Native server', detail: 'Independent sessions' }, - { id: 'postgres', label: 'PostgreSQL root', detail: 'Managed by the server process' }, - ], - }, - ], - routes: ['M72 76H260C316 76 316 112 372 112H648', 'M72 148H260C316 148 316 112 372 112'], - }, - { - id: 'wasix', - label: 'WASIX family', - title: 'The WASIX runtime family', - useWhen: 'The app targets a WASIX host or deliberately carries portable runtime assets.', - boundary: - 'Runtime-specific WASIX assets with direct Rust or a local PostgreSQL endpoint, depending on the selected API.', - groups: [ - { - id: 'host', - label: 'WASIX host', - nodes: [ - { id: 'app', label: 'App code', detail: 'Direct API or local URL' }, - { id: 'wasix', label: 'oliphaunt-wasix', detail: 'Own runtime assets' }, - { id: 'postgres', label: 'PostgreSQL', detail: 'Managed by the WASIX runtime' }, - ], - }, - ], - routes: ['M72 112H648'], - }, -]; - -type SdkId = 'rust' | 'swift' | 'kotlin' | 'react-native' | 'typescript'; -type CodeLanguage = 'rust' | 'swift' | 'kotlin' | 'typescript' | 'c'; - -type SdkExample = { - id: SdkId; - label: string; - brand: string; - packageName: string; - language: CodeLanguage; - code: string; -}; - -const SDK_EXAMPLES: readonly SdkExample[] = [ - { - id: 'rust', - label: 'Rust', - brand: 'rust', - packageName: 'oliphaunt', - language: 'rust', - code: `use oliphaunt::{DatabaseStorage, Oliphaunt}; - -fn open_database() -> oliphaunt::Result<()> { - let mut db = Oliphaunt::builder() - .storage(DatabaseStorage::Directory(".oliphaunt".into())) - .direct() - .open()?; - - db.execute(r#" - CREATE TABLE IF NOT EXISTS todos ( - id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - title text NOT NULL UNIQUE, - done boolean NOT NULL DEFAULT false - ) - "#)?; - db.execute_with_params( - "INSERT INTO todos (title) VALUES ($1) \ - ON CONFLICT (title) DO UPDATE SET done = false", - ["Run the first product query"], - )?; - let todos = db - .query("SELECT title FROM todos WHERE NOT done ORDER BY id DESC LIMIT 20")?; - let first_title: &str = todos.rows()[0].try_get("title")?; - - db.close()?; - Ok(()) -}`, - }, - { - id: 'swift', - label: 'Swift', - brand: 'swift', - packageName: 'Oliphaunt', - language: 'swift', - code: `let appSupport = FileManager.default.urls( - for: .applicationSupportDirectory, - in: .userDomainMask -)[0] - -let database = try await OliphauntDatabase.open( - configuration: OliphauntConfiguration( - storage: .directory(appSupport.appending(path: "main.oliphaunt")), - extensions: [] - ) -) - -try await database.execute(""" - CREATE TABLE IF NOT EXISTS todos ( - id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - title text NOT NULL UNIQUE, - done boolean NOT NULL DEFAULT false - ) - """) -try await database.query( - """INSERT INTO todos (title) VALUES ($1) - ON CONFLICT (title) DO UPDATE SET done = false""", - parameters: [.string("Run the first product query")] -) -let todos = try await database.query( - "SELECT title FROM todos WHERE NOT done ORDER BY id DESC LIMIT 20" -) -let firstTitle: String? = try todos.rows[0].value(named: "title") - -try await database.close()`, - }, - { - id: 'kotlin', - label: 'Kotlin', - brand: 'kotlin', - packageName: 'dev.oliphaunt:oliphaunt-android', - language: 'kotlin', - code: `val database = Oliphaunt.open( - context = applicationContext, - config = OliphauntConfig( - storage = DatabaseStorage.Directory( - applicationContext.filesDir.resolve("main.oliphaunt").absolutePath, - ), - extensions = emptyList(), - ), -) - -database.execute( - """CREATE TABLE IF NOT EXISTS todos ( - id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - title text NOT NULL UNIQUE, - done boolean NOT NULL DEFAULT false - )""".trimIndent(), -) -database.query( - """INSERT INTO todos (title) VALUES (${'$'}1) - ON CONFLICT (title) DO UPDATE SET done = false""".trimIndent(), - listOf(QueryParam.string("Run the first product query")), -) -val todos = database.query( - "SELECT title FROM todos WHERE NOT done ORDER BY id DESC LIMIT 20" -) -val firstTitle = todos.rows.first().value("title", PostgresDecoders.string) - -database.close()`, - }, - { - id: 'react-native', - label: 'React Native', - brand: 'react', - packageName: '@oliphaunt/react-native', - language: 'typescript', - code: `import { Oliphaunt } from '@oliphaunt/react-native'; - -const db = await Oliphaunt.open({ - storage: { kind: 'applicationData', name: 'main' }, - extensions: [], -}); - -await db.execute(\` - CREATE TABLE IF NOT EXISTS todos ( - id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - title text NOT NULL UNIQUE, - done boolean NOT NULL DEFAULT false - ) -\`); -await db.query( - \`INSERT INTO todos (title) VALUES ($1) - ON CONFLICT (title) DO UPDATE SET done = false\`, - ['Run the first product query'], -); -const todos = await db.query( - 'SELECT title FROM todos WHERE NOT done ORDER BY id DESC LIMIT 20', -); -const firstTitle = todos.rows[0]?.title; - -await db.close();`, - }, - { - id: 'typescript', - label: 'TypeScript', - brand: 'typescript', - packageName: '@oliphaunt/ts', - language: 'typescript', - code: `import { Oliphaunt } from '@oliphaunt/ts'; - -const db = await Oliphaunt.open({ - topology: 'broker', - storage: { kind: 'directory', path: './app-data/main.oliphaunt' }, - extensions: [], -}); - -await db.execute(\` - CREATE TABLE IF NOT EXISTS todos ( - id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - title text NOT NULL UNIQUE, - done boolean NOT NULL DEFAULT false - ) -\`); -await db.query( - \`INSERT INTO todos (title) VALUES ($1) - ON CONFLICT (title) DO UPDATE SET done = false\`, - ['Run the first product query'], -); -const todos = await db.query( - 'SELECT title FROM todos WHERE NOT done ORDER BY id DESC LIMIT 20', -); -const firstTitle = todos.rows[0]?.title; - -await db.close();`, - }, -]; - -type CodeTokenKind = - | 'comment' - | 'constant' - | 'directive' - | 'function' - | 'keyword' - | 'macro' - | 'number' - | 'operator' - | 'property' - | 'string' - | 'type'; - -type CodeToken = { - kind?: CodeTokenKind; - offset: number; - value: string; -}; - -type TokenizedCodeLine = { - number: number; - tokens: readonly CodeToken[]; -}; - -const CODE_KEYWORDS: Record> = { - rust: new Set([ - 'as', - 'async', - 'await', - 'break', - 'const', - 'continue', - 'crate', - 'dyn', - 'else', - 'enum', - 'extern', - 'false', - 'fn', - 'for', - 'if', - 'impl', - 'in', - 'let', - 'loop', - 'match', - 'mod', - 'move', - 'mut', - 'pub', - 'ref', - 'return', - 'self', - 'Self', - 'static', - 'struct', - 'super', - 'trait', - 'true', - 'type', - 'unsafe', - 'use', - 'where', - 'while', - ]), - swift: new Set([ - 'as', - 'await', - 'break', - 'case', - 'catch', - 'class', - 'continue', - 'default', - 'defer', - 'do', - 'else', - 'enum', - 'extension', - 'false', - 'for', - 'func', - 'guard', - 'if', - 'import', - 'in', - 'init', - 'inout', - 'internal', - 'is', - 'let', - 'nil', - 'open', - 'private', - 'protocol', - 'public', - 'repeat', - 'return', - 'self', - 'Self', - 'static', - 'struct', - 'subscript', - 'super', - 'switch', - 'throw', - 'throws', - 'true', - 'try', - 'typealias', - 'var', - 'where', - 'while', - ]), - kotlin: new Set([ - 'as', - 'break', - 'by', - 'catch', - 'class', - 'companion', - 'const', - 'continue', - 'data', - 'do', - 'else', - 'enum', - 'false', - 'for', - 'fun', - 'if', - 'import', - 'in', - 'interface', - 'is', - 'null', - 'object', - 'package', - 'private', - 'protected', - 'public', - 'return', - 'sealed', - 'super', - 'suspend', - 'this', - 'throw', - 'true', - 'try', - 'typealias', - 'val', - 'var', - 'when', - 'while', - ]), - typescript: new Set([ - 'as', - 'async', - 'await', - 'break', - 'case', - 'catch', - 'class', - 'const', - 'continue', - 'debugger', - 'default', - 'delete', - 'do', - 'else', - 'enum', - 'export', - 'extends', - 'false', - 'finally', - 'for', - 'from', - 'function', - 'if', - 'implements', - 'import', - 'in', - 'instanceof', - 'interface', - 'let', - 'new', - 'null', - 'private', - 'protected', - 'public', - 'return', - 'static', - 'super', - 'switch', - 'this', - 'throw', - 'true', - 'try', - 'type', - 'typeof', - 'undefined', - 'var', - 'void', - 'while', - 'with', - 'yield', - ]), - c: new Set([ - 'auto', - 'break', - 'case', - 'char', - 'const', - 'continue', - 'default', - 'do', - 'double', - 'else', - 'enum', - 'extern', - 'float', - 'for', - 'if', - 'inline', - 'int', - 'long', - 'register', - 'restrict', - 'return', - 'short', - 'signed', - 'sizeof', - 'static', - 'struct', - 'switch', - 'typedef', - 'union', - 'unsigned', - 'void', - 'volatile', - 'while', - ]), -}; - -const CODE_TYPES: Record> = { - rust: new Set([ - 'bool', - 'char', - 'f32', - 'f64', - 'i8', - 'i16', - 'i32', - 'i64', - 'isize', - 'str', - 'u8', - 'u16', - 'u32', - 'u64', - 'usize', - ]), - swift: new Set(['Any', 'Bool', 'Character', 'Double', 'Float', 'Int', 'String', 'UInt']), - kotlin: new Set([ - 'Any', - 'Boolean', - 'Byte', - 'Char', - 'Double', - 'Float', - 'Int', - 'Long', - 'Short', - 'String', - 'Unit', - ]), - typescript: new Set([ - 'any', - 'bigint', - 'boolean', - 'never', - 'number', - 'object', - 'string', - 'symbol', - 'unknown', - ]), - c: new Set([ - 'bool', - 'int8_t', - 'int16_t', - 'int32_t', - 'int64_t', - 'size_t', - 'uint8_t', - 'uint16_t', - 'uint32_t', - 'uint64_t', - ]), -}; - -const IDENTIFIER_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*/; -const NUMBER_PATTERN = /^(?:0[xX][0-9A-Fa-f]+|\d+(?:\.\d+)?)/; -const OPERATOR_PATTERN = /^(?:::|->|=>|===|!==|==|!=|<=|>=|&&|\|\||\+\+|--|\.\.|[+\-*/%=!<>&|?:.])/; - -function pushCodeToken(tokens: CodeToken[], value: string, offset: number, kind?: CodeTokenKind) { - if (value.length === 0) { - return; - } - - const previous = tokens.at(-1); - if (previous && previous.kind === kind && previous.offset + previous.value.length === offset) { - previous.value += value; - return; - } - - tokens.push({ kind, offset, value }); -} - -function quotedTokenEnd(line: string, start: number, quote: string) { - let cursor = start + 1; - - while (cursor < line.length) { - if (line[cursor] === '\\') { - cursor += 2; - continue; - } - if (line[cursor] === quote) { - return cursor + 1; - } - cursor += 1; - } - - return line.length; -} - -function identifierKind( - identifier: string, - language: CodeLanguage, - line: string, - start: number, - end: number, -): CodeTokenKind | undefined { - const previousCharacter = line.slice(0, start).trimEnd().at(-1); - const nextCharacter = line.slice(end).trimStart()[0]; - const isMember = previousCharacter === '.'; - - if (isMember && identifier !== 'await') { - return nextCharacter === '(' ? 'function' : 'property'; - } - if (CODE_KEYWORDS[language].has(identifier)) { - return 'keyword'; - } - if (/^[A-Z][A-Z0-9_]+$/.test(identifier)) { - return 'constant'; - } - if (CODE_TYPES[language].has(identifier) || /^[A-Z][A-Za-z0-9_]*$/.test(identifier)) { - return 'type'; - } - if (nextCharacter === '!') { - return 'macro'; - } - if (nextCharacter === '(') { - return 'function'; - } - if (nextCharacter === ':') { - return 'property'; - } - - return undefined; -} - -function tokenizeCodeLine(line: string, language: CodeLanguage, startsInComment: boolean) { - const tokens: CodeToken[] = []; - const includeLine = language === 'c' && line.trimStart().startsWith('#include'); - let cursor = 0; - let inBlockComment = startsInComment; - - while (cursor < line.length) { - if (inBlockComment) { - const commentEnd = line.indexOf('*/', cursor); - const end = commentEnd === -1 ? line.length : commentEnd + 2; - pushCodeToken(tokens, line.slice(cursor, end), cursor, 'comment'); - cursor = end; - inBlockComment = commentEnd === -1; - continue; - } - - if (line.startsWith('//', cursor)) { - pushCodeToken(tokens, line.slice(cursor), cursor, 'comment'); - break; - } - if (line.startsWith('/*', cursor)) { - const commentEnd = line.indexOf('*/', cursor + 2); - const end = commentEnd === -1 ? line.length : commentEnd + 2; - pushCodeToken(tokens, line.slice(cursor, end), cursor, 'comment'); - cursor = end; - inBlockComment = commentEnd === -1; - continue; - } - - const character = line[cursor]; - if (character === '"' || character === "'" || character === '`') { - const end = quotedTokenEnd(line, cursor, character); - pushCodeToken(tokens, line.slice(cursor, end), cursor, 'string'); - cursor = end; - continue; - } - if (includeLine && character === '<') { - const closingBracket = line.indexOf('>', cursor + 1); - const end = closingBracket === -1 ? line.length : closingBracket + 1; - pushCodeToken(tokens, line.slice(cursor, end), cursor, 'string'); - cursor = end; - continue; - } - if (character === '#') { - const directive = line.slice(cursor).match(/^#[A-Za-z_][A-Za-z0-9_]*/)?.[0]; - if (directive) { - pushCodeToken(tokens, directive, cursor, 'directive'); - cursor += directive.length; - continue; - } - } - - const remainder = line.slice(cursor); - const identifier = remainder.match(IDENTIFIER_PATTERN)?.[0]; - if (identifier) { - const end = cursor + identifier.length; - pushCodeToken( - tokens, - identifier, - cursor, - identifierKind(identifier, language, line, cursor, end), - ); - cursor = end; - continue; - } - - const number = remainder.match(NUMBER_PATTERN)?.[0]; - if (number) { - pushCodeToken(tokens, number, cursor, 'number'); - cursor += number.length; - continue; - } - - const operator = remainder.match(OPERATOR_PATTERN)?.[0]; - if (operator) { - pushCodeToken(tokens, operator, cursor, 'operator'); - cursor += operator.length; - continue; - } - - pushCodeToken(tokens, character, cursor); - cursor += 1; - } - - return { inBlockComment, tokens }; -} - -function tokenizeCode(code: string, language: CodeLanguage): readonly TokenizedCodeLine[] { - let inBlockComment = false; - - return code.split('\n').map((line, index) => { - const result = tokenizeCodeLine(line, language, inBlockComment); - inBlockComment = result.inBlockComment; - return { number: index + 1, tokens: result.tokens }; - }); -} - -const TOKENIZED_SDK_CODE: ReadonlyMap = new Map( - SDK_EXAMPLES.map( - (example) => [example.id, tokenizeCode(example.code, example.language)] as const, - ), -); - -const EMPTY_CODE_LINES: readonly TokenizedCodeLine[] = []; - -type ExtensionOption = { - id: 'vector' | 'postgis' | 'pg_trgm' | 'pgcrypto'; - extensionDependencies: string[]; - nativeDependencies: string[]; -}; - -const EXTENSION_OPTIONS: readonly ExtensionOption[] = [ - { - id: 'vector', - extensionDependencies: [], - nativeDependencies: [], - }, - { - id: 'postgis', - extensionDependencies: [], - nativeDependencies: [ - 'geos:3.14.1-static', - 'proj:9.8.1-static', - 'sqlite:3.53.1-static', - 'libxml2:2.14.6-static', - 'json-c:0.18-static', - 'libiconv:1.19-static', - ], - }, - { - id: 'pg_trgm', - extensionDependencies: [], - nativeDependencies: [], - }, - { - id: 'pgcrypto', - extensionDependencies: [], - nativeDependencies: ['openssl:3.5.6-libcrypto-wasix-static'], - }, -]; - -const TAB_SPRING = { - type: 'spring' as const, - stiffness: 560, - damping: 42, - mass: 0.65, -}; - -const LAYOUT_SPRING = { - type: 'spring' as const, - stiffness: 420, - damping: 38, - mass: 0.7, -}; - -function useMountedReducedMotion() { - const [reduceMotion, setReduceMotion] = useState(false); - - useEffect(() => { - const media = window.matchMedia('(prefers-reduced-motion: reduce)'); - const syncPreference = () => setReduceMotion(media.matches); - syncPreference(); - media.addEventListener('change', syncPreference); - return () => media.removeEventListener('change', syncPreference); - }, []); - - return reduceMotion; -} - -function getPanelMotion(reduceMotion: boolean) { - return { - initial: reduceMotion ? false : { opacity: 0, y: 8 }, - animate: reduceMotion ? undefined : { opacity: 1, y: 0 }, - exit: reduceMotion ? undefined : { opacity: 0, y: -6 }, - transition: { duration: reduceMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] as const }, - }; -} - -function getDockMotion(reduceMotion: boolean) { - return { - initial: reduceMotion ? false : { opacity: 0, y: -14, scale: 0.96 }, - animate: reduceMotion ? undefined : { opacity: 1, y: 0, scale: 1 }, - exit: reduceMotion ? undefined : { opacity: 0, y: 10, scale: 0.97 }, - transition: reduceMotion ? { duration: 0 } : LAYOUT_SPRING, - }; -} - -function useAccessibleTabs(items: readonly { id: T }[], initialId: T) { - const [selectedId, setSelectedId] = useState(initialId); - const tabRefs = useRef>([]); - - function onKeyDown(event: KeyboardEvent, currentIndex: number) { - let nextIndex: number | undefined; - - switch (event.key) { - case 'ArrowRight': - nextIndex = (currentIndex + 1) % items.length; - break; - case 'ArrowLeft': - nextIndex = (currentIndex - 1 + items.length) % items.length; - break; - case 'ArrowDown': - case 'ArrowUp': { - const tabList = event.currentTarget.closest('[role="tablist"]'); - if (tabList?.getAttribute('aria-orientation') !== 'vertical') { - return; - } - nextIndex = - event.key === 'ArrowDown' - ? (currentIndex + 1) % items.length - : (currentIndex - 1 + items.length) % items.length; - break; - } - case 'Home': - nextIndex = 0; - break; - case 'End': - nextIndex = items.length - 1; - break; - default: - return; - } - - event.preventDefault(); - const nextItem = items[nextIndex]; - setSelectedId(nextItem.id); - tabRefs.current[nextIndex]?.focus(); - } - - return { selectedId, setSelectedId, tabRefs, onKeyDown }; -} - -function SqlPreview({ sql }: { sql: string }) { - const tokenPattern = - /(\b(?:AS|BY|COUNT|DESC|FROM|GROUP|IS|JOIN|LEFT|LIMIT|NULL|ON|ORDER|SELECT|WHERE)\b|\$\d+)/gi; - - return ( - - {sql.split('\n').map((line, lineIndex) => ( - // biome-ignore lint/suspicious/noArrayIndexKey: Duplicate static SQL lines need their source position. - - {line.split(tokenPattern).map((token, tokenIndex) => { - const isKeyword = - /^(?:AS|BY|COUNT|DESC|FROM|GROUP|IS|JOIN|LEFT|LIMIT|NULL|ON|ORDER|SELECT|WHERE)$/i.test( - token, - ); - const isParameter = /^\$\d+$/.test(token); - - if (!isKeyword && !isParameter) { - return token; - } - - return ( - - {token} - - ); - })} - - ))} - - ); -} - -export function ProductUseCaseExplorer() { - const id = useId(); - const reduceMotion = useMountedReducedMotion(); - const [compactLayout, setCompactLayout] = useState(false); - const { selectedId, setSelectedId, tabRefs, onKeyDown } = useAccessibleTabs( - PRODUCT_USE_CASES, - 'workspace', - ); - const selectedUseCase = - PRODUCT_USE_CASES.find((useCase) => useCase.id === selectedId) ?? PRODUCT_USE_CASES[0]; - const panelMotion = getPanelMotion(reduceMotion); - - useEffect(() => { - const media = window.matchMedia('(max-width: 940px)'); - const syncLayout = () => setCompactLayout(media.matches); - syncLayout(); - media.addEventListener('change', syncLayout); - return () => media.removeEventListener('change', syncLayout); - }, []); - - return ( - -
-
- {PRODUCT_USE_CASES.map((useCase, index) => { - const selected = useCase.id === selectedUseCase.id; - - return ( - - ); - })} -
- -
- - -
- main.oliphaunt - PostgreSQL 18 -
- -
- -
    - {selectedUseCase.nodes.map((node, index) => ( - - - ))} -
-
- -
-
- query.sql - local root -
-
-                  
-                
-
- -
{selectedUseCase.meaning}
-
-
-
-
-
- ); -} - -function RuntimeStage({ mode, reduceMotion }: { mode: RuntimeMode; reduceMotion: boolean }) { - return ( -
-
{mode.label} architecture
- -
    - {mode.groups.map((group) => ( -
  1. - {group.label} -
      - {group.nodes.map((node) => ( -
    1. -
    2. - ))} -
    -
  2. - ))} -
-
- ); -} - -export function RuntimeExplorer() { - const id = useId(); - const reduceMotion = useMountedReducedMotion(); - const { selectedId, setSelectedId, tabRefs, onKeyDown } = useAccessibleTabs( - RUNTIME_MODES, - 'direct', - ); - const selectedMode = RUNTIME_MODES.find((mode) => mode.id === selectedId) ?? RUNTIME_MODES[0]; - const panelMotion = getPanelMotion(reduceMotion); - - return ( - -
-
- {RUNTIME_MODES.map((mode, index) => { - const selected = mode.id === selectedMode.id; - const tabId = `${id}-runtime-tab-${mode.id}`; - const panelId = `${id}-runtime-panel`; - - return ( - - ); - })} -
- - - - -
-

{selectedMode.title}

-

{selectedMode.useWhen}

-
-
-
Runtime contract
-
{selectedMode.boundary}
-
-
-
- -
-
-
-
-
- ); -} - -function CodeLines({ lines }: { lines: readonly TokenizedCodeLine[] }) { - return ( - - {lines.map((line) => ( - - - - {line.tokens.map((token) => - token.kind ? ( - - {token.value} - - ) : ( - token.value - ), - )} - - - ))} - - ); -} - -export function SdkCodeExplorer() { - const id = useId(); - const reduceMotion = useMountedReducedMotion(); - const { selectedId, setSelectedId, tabRefs, onKeyDown } = useAccessibleTabs(SDK_EXAMPLES, 'rust'); - const [copyState, setCopyState] = useState<{ - sdk: SdkId; - status: 'copied' | 'failed'; - } | null>(null); - const selectedSdk = SDK_EXAMPLES.find((sdk) => sdk.id === selectedId) ?? SDK_EXAMPLES[0]; - const selectedCodeLines = TOKENIZED_SDK_CODE.get(selectedSdk.id) ?? EMPTY_CODE_LINES; - const panelMotion = getPanelMotion(reduceMotion); - const selectedCopyState = copyState?.sdk === selectedSdk.id ? copyState.status : 'idle'; - - useEffect(() => { - if (!copyState) { - return; - } - - const timeout = window.setTimeout(() => setCopyState(null), 1800); - return () => window.clearTimeout(timeout); - }, [copyState]); - - return ( - -
-
- {SDK_EXAMPLES.map((sdk, index) => { - const selected = sdk.id === selectedSdk.id; - - return ( - - ); - })} -
- - - - -
- - - {selectedSdk.label} - - - {selectedSdk.packageName} - - -
- {/* biome-ignore lint/a11y/useSemanticElements: Preformatted content is itself the scroll region. */} -
-                
-              
- -
-
-
-
-
- ); -} - -function dependencyCount(option: ExtensionOption) { - return option.extensionDependencies.length + option.nativeDependencies.length; -} - -function dependencyLabel(option: ExtensionOption) { - const count = dependencyCount(option); - - if (count === 0) { - return 'No declared dependencies'; - } - - return `${count} declared ${count === 1 ? 'dependency' : 'dependencies'}`; -} - -function compactDependencyLabel(option: ExtensionOption) { - const count = dependencyCount(option); - return count === 0 ? '0 dependencies' : `${count} ${count === 1 ? 'dependency' : 'dependencies'}`; -} - -export function ExtensionPacker() { - const reduceMotion = useMountedReducedMotion(); - const [selectedIds, setSelectedIds] = useState(['vector']); - const selectedOptions = EXTENSION_OPTIONS.filter((option) => selectedIds.includes(option.id)); - const selectedWithDependencies = selectedOptions.filter((option) => dependencyCount(option) > 0); - const selectedDependencyCount = selectedOptions.reduce( - (total, option) => total + dependencyCount(option), - 0, - ); - const dockMotion = getDockMotion(reduceMotion); - - function toggleExtension(id: ExtensionOption['id']) { - setSelectedIds((current) => - current.includes(id) ? current.filter((selectedId) => selectedId !== id) : [...current, id], - ); - } - - return ( -
-
- Select exact SQL extension names -
- {EXTENSION_OPTIONS.map((option) => { - const selected = selectedIds.includes(option.id); - - return ( - - ); - })} -
-
- -
-
- App package - - {selectedOptions.length === 0 - ? 'No optional extensions selected' - : `${selectedOptions.length} ${selectedOptions.length === 1 ? 'extension' : 'extensions'} · ${selectedDependencyCount} added ${selectedDependencyCount === 1 ? 'dependency' : 'dependencies'}`} - -
- -
-
- Selected extension artifacts -
-
- - {selectedOptions.map((option, index) => ( - - - ))} - - {selectedOptions.length === 0 ? ( - - Optional extension slots are empty. - - ) : null} -
-
- -
-

Added dependency artifacts

- - {selectedWithDependencies.map((option) => ( - - - {option.id} - -
- {option.extensionDependencies.length > 0 ? ( -
-
Extension
-
- {option.extensionDependencies.join(', ')} -
-
- ) : null} - {option.nativeDependencies.length > 0 ? ( -
-
Native
-
- {option.nativeDependencies.join(', ')} -
-
- ) : null} -
-
- ))} -
- {selectedWithDependencies.length === 0 ? ( -

No added dependency artifacts.

- ) : null} -
-
-
- ); -} diff --git a/src/docs/src/components/home-visuals.tsx b/src/docs/src/components/home-visuals.tsx deleted file mode 100644 index a3480d77c..000000000 --- a/src/docs/src/components/home-visuals.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import type { CSSProperties } from 'react'; -import { WasixMark } from '@/components/brand'; - -export type UseCaseKind = 'knowledge' | 'field' | 'retrieval' | 'data'; - -const useCaseCaptions: Record = { - knowledge: 'Documents branch into revision history while staying connected to project metadata.', - field: 'A field location intersects nearby assets inside a PostGIS search radius.', - retrieval: 'A query vector converges on the nearest documents after relational filtering.', - data: 'Imported data moves through PostgreSQL tables into an inspected result set.', -}; - -export function UseCaseVisual({ kind }: { kind: UseCaseKind }) { - return ( -
-
{useCaseCaptions[kind]}
- - {kind === 'knowledge' ? ( - - ) : null} - - {kind === 'field' ? ( - - ) : null} - - {kind === 'retrieval' ? ( - - ) : null} - - {kind === 'data' ? ( - - ) : null} -
- ); -} - -export function PostgresEngineVisual() { - return ( -
-
- PostgreSQL SQL, relational storage, indexes, and write-ahead logging operate as one engine - inside an application-owned boundary. -
- - - - - - - - -
- ); -} - -export function ExtensionEcosystemVisual() { - const extensions = [ - ['PostGIS', 'spatial'], - ['pgvector', 'vectors'], - ['FTS', 'search'], - ['pg_trgm', 'matching'], - ['pgcrypto', 'crypto'], - ['UUIDv7', 'identity'], - ] as const; - - return ( -
-
- Verified PostgreSQL extensions dock into the same embedded engine across supported target - profiles. -
- - -
    - {extensions.map(([name, capability], index) => ( -
  • -