inside the
directly and shrinks the title to 16px. Force it back to heading size. */ body:not(:has(.hero-section)) .fern-prose h1 p, body:not(:has(.hero-section)) article h1 p, body:not(:has(.hero-section)) h1.fern-page-heading p { font-size: 32px !important; font-weight: 600 !important; line-height: 40px !important; } body:not(:has(.hero-section)) .fern-prose h2, body:not(:has(.hero-section)) article h2 { font-size: 24px !important; font-weight: 600 !important; line-height: 30px !important; } body:not(:has(.hero-section)) .fern-prose h3, body:not(:has(.hero-section)) article h3 { font-size: 20px !important; font-weight: 600 !important; line-height: 25px !important; } body:not(:has(.hero-section)) .fern-prose h4, body:not(:has(.hero-section)) article h4 { font-size: 18px !important; font-weight: 600 !important; line-height: 22.5px !important; } body:not(:has(.hero-section)) .fern-prose h5, body:not(:has(.hero-section)) article h5 { font-size: 16px !important; font-weight: 600 !important; line-height: 20px !important; } /* body copy */ body:not(:has(.hero-section)) .fern-prose p, body:not(:has(.hero-section)) .fern-prose li, body:not(:has(.hero-section)) article p, body:not(:has(.hero-section)) article li { font-size: 16px; font-weight: 400; line-height: 24px; } /* links inherit body weight on the live site, not a heavier 500 */ body:not(:has(.hero-section)) .fern-prose a, body:not(:has(.hero-section)) article a { font-weight: 400; line-height: 24px; } /* Note/Tip/Warning callouts: the icon should sit flush with the TOP of the text. Three narrower attempts at this (margin nudge, height-centering, flex-start/baseline on the row alone) all still rendered wrong per screenshots - a DevTools box-model check showed the callout's content box is ~40px taller than the icon+text actually need, so something inside is adding real empty space, not just a cross-axis alignment quirk. Rather than keep guessing which single element carries it, kill every margin and every generated before/after pseudo-element anywhere inside the callout - whichever element it is, this removes it. */ body:not(:has(.hero-section)) .fern-callout > div { align-items: flex-start !important; } /* Even with the icon and text boxes both starting at the row's true top now, the text glyph's visible top sits a couple px below the line-box's abstract top edge (leading). Nudge the icon down to match the glyph, not the invisible line-box. */ body:not(:has(.hero-section)) .fern-callout > div > div:first-child { margin-top: 6px !important; } body:not(:has(.hero-section)) .fern-callout :is(div, p, span) { margin-block: 0 !important; } /* The icon+text row's horizontal gap comes from Tailwind's space-x-4 (a left-margin on the text wrapper) - the vertical-only reset above must not touch it, or the icon and text end up touching with no gap. */ body:not(:has(.hero-section)) .fern-callout > div.space-x-4 > div:last-child { margin-inline-start: 16px !important; } body:not(:has(.hero-section)) .fern-callout *::before, body:not(:has(.hero-section)) .fern-callout *::after { content: none !important; display: none !important; margin: 0 !important; } /* Prose tables only. Fern renders code blocks as
| per line, so those must be excluded
or code text gets resized to body copy. */
body:not(:has(.hero-section)) .fern-prose table:not(.code-block-line-group) td:not(.code-block-line-content),
body:not(:has(.hero-section)) article table:not(.code-block-line-group) td:not(.code-block-line-content) {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
body:not(:has(.hero-section)) .fern-prose table:not(.code-block-line-group) th,
body:not(:has(.hero-section)) article table:not(.code-block-line-group) th {
font-size: 12px;
font-weight: 600;
line-height: 18px;
}
/* code: Inconsolata 14/21 for inline spans and for Fern's code-block table rows */
body:not(:has(.hero-section)) .fern-prose code,
body:not(:has(.hero-section)) .fern-prose pre,
body:not(:has(.hero-section)) .fern-prose pre code,
body:not(:has(.hero-section)) article code,
body:not(:has(.hero-section)) article pre,
body:not(:has(.hero-section)) article pre code,
body:not(:has(.hero-section)) .fern-code-block code,
body:not(:has(.hero-section)) .fern-code-block pre,
body:not(:has(.hero-section)) .code-block,
body:not(:has(.hero-section)) .code-block-inner,
body:not(:has(.hero-section)) .code-block-line-group,
body:not(:has(.hero-section)) .code-block-line-content,
body:not(:has(.hero-section)) .code-block-line-content span {
font-family: Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 21px !important;
}
/* ===== Landing page =====
The landing page carries its own inline type scale (69px hero, 48px subhead).
Do NOT try to undo the docs scale with `revert !important` here: `revert` rolls
back to the *user-agent* stylesheet and `!important` outranks the element's own
inline style, so the hero collapses to the browser default 32px/bold. The docs
type scale above is instead scoped away from this page with :has(), below. */
body:has(.hero-section) {
background-color: #130032;
}
/* ===== Testimonial carousel ("Built by developers, for developers") =====
Docusign uses a 2-slide carousel of 2 cards each; the demo previously stacked
all four. Styling matches the original inline card design. */
.ds-testimonial-carousel { width: 100%; }
.ds-testimonial-row {
display: flex;
align-items: center;
gap: 20px;
}
.ds-testimonial-viewport {
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
}
.ds-testimonial-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.ds-testimonial-slide {
flex: 0 0 100%;
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap;
}
.ds-testimonial-card {
background: rgb(38, 20, 66);
border-radius: 16px;
padding: 80px 48px;
width: 384px;
text-align: center;
}
.ds-testimonial-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
min-height: 48px;
}
.ds-testimonial-quote {
font-size: 16px;
color: #fff;
line-height: 24px;
font-style: italic;
margin-bottom: 24px;
}
.ds-testimonial-attr {
font-size: 14px;
color: #c4b5d4;
margin: 0;
}
.ds-testimonial-arrow {
flex: 0 0 auto;
background: none;
border: none;
padding: 8px;
color: rgba(255, 255, 255, 0.65);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s ease;
}
.ds-testimonial-arrow:hover {
color: #fff;
}
.ds-testimonial-arrow:focus-visible {
color: #fff;
}
.ds-testimonial-arrow svg {
width: 28px;
height: 28px;
display: block;
}
.ds-testimonial-dots {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 32px;
}
.ds-testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
padding: 0;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.ds-testimonial-dot.is-active {
background: #fff;
transform: scale(1.2);
}
@media (max-width: 900px) {
.ds-testimonial-card { width: 100%; padding: 48px 24px; }
.ds-testimonial-row { gap: 8px; }
.ds-testimonial-arrow { width: 32px; height: 32px; font-size: 18px; }
}
/* ===== Inline CTAs ported from Contentful buttons / ds-button =====
These are real buttons on the live site (measured on /platform/account:
#4c00ff fill, white text, 16px/500, 16px 24px padding, 8px radius, 56px tall),
not the plain inline links the first port produced. */
.ds-cta,
a.ds-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: #4c00ff;
color: #fff !important;
font-size: 16px;
font-weight: 500;
line-height: 24px;
padding: 16px 24px;
border-radius: 8px;
text-decoration: none !important;
transition: background-color 0.2s ease;
margin: 8px 0;
}
.ds-cta:hover,
a.ds-cta:hover {
background: #3d00cc;
color: #fff !important;
}
.ds-cta:focus-visible,
a.ds-cta:focus-visible {
background: #3d00cc;
color: #fff !important;
}
.ds-cta-secondary,
a.ds-cta-secondary {
background: transparent;
border: 1px solid #4c00ff;
color: #4c00ff !important;
}
.ds-cta-secondary:hover,
a.ds-cta-secondary:hover {
background: rgba(76, 0, 255, 0.08);
color: #4c00ff !important;
}
.ds-cta-secondary:focus-visible,
a.ds-cta-secondary:focus-visible {
background: rgba(76, 0, 255, 0.08);
color: #4c00ff !important;
}
:is(.dark, [data-theme="dark"]) .ds-cta-secondary,
:is(.dark, [data-theme="dark"]) a.ds-cta-secondary {
border-color: #fff;
color: #fff !important;
}
/* the CTA must not inherit the prose link styling (which forces weight 400) */
.fern-prose a.ds-cta,
article a.ds-cta,
body:not(:has(.hero-section)) .fern-prose a.ds-cta,
body:not(:has(.hero-section)) article a.ds-cta {
font-weight: 500 !important;
line-height: 24px !important;
}
/* Multi-column list of short items (e.g. supported file formats), so they
read as a compact 3-column grid instead of one item per line. */
.format-chip-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 32px;
padding-left: 0;
margin: 0;
list-style: none;
}
@media (max-width: 480px) {
.format-chip-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.format-chip-list li {
list-style: none;
margin: 0;
}
/* Content images sit flush left, not centred (Fern adds mx-auto). */
body:not(:has(.hero-section)) .fern-prose img.mx-auto {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Half-size images: live showed these beside text in a half-width column
(472px at desktop width). Zoom-on-click still shows the full image. */
img.ds-img-half {
max-width: min(100%, 472px) !important;
height: auto !important;
}
/* Exact widths for images live showed at other column sizes. */
img.ds-img-w200 { max-width: min(100%, 200px) !important; height: auto !important; }
img.ds-img-w340 { max-width: min(100%, 340px) !important; height: auto !important; }
img.ds-img-w600 { max-width: min(100%, 600px) !important; height: auto !important; }
img.ds-img-w640 { max-width: min(100%, 640px) !important; height: auto !important; }
img.ds-img-w650 { max-width: min(100%, 650px) !important; height: auto !important; }
img.ds-img-w680 { max-width: min(100%, 680px) !important; height: auto !important; }
/* Images side by side, like live's multi-image rows (340px each at desktop width). */
.ds-img-row {
display: flex;
justify-content: center;
margin: 1.5rem 0;
}
.ds-img-row > * {
width: 340px;
max-width: 50%;
}
.ds-img-row img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
/* Inline links use Docusign Cobalt per brand typography guidelines. */
.fern-prose a.fern-mdx-link,
.fern-prose a.fern-mdx-link:hover {
color: #4c00ff !important;
text-decoration-color: #4c00ff !important;
}
.fern-prose a.fern-mdx-link:focus-visible {
color: #4c00ff !important;
text-decoration-color: #4c00ff !important;
}
/* Dark theme follows Docusign brand dark-theme pairing: Inkwell surfaces, Mist text accents. */
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link,
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link:hover {
color: #cbc2ff !important;
text-decoration-color: #cbc2ff !important;
}
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link:focus-visible {
color: #cbc2ff !important;
text-decoration-color: #cbc2ff !important;
}
/* CTA buttons keep their own colours over the prose link colour, in both themes. */
.fern-prose a.fern-mdx-link.ds-cta,
.fern-prose a.fern-mdx-link.ds-cta:hover,
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta,
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta:hover {
color: #fff !important;
text-decoration: none !important;
}
.fern-prose a.fern-mdx-link.ds-cta:focus-visible,
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta:focus-visible {
color: #fff !important;
text-decoration: none !important;
}
.fern-prose a.fern-mdx-link.ds-cta-secondary,
.fern-prose a.fern-mdx-link.ds-cta-secondary:hover {
color: #4c00ff !important;
}
.fern-prose a.fern-mdx-link.ds-cta-secondary:focus-visible {
color: #4c00ff !important;
}
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta-secondary,
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta-secondary:hover {
color: #fff !important;
}
:is(.dark, [data-theme="dark"]) .fern-prose a.fern-mdx-link.ds-cta-secondary:focus-visible {
color: #fff !important;
}
/* Non-clickable cards: no border (it reads as a button), subtle tinted fill instead. */
body:not(:has(.hero-section)) div.fern-card {
border-color: transparent !important;
box-shadow: none !important;
background: #f7f6f7;
}
:is(.dark, [data-theme="dark"]) body:not(:has(.hero-section)) div.fern-card {
background: #26065d;
}
/* Version labels such as "eSignature REST API 2.1 only" (live: grey pill). */
.ds-pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border-radius: 16px;
background: rgb(244, 244, 246);
color: rgb(25, 24, 35);
font-size: 12px;
font-weight: 600;
line-height: 24px;
white-space: nowrap;
vertical-align: middle;
}
:is(.dark, [data-theme="dark"]) .ds-pill {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
/* HTTP method badges in prose tables and API-reference method lists. */
.ds-method {
--ds-method-fg: #1d4ed8;
--ds-method-bg: rgba(37, 99, 235, 0.1);
--ds-method-ring: rgba(37, 99, 235, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.25rem;
height: 1.375rem;
padding: 0 0.375rem;
border-radius: 0.375rem;
background: var(--ds-method-bg);
box-shadow: inset 0 0 0 1px var(--ds-method-ring);
color: var(--ds-method-fg);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.ds-method-post {
--ds-method-fg: #047857;
--ds-method-bg: rgba(16, 185, 129, 0.1);
--ds-method-ring: rgba(16, 185, 129, 0.3);
}
.ds-method-put,
.ds-method-patch {
--ds-method-fg: #b45309;
--ds-method-bg: rgba(245, 158, 11, 0.12);
--ds-method-ring: rgba(245, 158, 11, 0.35);
}
.ds-method-delete,
.ds-method-del {
--ds-method-fg: #b91c1c;
--ds-method-bg: rgba(239, 68, 68, 0.1);
--ds-method-ring: rgba(239, 68, 68, 0.3);
}
:is(.dark, [data-theme="dark"]) .ds-method { --ds-method-fg: #93c5fd; --ds-method-bg: rgba(59, 130, 246, 0.15); }
:is(.dark, [data-theme="dark"]) .ds-method-post { --ds-method-fg: #6ee7b7; --ds-method-bg: rgba(16, 185, 129, 0.15); }
:is(.dark, [data-theme="dark"]) :is(.ds-method-put, .ds-method-patch) { --ds-method-fg: #fcd34d; --ds-method-bg: rgba(245, 158, 11, 0.15); }
:is(.dark, [data-theme="dark"]) :is(.ds-method-delete, .ds-method-del) { --ds-method-fg: #fca5a5; --ds-method-bg: rgba(239, 68, 68, 0.15); }
/* Bullets and numbers match body text colour (Fern greys the markers). */
body:not(:has(.hero-section)) .fern-prose li::marker,
body:not(:has(.hero-section)) article li::marker {
color: rgba(25, 24, 35, 0.9);
}
body:not(:has(.hero-section)) .fern-prose ul > li::before,
body:not(:has(.hero-section)) article ul > li::before {
content: "\2022" !important;
color: rgba(25, 24, 35, 0.9) !important;
font-family: Arial, Helvetica, sans-serif !important;
}
:is(.dark, [data-theme="dark"]) body:not(:has(.hero-section)) .fern-prose li::marker,
:is(.dark, [data-theme="dark"]) body:not(:has(.hero-section)) article li::marker,
:is(.dark, [data-theme="dark"]) body:not(:has(.hero-section)) .fern-prose ul > li::before,
:is(.dark, [data-theme="dark"]) body:not(:has(.hero-section)) article ul > li::before {
color: rgba(255, 255, 255, 0.9) !important;
}
body:not(:has(.hero-section)) .fern-prose td ul > li::before {
content: none !important;
}
/* Lists nested inside table cells keep their bullets. */
body:not(:has(.hero-section)) .fern-prose td ul,
body:not(:has(.hero-section)) .fern-prose td ol {
margin: 4px 0 0;
padding-left: 20px;
}
body:not(:has(.hero-section)) .fern-prose td ul { list-style: disc; }
body:not(:has(.hero-section)) .fern-prose td ol { list-style: decimal; }
body:not(:has(.hero-section)) .fern-prose td li {
margin: 0;
}
/* Prose tables use the full content column; header labels never clip. */
body:not(:has(.hero-section)) .fern-prose table:not(.code-block-line-group) {
width: 100%;
}
body:not(:has(.hero-section)) .fern-prose table:not(.code-block-line-group) th {
white-space: nowrap;
}
/* Endpoint pages share the row with the example column, so long unbroken tokens
(e.g. error codes) wrap instead of widening the table past the content column;
the min width keeps short words from splitting. */
.fern-layout-reference-content[data-kind="api"] .fern-prose table:not(.code-block-line-group) td:not(.code-block-line-content) {
overflow-wrap: anywhere;
min-width: 6rem;
}
/* Long lists of short tokens (allowed HTML/CSS, enum values): 4 per row. */
.format-chip-list.chip-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px 24px;
}
@media (max-width: 768px) {
.format-chip-list.chip-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Variant (v2.1 / v2) menu items are links, which Radix never marks
[data-highlighted]; give them the same hover state as Fern's selectors. */
.fern-variant-selector-radio-group .fern-dropdown-item:is(:hover, :focus-visible) {
background-color: var(--grayscale-a3);
color: var(--accent);
}
/* Image cards (live "MediaCard" grids: /sample-apps, /use-cases), measured on
live at 1568px and 1024px. These pages use `layout: custom`, which has no
`article` or `.fern-prose` wrapper on the hosted site, so nothing here may be
scoped to either (the old scoped rules never applied: 6 columns, red links). */
.ds-media-grid,
.ds-sample-filter {
width: calc(100% - 64px);
max-width: 1008px;
margin-left: auto;
margin-right: auto;
}
.ds-media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 0;
margin-top: 40px;
margin-bottom: 80px;
}
@media (max-width: 767px) {
.ds-media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ds-media-card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 0 28px;
font-size: 14px;
line-height: 16px;
color: #000;
}
.ds-media-card a.ds-media-card-img {
display: block;
margin: 0 -12px;
border: 0 !important;
text-decoration: none !important;
}
.ds-media-card a.ds-media-card-img img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 305 / 203 !important;
object-fit: cover;
margin: 0 !important;
border-radius: 0;
}
/* Fern appends an external-link icon to target=_blank links; live has none here. */
.ds-media-card a.ds-media-card-img svg,
.ds-media-card a.ds-media-card-title svg {
display: none;
}
.ds-media-card-eyebrow {
margin-top: 32px;
font-size: 12px;
line-height: 18px;
color: rgba(25, 24, 35, 0.65);
text-transform: uppercase;
}
.ds-media-card a.ds-media-card-title {
display: block;
margin: 0;
font-size: 24px;
font-weight: 400 !important;
line-height: 30px;
color: rgba(25, 24, 35, 0.9) !important;
text-decoration: none !important;
border: 0 !important;
}
.ds-media-card a.ds-media-card-title:hover {
text-decoration: underline !important;
}
.ds-media-card a.ds-media-card-title:focus-visible {
text-decoration: underline !important;
}
.ds-media-card > p {
margin: 21px 0 14px;
font-size: 14px;
line-height: 16px;
}
.ds-media-card-tags {
display: flex;
flex-wrap: wrap;
margin-bottom: 36px;
}
/* Outlined topic tags. */
.ds-tag {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 40px;
margin: 0 9px 8px 0;
padding: 0 16px;
vertical-align: top;
border: 1px solid rgba(25, 24, 35, 0.65);
border-radius: 40px;
font-size: 16px;
line-height: 24px;
color: rgba(25, 24, 35, 0.9);
white-space: nowrap;
}
.ds-media-card .ds-tag {
cursor: pointer;
}
/* "Learn more" / "Try the app" / "View the source": one per line, pinned to the
card bottom so they line up across a row (live leaves them ragged under the tags). */
.ds-media-card > p:has(> a:only-child) {
margin: auto 0 0;
font-size: 16px;
line-height: 24px;
}
.ds-media-card > p:has(> a:only-child) + p:has(> a:only-child) {
margin-top: 0;
}
.ds-media-card > p > a:only-child {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 400 !important;
color: rgb(0, 105, 236) !important;
text-decoration: none !important;
border: 0 !important;
}
.ds-media-card > p > a:only-child:hover {
text-decoration: underline !important;
}
.ds-media-card > p > a:only-child:focus-visible {
text-decoration: underline !important;
}
.ds-media-card > p > a:only-child svg {
width: 14px;
height: 14px;
}
.ds-media-card > p > a:only-child:not([target])::after {
content: "";
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m8.34 16-1.06-1.06L12.22 10 7.28 5.06 8.34 4l6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m8.34 16-1.06-1.06L12.22 10 7.28 5.06 8.34 4l6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.dark, [data-theme="dark"]) .ds-media-card {
color: rgba(255, 255, 255, 0.9);
}
:is(.dark, [data-theme="dark"]) .ds-media-card-eyebrow {
color: rgba(255, 255, 255, 0.65);
}
:is(.dark, [data-theme="dark"]) .ds-media-card a.ds-media-card-title {
color: #fff !important;
}
:is(.dark, [data-theme="dark"]) .ds-tag {
border-color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.9);
}
:is(.dark, [data-theme="dark"]) .ds-media-card > p > a:only-child {
color: rgb(102, 163, 255) !important;
}
/* Hero pages: the banner carries the title, so drop Fern's page header. */
article:has(.evt-hero) > header {
display: none;
}
/* Hero spans the full width, like live. */
article:has(.evt-hero) {
width: 100% !important;
max-width: none !important;
}
article:has(.evt-hero) .evt-hero {
margin: 0 -32px;
}
.ds-hero-body {
max-width: 1008px;
margin-left: auto;
margin-right: auto;
}
/* /sample-apps filter bar (reuses the .osc-* filter styles). */
.ds-sample-filter {
margin-top: 40px;
}
.ds-sample-filter .osc-result-count {
margin-bottom: 26px;
font-size: 18px;
line-height: 27px;
}
body:has(.ds-sample-filter) .ds-media-grid {
margin-top: 0;
}
/* Two-column event hero (/developer-events/esignature-salesforce-webinars), measured from live */
article:has(.ds-split-hero) > header {
display: none;
}
article:has(.ds-split-hero) {
width: 100% !important;
max-width: none !important;
}
.ds-split-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 547px;
color: #fff;
}
.ds-split-hero-media,
.ds-split-hero-panel {
min-width: 0;
}
.ds-split-hero-media {
padding: 57px 32px 48px 99px;
background: #555;
position: relative;
overflow: hidden;
}
.ds-split-hero-media > * {
position: relative;
}
.ds-split-hero-media > img.ds-split-hero-bg {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover;
pointer-events: none;
}
body .ds-split-hero h1.ds-split-hero-title {
margin: 0 0 32px;
max-width: 560px;
font-size: 80px !important;
line-height: 88px !important;
font-weight: 400 !important;
color: #fff !important;
}
.ds-split-hero p.ds-split-hero-loc {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
font-size: 14px;
line-height: 20px;
}
.ds-split-hero p.ds-split-hero-loc img {
width: 30px;
height: 36px;
margin: 0;
}
.ds-split-hero-panel {
padding: 57px 32px 48px 31px;
background: #0da8ba;
}
.ds-split-hero p.ds-split-hero-date {
margin: 0 0 64px;
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
.ds-split-hero p.ds-split-hero-text {
margin: 0;
max-width: 570px;
font-size: 18px;
line-height: 24px;
font-weight: 500;
}
.ds-split-hero + .ds-hero-body {
margin-top: 64px;
}
@media (max-width: 900px) {
.ds-split-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.ds-split-hero-media,
.ds-split-hero-panel {
padding: 32px;
}
body .ds-split-hero h1.ds-split-hero-title {
font-size: 48px !important;
line-height: 56px !important;
}
}
.ds-hero-body {
overflow-wrap: anywhere;
}
.ds-hero-body table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* Full-width grey band (live /training "Unsure which courses to take?") */
article:has(.evt-hero) .ds-band {
margin: 0 -32px;
}
.ds-band {
background: #f6f8fa;
padding: 100px 16px 24px;
color: rgba(25, 24, 35, 0.9);
}
.ds-band-inner {
max-width: 976px;
margin: 0 auto;
text-align: center;
font-size: 18px;
line-height: 27px;
}
body .ds-band p.ds-band-title {
margin: 0 0 32px;
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
.ds-band-inner > p {
margin: 0;
}
body .ds-band-inner a:not(.ds-band-btn) {
color: #0069ec !important;
font-weight: 400;
text-decoration: underline;
}
.ds-band-inner a:not(.ds-band-btn) svg {
display: none;
}
.ds-band hr.ds-band-rule {
margin: 44px 24px 0;
border: 0;
border-top: 1px solid #000;
}
.ds-band-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 49px;
padding-right: 12px;
text-align: left;
}
body .ds-band p.ds-band-row-text {
margin: 0 0 0 25px;
font-size: 24px;
line-height: 36px;
color: #000;
}
body .ds-band a.ds-band-btn {
flex-shrink: 0;
padding: 15px 24px;
border: 1px solid #4c00ff;
border-radius: 8px;
color: #4c00ff !important;
font-size: 16px;
line-height: 24px;
font-weight: 500;
text-decoration: none !important;
}
@media (max-width: 640px) {
.ds-band-row {
flex-direction: column;
align-items: flex-start;
}
body .ds-band p.ds-band-row-text {
margin-left: 0;
}
}
/* Changelog: live colours (light), readable equivalents in dark mode */
:root {
--ds-cl-text: rgba(25, 24, 35, 0.9);
--ds-cl-pill-border: rgba(25, 24, 35, 0.65);
--ds-cl-pill-bg: #fff;
--ds-cl-link: #0069ec;
}
:is(.dark, [data-theme="dark"]) {
--ds-cl-text: rgba(255, 255, 255, 0.9);
--ds-cl-pill-border: rgba(255, 255, 255, 0.5);
--ds-cl-pill-bg: transparent;
--ds-cl-link: #8ab4ff;
}
/* Changelog: live hero + "Stay up to date" card, live entry styling */
.fern-changelog-overview:has(.ds-cl-hero) > header {
display: none;
}
html:has(.ds-cl-hero) {
overflow-x: clip;
}
.ds-cl-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 64px;
}
body .ds-cl-hero .evt-hero {
margin: 0 !important;
}
.fern-changelog-day {
font-size: 16px !important;
line-height: 24px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: normal !important;
color: var(--ds-cl-text) !important;
}
.fern-changelog-card .fern-changelog-card-marker {
width: 16px;
height: 16px;
background: #00baa1 !important;
border-color: #00baa1 !important;
}
body article .fern-changelog-card h3.fern-changelog-card-title {
font-size: 24px !important;
line-height: 30px !important;
font-weight: 400 !important;
color: var(--ds-cl-text) !important;
margin-bottom: 16px !important;
}
.fern-changelog-card-body {
display: flex;
flex-direction: column;
}
.fern-changelog-card-preview,
.fern-changelog-card-preview > div,
.fern-changelog-card-preview > div > div {
display: contents !important;
}
.fern-changelog-card-body p {
order: 1;
margin: 0 0 16px !important;
font-size: 16px !important;
line-height: 24px !important;
color: var(--ds-cl-text) !important;
}
.fern-changelog-card-tags {
order: 2;
margin: 0 0 16px !important;
gap: 8px !important;
}
.fern-changelog-card-body p:has(.ds-cl-learn) {
order: 3;
}
.fern-changelog-card-tags .fern-docs-badge {
height: auto !important;
padding: 7px 16px !important;
border: 1px solid var(--ds-cl-pill-border) !important;
border-radius: 40px !important;
background: var(--ds-cl-pill-bg) !important;
color: var(--ds-cl-text) !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 400 !important;
}
body article .fern-changelog-card-body a.ds-cl-learn {
order: 3;
align-self: flex-start;
position: relative;
z-index: 11;
pointer-events: auto !important;
font-size: 16px !important;
line-height: 24px !important;
color: var(--ds-cl-link) !important;
font-weight: 400 !important;
text-decoration: none !important;
}
/* Entries with no external link: "Learn More" opens the entry page; on that page it would link to itself (live shows none). */
.fern-layout-changelog-entry a.ds-cl-learn[href^="/changelog/"] {
display: none !important;
}
@media (max-width: 640px) {
.fern-changelog-day-group {
flex-direction: column;
gap: 8px;
}
}
/* /choose-the-right-developer-plan: live's column headers are 16px like the
body text; Fern's default table header is 12px. */
.ds-plan-table th {
font-size: 16px !important;
line-height: 24px !important;
}
/* Live keeps this page's content 976px wide and centred, with no sidebar. */
.fern-layout-page > article:has(.ds-plan-table) {
max-width: 976px;
min-width: 0;
margin-left: auto;
margin-right: auto;
}
/* Fit the table on phones (live wraps cells instead of scrolling). */
.ds-plan-table .fern-table {
table-layout: fixed;
width: 100% !important;
}
.ds-plan-table .fern-table th,
.ds-plan-table .fern-table td {
white-space: normal !important;
overflow-wrap: anywhere;
}
/* Tab landing pages built from live's ds-section HTML (/partner, /get-started). */
.ds-lp-band {
margin: 0;
padding: 120px 32px;
}
.ds-lp-band > * {
max-width: 1008px;
margin-left: auto;
margin-right: auto;
}
.ds-lp-dark {
background: #111416;
color: #d5d9e0;
}
.ds-lp-dark .ds-lp-h3,
.ds-lp-dark .ds-lp-check-title {
color: #fff;
}
.ds-lp-grey {
background: #f6f8fa;
}
:is(.dark, [data-theme="dark"]) .ds-lp-grey {
background: rgba(255, 255, 255, 0.04);
}
.ds-lp-center {
text-align: center;
}
.ds-lp-band p,
.ds-hero-body .ds-lp-rows p:not(.ds-lp-h4),
.ds-lp-cards span {
font-size: 18px;
line-height: 24px;
}
body .ds-lp-h2 {
font-size: 48px;
line-height: 60px;
font-weight: 400;
margin: 0 0 24px;
}
body .ds-lp-h3 {
font-size: 32px;
line-height: 40px;
font-weight: 400;
margin: 0 0 24px;
}
body .ds-lp-h4 {
font-size: 24px;
line-height: 30px;
font-weight: 400;
margin: 0 0 12px;
}
.ds-lp-top {
margin-top: 100px !important;
}
.ds-lp-split {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px;
align-items: start;
}
.ds-lp-checks > div {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 25px;
margin-bottom: 24px;
}
.ds-lp-checks img {
margin: 6px 0 0 !important;
}
.ds-lp-checks p {
grid-column: 2;
margin: 0;
}
body .ds-lp-checks .ds-lp-check-title {
grid-row: 1;
font-size: 28px;
line-height: 40px;
}
.ds-lp-ticks p {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 40px;
font-size: 16px;
}
.ds-lp-ticks img {
width: 24px;
margin: 0 !important;
}
.ds-lp-rows > div {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 48px;
padding: 24px 0;
border-bottom: 1px solid currentColor;
}
.ds-lp-rows p {
margin: 0 !important;
}
.ds-lp-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 48px;
}
.ds-lp-cards a {
display: flex;
flex-direction: column;
gap: 16px;
padding: 12px;
text-decoration: none !important;
color: inherit !important;
font-weight: 400 !important;
}
.ds-lp-cards a * {
font-weight: 400 !important;
}
.ds-lp-cards a span:not(.ds-lp-card-title) {
opacity: 0.75;
}
/* Same hover as the API cards: title turns blue. */
.ds-lp-cards .ds-lp-card-title {
transition: color 0.2s ease;
}
.ds-lp-cards a:hover .ds-lp-card-title {
color: #1565c0;
}
.ds-lp-cards a:focus-within .ds-lp-card-title {
color: #1565c0;
}
:is(.dark, [data-theme="dark"]) .ds-lp-cards a:hover .ds-lp-card-title {
color: #cbc2ff;
}
:is(.dark, [data-theme="dark"]) .ds-lp-cards a:focus-within .ds-lp-card-title {
color: #cbc2ff;
}
.ds-lp-cards .ds-lp-card-title {
font-size: 24px;
line-height: 30px;
opacity: 1;
}
.ds-lp-cards .ds-lp-card-title::after {
content: " \203A";
}
.ds-lp-quote {
display: grid;
grid-template-columns: 8fr 3fr;
gap: 48px;
padding-bottom: 32px;
border-bottom: 1px solid currentColor;
}
.ds-lp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
padding-top: 32px;
}
.ds-lp-cols3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.ds-lp-faq p {
margin: 0 0 24px;
}
/* Live's logo strip: one 3155x346 image scrolling left in a loop (two copies side by side). */
.ds-lp-carousel {
overflow: hidden;
}
.ds-lp-track {
display: flex;
width: max-content;
height: 346px;
animation: ds-lp-scroll 90s linear infinite;
}
.ds-lp-track > img {
display: block;
width: 3155px !important;
height: 346px !important;
max-width: none !important;
margin: 0 !important;
}
@keyframes ds-lp-scroll {
to { transform: translateX(-3155px); }
}
@media (prefers-reduced-motion: reduce) {
.ds-lp-track { animation: none; }
}
/* Links: live's blue, no Fern external-link icon. */
.ds-hero-body a:not(.ds-cta):not(.success-card):not(.fern-card),
.ds-lp-band a:not(.ds-cta) {
color: rgb(0, 105, 236) !important;
text-decoration: none !important;
border: 0 !important;
}
.ds-lp-quote a {
text-decoration: underline !important;
}
:is(.dark, [data-theme="dark"]) .ds-hero-body a:not(.ds-cta):not(.success-card):not(.fern-card) {
color: #cbc2ff !important;
}
.ds-hero-body .external-link-icon,
.ds-hero-body svg.lucide-external-link,
.ds-lp-band .external-link-icon,
.ds-lp-band svg.lucide-external-link {
display: none !important;
}
.ds-hero-body hr {
margin: 96px 0 64px !important;
}
.ds-hero-body .success-stories-grid {
grid-template-columns: repeat(3, 1fr);
padding: 0;
max-width: none;
}
.ds-lp-finder {
display: flex;
justify-content: space-between;
gap: 24px;
border-top: 1px solid currentColor;
margin: 45px 0 100px;
padding-top: 15px;
}
@media (max-width: 768px) {
.ds-lp-split,
.ds-lp-rows > div,
.ds-lp-cards,
.ds-lp-quote,
.ds-lp-stats,
.ds-lp-cols3 {
grid-template-columns: 1fr;
gap: 16px;
}
.ds-lp-band {
padding: 64px 16px;
}
.ds-hero-body .success-stories-grid {
grid-template-columns: 1fr;
}
body .ds-lp-h2 {
font-size: 32px;
line-height: 40px;
}
.ds-lp-finder {
flex-direction: column;
}
}
/* /get-started "How-to guides": live's spacing (32px around each API title, 56px between links). */
body .ds-lp-howto {
margin-top: 64px;
}
body .ds-lp-howto .ds-lp-h4 {
margin: 32px 0;
}
body .ds-lp-howto p:not(.ds-lp-h4) {
margin: 16px 0;
}
body .ds-lp-howto p > a {
display: inline-block;
padding: 8px 0;
}
/* /videos listing (VideosListing.tsx): live's filter bar, 3-card sections, "View N More". */
.vid-listing {
max-width: 1008px;
margin: 60px auto 0;
}
.vid-filters {
display: flex;
gap: 21px;
margin-bottom: 65px;
}
.vid-select-wrap {
position: relative;
flex: 0 0 252px;
}
.vid-select,
.vid-search {
box-sizing: border-box;
height: 40px;
width: 100%;
border: 1px solid rgba(25, 24, 35, 0.65);
border-radius: 2px;
background: #fff;
color: rgba(25, 24, 35, 0.9);
font: inherit;
font-size: 16px;
}
.vid-select {
appearance: none;
padding: 0 32px 0 16px;
cursor: pointer;
}
.vid-select-icon {
position: absolute;
right: 8px;
top: 10px;
pointer-events: none;
color: rgba(25, 24, 35, 0.9);
}
.vid-search {
flex: 1;
padding: 7px 16px;
}
.vid-section {
margin-bottom: 90px;
padding-top: 32px;
}
body .vid-section h3.vid-section-title {
margin: 0 0 24px;
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
body .vid-section p.vid-section-desc {
margin: 0 0 24px;
font-size: 16px;
line-height: 24px;
}
.vid-grid {
display: grid;
grid-template-columns: repeat(3, 300px);
gap: 32px;
}
.vid-card {
display: block;
color: inherit !important;
text-decoration: none !important;
}
.vid-card-thumb {
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
}
.vid-card-thumb img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 !important;
border-radius: 8px;
object-fit: cover;
}
.vid-card-play {
position: absolute;
left: 24px;
bottom: 18px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(25, 24, 35, 0.75);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding-left: 3px;
box-sizing: border-box;
}
/* Hover: shade the thumbnail, no animation. */
.vid-card:hover .vid-card-thumb::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
}
.vid-card:focus-within .vid-card-thumb::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
}
.vid-card-title {
display: block;
margin-top: 38px;
font-size: 24px;
line-height: 30px;
font-weight: 400;
}
.vid-more {
margin-top: 24px;
text-align: center;
}
.vid-more-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 40px;
padding: 4px 11px 4px 15px;
border: 1px solid rgba(25, 24, 35, 0.65);
border-radius: 2px;
background: transparent;
color: rgba(25, 24, 35, 0.9);
font: inherit;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
:is(.dark, [data-theme="dark"]) :is(.vid-select, .vid-search) {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
:is(.dark, [data-theme="dark"]) .vid-select option {
color: #000;
}
:is(.dark, [data-theme="dark"]) :is(.vid-select-icon, .vid-more-btn) {
color: #fff;
}
:is(.dark, [data-theme="dark"]) .vid-more-btn {
border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 1060px) {
.vid-listing {
padding: 0 24px;
}
.vid-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
/* Video pages (/videos/ divider list, plain titles, no animation. */
.ds-lp-acc {
padding-top: 17px;
}
.ds-lp-acc details {
border-top: 1px solid rgba(25, 24, 35, 0.1);
}
.ds-lp-acc details:last-child {
border-bottom: 1px solid rgba(25, 24, 35, 0.1);
}
.ds-lp-acc summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-sizing: border-box;
min-height: 56px;
padding: 16px 8px;
font-weight: 500;
color: rgba(25, 24, 35, 0.9);
cursor: pointer;
list-style: none;
}
.ds-lp-acc summary::-webkit-details-marker {
display: none;
}
.ds-lp-acc summary::after {
content: "";
flex: none;
width: 20px;
height: 20px;
background: rgba(25, 24, 35, 0.5);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m16 8.34-5.41 5.41a.82.82 0 0 1-1.18 0L4 8.34 5.34 7 10 11.66 14.66 7z'/%3E%3C/svg%3E") center / 20px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m16 8.34-5.41 5.41a.82.82 0 0 1-1.18 0L4 8.34 5.34 7 10 11.66 14.66 7z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ds-lp-acc summary:hover,
.ds-lp-acc details[open] > summary {
background: rgba(25, 24, 35, 0.03);
}
.ds-lp-acc summary:focus-visible {
background: rgba(25, 24, 35, 0.03);
}
.ds-lp-acc details[open] > summary::after {
transform: rotate(180deg);
}
body .ds-lp-acc summary > p.ds-lp-acc-title {
margin: 0;
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: inherit;
}
body .ds-lp-acc details > p {
margin: 0;
padding: 4px 8px 8px;
color: rgba(25, 24, 35, 0.7);
}
.ds-lp-acc details > :not(summary):not(p):not(.ds-acc-more) {
margin: 4px 8px 12px;
}
.ds-lp-band .ds-lp-acc details > p a {
text-decoration: underline !important;
}
.ds-lp-band .ds-lp-acc .ds-acc-more {
display: inline-flex;
gap: 6px;
margin: 0 8px 16px;
font-weight: 500;
}
.ds-lp-acc .ds-acc-more::after {
content: "\2192";
}
:is(.dark, [data-theme="dark"]) .ds-lp-acc details {
border-color: rgba(255, 255, 255, 0.15);
}
:is(.dark, [data-theme="dark"]) .ds-lp-acc summary {
color: rgba(255, 255, 255, 0.9);
}
:is(.dark, [data-theme="dark"]) .ds-lp-acc summary::after {
background: rgba(255, 255, 255, 0.65);
}
:is(.dark, [data-theme="dark"]) .ds-lp-acc summary:hover,
:is(.dark, [data-theme="dark"]) .ds-lp-acc details[open] > summary {
background: rgba(255, 255, 255, 0.05);
}
:is(.dark, [data-theme="dark"]) .ds-lp-acc summary:focus-visible {
background: rgba(255, 255, 255, 0.05);
}
:is(.dark, [data-theme="dark"]) body .ds-lp-acc details > p {
color: rgba(255, 255, 255, 0.75);
}
/* Link icons (live's 16px glyphs). */
.ds-icon-window::after,
.ds-icon-external::after,
.ds-icon-play::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
}
.ds-icon-window::after {
margin-left: 6px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 10v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-4h2v3h10v-8h-1V9h2a1 1 0 0 1 1 1zm-4-6v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM5 5v1h10V5zm10 8V7H5v6z'/%3E%3C/svg%3E") center / 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 10v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-4h2v3h10v-8h-1V9h2a1 1 0 0 1 1 1zm-4-6v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM5 5v1h10V5zm10 8V7H5v6z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ds-icon-external::after {
margin-left: 6px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 13v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h7v2H5v10h10v-6zm3-10h-7v2h4.66L8 14.66 9.34 16 19 6.34V11h2V4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E") center / 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 13v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h7v2H5v10h10v-6zm3-10h-7v2h4.66L8 14.66 9.34 16 19 6.34V11h2V4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ds-icon-play::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.73 9.38 8 5v10l4.73-4.38a.85.85 0 0 0 0-1.24z'/%3E%3C/svg%3E") center / 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.73 9.38 8 5v10l4.73-4.38a.85.85 0 0 0 0-1.24z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
/* "Talk to sales" band and resources list. */
.ds-lp-band.ds-lp-sales {
padding-top: 31px;
padding-bottom: 38px;
}
body .ds-lp-twocol .ds-lp-sales-title {
font-size: 24px;
line-height: 36px;
margin: 24px 0;
color: #000;
}
body .ds-lp-twocol .ds-lp-sales-text {
font-size: 18px;
line-height: 27px;
margin: -10px 0 18px;
color: rgba(25, 24, 35, 0.9);
}
:is(.dark, [data-theme="dark"]) body .ds-lp-twocol :is(.ds-lp-sales-title, .ds-lp-sales-text) {
color: #fff;
}
.ds-lp-sales-ctas {
display: flex;
justify-content: flex-end;
gap: 16px;
padding-top: 33px;
}
.ds-lp-sales-ctas .ds-cta {
margin: 0;
}
.ds-lp-band.ds-lp-resources {
padding-bottom: 47px;
}
.ds-lp-resources .ds-lp-twocol > div:last-child {
padding-top: 96px;
}
.ds-lp-resources .ds-lp-twocol > div:last-child > div + div {
margin-top: 42px;
}
body .ds-lp-resources .ds-lp-twocol > div:last-child p {
margin: 18px 0 0;
}
/* /docs: "API Reference" link on each API card. It sits over the card (a link can't go inside the card's own ). */
.ds-api-cell {
position: relative;
display: flex;
}
/* Fern wraps each |