855 lines
18 KiB
CSS
855 lines
18 KiB
CSS
@import 'tailwindcss';
|
|
@import 'fumadocs-ui/css/ocean.css';
|
|
@import 'fumadocs-ui/css/preset.css';
|
|
|
|
:root {
|
|
--color-fd-background: hsl(210 58% 98.8%);
|
|
--color-fd-foreground: hsl(222 48% 9%);
|
|
--color-fd-muted: hsl(211 72% 95.5%);
|
|
--color-fd-muted-foreground: hsl(217 13% 41%);
|
|
--color-fd-popover: hsl(0 0% 100%);
|
|
--color-fd-popover-foreground: hsl(222 48% 9%);
|
|
--color-fd-card: hsl(0 0% 100%);
|
|
--color-fd-card-foreground: hsl(222 48% 9%);
|
|
--color-fd-border: hsl(213 42% 87%);
|
|
--color-fd-primary: hsl(217 88% 47%);
|
|
--color-fd-primary-foreground: hsl(0 0% 100%);
|
|
--color-fd-secondary: hsl(211 70% 96%);
|
|
--color-fd-secondary-foreground: hsl(222 38% 14%);
|
|
--color-fd-accent: hsl(213 72% 93%);
|
|
--color-fd-accent-foreground: hsl(222 42% 12%);
|
|
--color-fd-ring: hsl(217 85% 55%);
|
|
--dbx-surface: hsl(0 0% 100%);
|
|
--dbx-surface-soft: hsl(211 80% 97%);
|
|
--dbx-line: color-mix(in srgb, var(--color-fd-border) 82%, transparent);
|
|
--dbx-blue: #2563eb;
|
|
--dbx-sky: #0ea5e9;
|
|
--dbx-green: #0f9f6e;
|
|
}
|
|
|
|
.dark {
|
|
--color-fd-background: hsl(225 10% 7%);
|
|
--color-fd-foreground: hsl(220 14% 92%);
|
|
--color-fd-muted: hsl(225 8% 13%);
|
|
--color-fd-muted-foreground: hsl(220 9% 68%);
|
|
--color-fd-popover: hsl(225 10% 9%);
|
|
--color-fd-popover-foreground: hsl(220 14% 92%);
|
|
--color-fd-card: hsl(225 9% 10%);
|
|
--color-fd-card-foreground: hsl(220 14% 92%);
|
|
--color-fd-border: hsl(225 8% 22%);
|
|
--color-fd-primary: hsl(214 100% 78%);
|
|
--color-fd-primary-foreground: hsl(225 10% 7%);
|
|
--color-fd-secondary: hsl(225 8% 14%);
|
|
--color-fd-secondary-foreground: hsl(220 14% 90%);
|
|
--color-fd-accent: hsl(225 8% 18%);
|
|
--color-fd-accent-foreground: hsl(220 14% 94%);
|
|
--color-fd-ring: hsl(214 100% 75%);
|
|
--dbx-surface: hsl(225 9% 10%);
|
|
--dbx-surface-soft: hsl(225 8% 13%);
|
|
--dbx-line: color-mix(in srgb, var(--color-fd-border) 78%, transparent);
|
|
--dbx-blue: #60a5fa;
|
|
--dbx-sky: #38bdf8;
|
|
--dbx-green: #34d399;
|
|
}
|
|
|
|
html {
|
|
background: var(--color-fd-background);
|
|
color-scheme: light;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--dbx-sky) 13%, transparent), transparent 340px),
|
|
radial-gradient(circle at 84% 2%, color-mix(in srgb, var(--dbx-blue) 10%, transparent), transparent 330px),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--color-fd-muted) 58%, transparent), transparent 390px),
|
|
var(--color-fd-background);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.dark body {
|
|
background: var(--color-fd-background);
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, var(--dbx-blue) 22%, transparent);
|
|
}
|
|
|
|
article {
|
|
color: color-mix(in srgb, var(--color-fd-foreground) 92%, var(--color-fd-muted-foreground));
|
|
}
|
|
|
|
article h1 {
|
|
letter-spacing: 0;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
article h2 {
|
|
border-top: 1px solid var(--dbx-line);
|
|
margin-top: 2.35rem;
|
|
padding-top: 1.35rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
article h3 {
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
article p,
|
|
article li {
|
|
line-height: 1.78;
|
|
}
|
|
|
|
article p {
|
|
color: color-mix(in srgb, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground));
|
|
}
|
|
|
|
article a:not([class]) {
|
|
color: var(--dbx-blue);
|
|
font-weight: 560;
|
|
text-decoration-color: color-mix(in srgb, var(--dbx-blue) 34%, transparent);
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
article a:not([class]):hover {
|
|
text-decoration-color: var(--dbx-blue);
|
|
}
|
|
|
|
article img {
|
|
border: 1px solid var(--dbx-line);
|
|
border-radius: 10px;
|
|
box-shadow: 0 18px 54px color-mix(in srgb, black 12%, transparent);
|
|
}
|
|
|
|
article table {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border: 1px solid var(--dbx-line);
|
|
border-radius: 9px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
background: var(--dbx-surface);
|
|
font-size: 0.925rem;
|
|
}
|
|
|
|
article thead {
|
|
background: var(--dbx-surface-soft);
|
|
}
|
|
|
|
article th {
|
|
color: color-mix(in srgb, var(--color-fd-foreground) 86%, var(--color-fd-muted-foreground));
|
|
font-weight: 680;
|
|
}
|
|
|
|
article th,
|
|
article td {
|
|
border-bottom: 1px solid var(--dbx-line);
|
|
padding: 0.78rem 0.92rem;
|
|
}
|
|
|
|
article tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
article pre {
|
|
border: 1px solid color-mix(in srgb, var(--color-fd-border) 70%, transparent);
|
|
border-radius: 10px;
|
|
background: #0b1220 !important;
|
|
margin: 1rem 0 1.35rem;
|
|
padding: 0.9rem 0;
|
|
overflow-x: auto;
|
|
box-shadow: 0 18px 42px color-mix(in srgb, black 14%, transparent);
|
|
}
|
|
|
|
article pre code {
|
|
display: block;
|
|
min-width: max-content;
|
|
border: 0;
|
|
background: transparent !important;
|
|
color: #d7e2f0;
|
|
font-size: 0.92rem;
|
|
line-height: 1.72;
|
|
}
|
|
|
|
article pre code span {
|
|
color: var(--shiki-dark, #d7e2f0) !important;
|
|
font-style: var(--shiki-dark-font-style, inherit);
|
|
}
|
|
|
|
article pre .line {
|
|
padding-left: 1.1rem;
|
|
padding-right: 1.1rem;
|
|
}
|
|
|
|
article figure.shiki {
|
|
border-color: color-mix(in srgb, var(--color-fd-border) 74%, transparent);
|
|
border-radius: 9px;
|
|
background: #0b1220 !important;
|
|
margin: 0.85rem 0 1.05rem;
|
|
box-shadow: 0 12px 28px color-mix(in srgb, black 12%, transparent);
|
|
}
|
|
|
|
article figure.shiki [role='region'] {
|
|
padding-top: 0.7rem;
|
|
padding-bottom: 0.7rem;
|
|
}
|
|
|
|
article figure.shiki pre {
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
article figure.shiki pre code {
|
|
line-height: 1.58;
|
|
}
|
|
|
|
article :not(pre) > code {
|
|
border: 1px solid var(--dbx-line);
|
|
border-radius: 6px;
|
|
padding: 0.12rem 0.34rem;
|
|
background: color-mix(in srgb, var(--color-fd-muted) 72%, transparent);
|
|
color: color-mix(in srgb, var(--color-fd-foreground) 88%, var(--dbx-blue));
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
article a.block.rounded-xl,
|
|
article a.flex.rounded-lg {
|
|
border-color: var(--dbx-line);
|
|
border-radius: 9px;
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--dbx-sky) 4%, var(--dbx-surface)), var(--dbx-surface)),
|
|
var(--dbx-surface);
|
|
box-shadow: 0 1px 2px color-mix(in srgb, black 4%, transparent);
|
|
}
|
|
|
|
article a.block.rounded-xl:hover,
|
|
article a.flex.rounded-lg:hover {
|
|
border-color: color-mix(in srgb, var(--dbx-blue) 42%, var(--dbx-line));
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--dbx-sky) 9%, var(--dbx-surface)), var(--dbx-surface));
|
|
box-shadow: 0 12px 34px color-mix(in srgb, var(--dbx-blue) 12%, transparent);
|
|
}
|
|
|
|
article [role='tablist'].not-prose {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--dbx-line);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
article [role='tablist'].not-prose [role='tab'] {
|
|
border-radius: 0;
|
|
font-weight: 620;
|
|
}
|
|
|
|
article [role='tablist'].not-prose [role='tab'][data-state='active'] {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
article [role='tabpanel'] {
|
|
border-color: var(--dbx-line);
|
|
}
|
|
|
|
article div[class*='border'] {
|
|
border-color: var(--dbx-line);
|
|
}
|
|
|
|
aside a[href*='/docs/'][class*='rounded-lg'][data-active='true'],
|
|
aside a[href*='/docs/'][class*='rounded-lg'][aria-current='page'] {
|
|
background: linear-gradient(
|
|
90deg,
|
|
color-mix(in srgb, var(--dbx-blue) 18%, var(--color-fd-accent)),
|
|
color-mix(in srgb, var(--dbx-sky) 10%, var(--color-fd-accent))
|
|
);
|
|
color: var(--color-fd-foreground);
|
|
font-weight: 650;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.landing {
|
|
--landing-max: 1180px;
|
|
--landing-panel: color-mix(in srgb, var(--color-fd-card) 82%, transparent);
|
|
--landing-panel-strong: color-mix(in srgb, var(--color-fd-card) 94%, var(--color-fd-background));
|
|
--landing-line: color-mix(in srgb, var(--color-fd-border) 86%, transparent);
|
|
--landing-soft: color-mix(in srgb, var(--color-fd-muted) 54%, transparent);
|
|
--landing-blue: #2563eb;
|
|
--landing-sky: #0ea5e9;
|
|
--landing-green: #0f9f6e;
|
|
min-height: 100vh;
|
|
color: var(--color-fd-foreground);
|
|
background:
|
|
radial-gradient(circle at 14% 6%, color-mix(in srgb, var(--landing-sky) 12%, transparent), transparent 330px),
|
|
radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--landing-blue) 10%, transparent), transparent 360px),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--color-fd-muted) 38%, transparent), transparent 440px),
|
|
var(--color-fd-background);
|
|
}
|
|
|
|
.landing a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.landing-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
border-bottom: 1px solid var(--landing-line);
|
|
background: color-mix(in srgb, var(--color-fd-background) 88%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.landing-nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
max-width: var(--landing-max);
|
|
height: 64px;
|
|
margin: 0 auto;
|
|
padding: 0 28px;
|
|
}
|
|
|
|
.landing-logo,
|
|
.landing-nav-links,
|
|
.landing-hero-cta,
|
|
.landing-inline-link,
|
|
.landing-db-list span,
|
|
.landing-final-actions,
|
|
.landing-capability {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.landing-logo {
|
|
gap: 10px;
|
|
color: var(--color-fd-foreground);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.landing-logo img {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.landing-nav-links {
|
|
gap: 4px;
|
|
}
|
|
|
|
.landing-nav-links a {
|
|
border-radius: 7px;
|
|
padding: 8px 11px;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.landing-nav-links a:hover {
|
|
background: var(--landing-soft);
|
|
color: var(--color-fd-foreground);
|
|
}
|
|
|
|
.landing-lang-switch {
|
|
margin-left: 6px;
|
|
border: 1px solid var(--landing-line);
|
|
}
|
|
|
|
.landing-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
|
|
gap: 42px;
|
|
align-items: center;
|
|
max-width: var(--landing-max);
|
|
margin: 0 auto;
|
|
padding: 82px 28px 36px;
|
|
}
|
|
|
|
.landing-hero-copy {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.landing-eyebrow {
|
|
width: max-content;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 999px;
|
|
margin-bottom: 18px;
|
|
padding: 6px 10px;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.landing-hero h1 {
|
|
max-width: 620px;
|
|
margin: 0;
|
|
font-size: clamp(38px, 4.6vw, 58px);
|
|
font-weight: 760;
|
|
letter-spacing: 0;
|
|
line-height: 1.06;
|
|
}
|
|
|
|
.landing-hero p {
|
|
max-width: 560px;
|
|
margin: 22px 0 0;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 17px;
|
|
line-height: 1.72;
|
|
}
|
|
|
|
.landing-hero-cta {
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.landing-btn-primary,
|
|
.landing-btn-secondary,
|
|
.landing-final-actions a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 42px;
|
|
border-radius: 7px;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.landing-btn-primary {
|
|
gap: 8px;
|
|
background: var(--color-fd-foreground);
|
|
color: var(--color-fd-background);
|
|
}
|
|
|
|
.landing-btn-primary:hover {
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.landing-btn-secondary,
|
|
.landing-final-actions a {
|
|
border: 1px solid var(--landing-line);
|
|
background: var(--landing-panel);
|
|
color: var(--color-fd-foreground);
|
|
}
|
|
|
|
.landing-btn-secondary:hover,
|
|
.landing-final-actions a:hover {
|
|
border-color: color-mix(in srgb, var(--color-fd-muted-foreground) 42%, var(--landing-line));
|
|
background: var(--landing-panel-strong);
|
|
}
|
|
|
|
.landing-install {
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: center;
|
|
max-width: 500px;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 8px;
|
|
margin-top: 18px;
|
|
padding: 10px 12px;
|
|
background: color-mix(in srgb, var(--color-fd-background) 72%, transparent);
|
|
}
|
|
|
|
.landing-install span {
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.landing-install code {
|
|
overflow: hidden;
|
|
color: var(--color-fd-foreground);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.landing-product {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 10px;
|
|
background: #0d1117;
|
|
box-shadow: 0 26px 74px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
.landing-window-bar {
|
|
display: flex;
|
|
gap: 7px;
|
|
height: 34px;
|
|
align-items: center;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding: 0 13px;
|
|
background: #111827;
|
|
}
|
|
|
|
.landing-window-bar span {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.22);
|
|
}
|
|
|
|
.landing-window-bar span:nth-child(1) {
|
|
background: #ff5f57;
|
|
}
|
|
|
|
.landing-window-bar span:nth-child(2) {
|
|
background: #ffbd2e;
|
|
}
|
|
|
|
.landing-window-bar span:nth-child(3) {
|
|
background: #28c840;
|
|
}
|
|
|
|
.landing-product img {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
object-fit: cover;
|
|
object-position: left top;
|
|
}
|
|
|
|
.landing-metrics,
|
|
.landing-doc-start,
|
|
.landing-section,
|
|
.landing-final {
|
|
max-width: var(--landing-max);
|
|
margin: 0 auto;
|
|
padding-right: 28px;
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.landing-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
padding-top: 18px;
|
|
padding-bottom: 44px;
|
|
}
|
|
|
|
.landing-metrics div {
|
|
border-top: 1px solid var(--landing-line);
|
|
padding: 22px 22px 0 0;
|
|
}
|
|
|
|
.landing-metrics strong {
|
|
display: block;
|
|
color: var(--color-fd-foreground);
|
|
font-size: 24px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.landing-metrics span {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.landing-doc-start {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 22px;
|
|
border-top: 1px solid var(--landing-line);
|
|
border-bottom: 1px solid var(--landing-line);
|
|
padding-top: 24px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.landing-doc-start h2,
|
|
.landing-section-heading h2,
|
|
.landing-final h2 {
|
|
margin: 0;
|
|
font-size: 25px;
|
|
font-weight: 720;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.landing-doc-start p,
|
|
.landing-section-heading p,
|
|
.landing-final p {
|
|
margin: 8px 0 0;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.landing-inline-link {
|
|
flex-shrink: 0;
|
|
gap: 7px;
|
|
color: var(--landing-blue);
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.landing-inline-link:hover {
|
|
color: color-mix(in srgb, var(--landing-blue) 78%, var(--color-fd-foreground));
|
|
}
|
|
|
|
.landing-section {
|
|
padding-top: 70px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.landing-section-heading {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
|
|
gap: 36px;
|
|
align-items: end;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.landing-workflow-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: var(--landing-panel);
|
|
}
|
|
|
|
.landing-workflow-card {
|
|
min-height: 250px;
|
|
border-right: 1px solid var(--landing-line);
|
|
padding: 24px;
|
|
color: var(--color-fd-foreground);
|
|
transition:
|
|
background 0.16s ease,
|
|
transform 0.16s ease;
|
|
}
|
|
|
|
.landing-workflow-card:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.landing-workflow-card:hover {
|
|
background: var(--landing-panel-strong);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.landing-workflow-card > svg {
|
|
color: var(--landing-blue);
|
|
}
|
|
|
|
.landing-workflow-card h3 {
|
|
margin: 18px 0 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.landing-workflow-card p {
|
|
margin: 10px 0 0;
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.62;
|
|
}
|
|
|
|
.landing-workflow-card span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 18px;
|
|
color: var(--color-fd-foreground);
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.landing-support {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.58fr);
|
|
gap: 36px;
|
|
align-items: start;
|
|
}
|
|
|
|
.landing-support .landing-section-heading {
|
|
display: block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.landing-db-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.landing-db-list span {
|
|
gap: 7px;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 7px;
|
|
min-height: 34px;
|
|
padding: 0 11px;
|
|
background: var(--landing-panel);
|
|
color: var(--color-fd-muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.landing-db-list svg {
|
|
color: var(--landing-green);
|
|
}
|
|
|
|
.landing-capability-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.landing-capability {
|
|
gap: 10px;
|
|
min-height: 72px;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 8px;
|
|
padding: 14px 15px;
|
|
background: var(--landing-panel);
|
|
}
|
|
|
|
.landing-capability svg {
|
|
flex: 0 0 auto;
|
|
color: var(--landing-blue);
|
|
}
|
|
|
|
.landing-capability span {
|
|
color: var(--color-fd-foreground);
|
|
font-size: 13px;
|
|
font-weight: 560;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.landing-final {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
border: 1px solid var(--landing-line);
|
|
border-radius: 10px;
|
|
margin-top: 72px;
|
|
margin-bottom: 56px;
|
|
padding-top: 30px;
|
|
padding-bottom: 30px;
|
|
background: var(--landing-panel);
|
|
}
|
|
|
|
.landing-final-actions {
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.landing-hero {
|
|
grid-template-columns: 1fr;
|
|
padding-top: 56px;
|
|
}
|
|
|
|
.landing-hero-copy {
|
|
max-width: 760px;
|
|
}
|
|
|
|
.landing-product {
|
|
max-width: 860px;
|
|
}
|
|
|
|
.landing-workflow-grid,
|
|
.landing-capability-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.landing-workflow-card:nth-child(2n) {
|
|
border-right: 0;
|
|
}
|
|
|
|
.landing-workflow-card:nth-child(-n + 2) {
|
|
border-bottom: 1px solid var(--landing-line);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.landing-nav-inner {
|
|
height: auto;
|
|
min-height: 58px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.landing-nav-links a:not(.landing-lang-switch) {
|
|
display: none;
|
|
}
|
|
|
|
.landing-hero,
|
|
.landing-metrics,
|
|
.landing-doc-start,
|
|
.landing-section,
|
|
.landing-final {
|
|
padding-right: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.landing-hero {
|
|
padding-top: 44px;
|
|
}
|
|
|
|
.landing-hero h1 {
|
|
font-size: 42px;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.landing-install {
|
|
grid-template-columns: 1fr;
|
|
gap: 5px;
|
|
}
|
|
|
|
.landing-metrics {
|
|
grid-template-columns: 1fr;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.landing-metrics div {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.landing-doc-start,
|
|
.landing-section-heading,
|
|
.landing-support,
|
|
.landing-final {
|
|
display: block;
|
|
}
|
|
|
|
.landing-inline-link {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.landing-workflow-grid,
|
|
.landing-capability-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.landing-workflow-card {
|
|
min-height: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--landing-line);
|
|
}
|
|
|
|
.landing-workflow-card:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.landing-db-list,
|
|
.landing-capability-grid,
|
|
.landing-final-actions {
|
|
margin-top: 18px;
|
|
}
|
|
}
|