Introduction

<div class="flex flex-col gap-3 hero small-test"> <scalar-heading level="2" slug="introduction" class="text-balance"> Industry leading Developer Docs, SDKs & API Registry </scalar-heading> <p> Purpose-built for the OpenAPI™ standard </p> <div class="flex gap-2"> <a class="t-editor__button" href="https://dashboard.scalar.com/register">Get Started</a> <a class="t-editor__button" href="https://scalar.cal.com/scalar/chat-with-scalar" target="_blank">Book a Demo</a> </div> <div class="stickers"> <div class="draggable sticker-5"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/SiTCkdsfi2287iQBEGzN2.svg"></scalar-icon> </div> <div class="draggable sticker-1"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/JXS6tZ4EbKIkeGpjP6QKc.svg"></scalar-icon> </div> <div class="draggable sticker-6"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/sjRzU-qEfO5Y89jmLMyaF.svg"></scalar-icon> </div> <div class="draggable sticker-7"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/-dJduqbPTJP5xwDRhB5VS.svg"></scalar-icon> </div> </div> </div> <div class="slider"> <button class="active" type="button" data-target="#slide-1">API Docs</button> <button type="button" data-target="#slide-2">API Registry</button> <button type="button" data-target="#slide-3">SDKs</button> <button type="button" data-target="#slide-4">API Client</button> <ul class="gallery container-full" id="gallery"> <li id="slide-1"> </ul> </div> <div class="logowall"> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-tr.svg"></scalar-icon> </div> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-maersk.svg"></scalar-icon> </div> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-tailscale.svg"></scalar-icon> </div> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-supabase.svg"></scalar-icon> </div> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-flyio.svg"></scalar-icon> </div> <div class="logowall-item"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/logo-sfcompute.svg"></scalar-icon> </div> </div> <div class="quotes"> <h2>Take their word for it</h2> <div class="flex flex-wrap quotes-container"> <div class="quotes-item"> <p> <strong>“After years of helping enterprises implement API strategies at SmartBear, I can confidently say Scalar is what the industry has been waiting for.</strong> </p> <p> The strict OpenAPI compliance, robust CLI/API registry, and seamless CI/CD integration solve the exact pain points I watched customers struggle with daily. This is the modern API platform developers deserve.” </p> <p class="text-c-3"> Michael, Former Solutions Architect @ Smartbear </p> </div> <div class="quotes-item"> <p> “One of my most recent favorites is a in-browser ad hoc testing UI called Scalar. </p> <p> One of the things that I really love about Scalar, it's got this modern UI experience, and it provides <b>built-in test generation code for a variety of targets, from cURL to HttpClient in C#.</b>” </p> <p class="text-c-3">Captain Safia, Engineer @ Microsoft ASP.NET</p> </div> <div class="quotes-item"> <p> “Scalar's ‘golden ticket’ is… Scalar! </p> <p> <strong>They are (in my own words) building a product ecosystem for API design, docs, testing, and governance</strong> – with offerings at every price point. </p> <p> They are open source. So I can get in on free features and stay with Scalar no matter how big my API needs blow up.” </p> <p class="text-c-3">Eron, Documentation Engineer @ Qrvey</p> </div> </div> </div> <div> <div class="product product-reversed"> <div class="product-copy"> <span class="font-bold text-green">Registry</span> <h2> The Centralized Repository for Your API Definitions </h2> <p> Upload, manage and version OpenAPI Documents, JSON Schemas and Spectral Rules in a single place. Can pull from your repository, works with any CI workflow. </p> <div class="flex flex-wrap text-green gap-y-2"> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/git-branch"></scalar-icon> <span> <span class="lg-only">Single </span>Source of Truth <span> </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/arrows-clockwise"></scalar-icon> Git Integration </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/arrow-up-right"></scalar-icon> OpenAPI Documents </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/brackets-curly"></scalar-icon> <span>JSON Schema<span class="lg-only"> Support</span></span> </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/warning-octagon"></scalar-icon> Spectral Rules </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/arrows-clockwise"></scalar-icon> AsyncAPI (coming soon) </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/lock-simple"></scalar-icon> Private or Public </b> </div> <a class="mt-3 t-editor__anchor" href="/products/registry/getting-started" aria-label="Connect your API for free with Registry"> Connect Your API for Free → </a> </div> <div class="product-image"> <div class="product-image-transform"> </div> <div class="product"> <div class="product-copy"> <span class="font-bold text-orange">API Client</span> <scalar-heading level="2" slug="scalar-api-client" class="c"> The Postman Alternative Your Team Is Dreaming Of </scalar-heading> <p> Fully open-source & offline first API Client built on the OpenAPI standard, by us & our community. </p> <div class="flex flex-wrap text-orange gap-y-2"> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/wifi-slash"></scalar-icon> Offline-first </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/globe"></scalar-icon> Sync your local API </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/graph"></scalar-icon> OpenAPI by Heart </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/users"></scalar-icon> Collaborate with Others </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/lock-simple-open"></scalar-icon> No Vendor Lock-In </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/desktop-tower"></scalar-icon> Linux, Windows, macOS </b> </div> <a class="mt-3 t-editor__anchor" href="/products/api-client/getting-started" aria-label="Send your first API request with Scalar">Send Your First Request →</a> </div> <div class="product-image"> <div class="product-image-transform"> </div> <div class="product product-reversed"> <div class="product-copy"> <span class="font-bold text-blue">Docs</span> <scalar-heading level="2" slug="scalar-docs" class="c"> The Modern Documentation Platform for Your API and Everything Else </scalar-heading> <p> Write documentation with our WYSIWYG, pull Markdown and MDX files from your repository or generate API References from your OpenAPI documents. No matter how you work, your new documentation will always be up to date. </p> <div class="flex flex-wrap text-blue gap-y-2"> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/brackets-angle"></scalar-icon> Markdown and MDX </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/arrow-up-right"></scalar-icon> OpenAPI Documents </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/brackets-curly"></scalar-icon> <span><span class="lg-only">Custom </span>HTML/CSS/JS</span> </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/github-logo"></scalar-icon> GitHub Sync </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/palette"></scalar-icon> Customize Everything </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/users"></scalar-icon> Fine-grained Access </b> </div> <a class="mt-3 t-editor__anchor" href="/products/docs/getting-started" aria-label="Create your new API documentation with Scalar">Create Your New Documentation →</a> </div> <div class="product-image"> <div class="product-image-transform"> </div> <div class="product"> <div class="product-copy"> <span class="font-bold text-purple">Scalar SDK Generation</span> <scalar-heading level="2" slug="scalar-sdk-generation" class="c"> One Commit To Update All Your SDKs </scalar-heading> <p> Bring your OpenAPI document and get type-safe client libraries for TypeScript, Python, Golang, PHP, Java and Ruby with more languages coming soon. </p> <div class="flex flex-wrap text-purple gap-y-2"> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/arrow-up-right"></scalar-icon> OpenAPI-First </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/brackets-square"></scalar-icon> Custom-code </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/code"></scalar-icon> Code Samples </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/fingerprint"></scalar-icon> <span><span class="lg-only">OpenAPI </span>Authentication</span> </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/cloud-check"></scalar-icon> Syncs with Docs </b> <b class="flex items-center icon-text gap-3 font-medium w-1/2 min-h-8"> <scalar-icon src="phosphor/bold/file-cloud"></scalar-icon> File Streaming Support </b> </div> <a class="mt-3 t-editor__anchor" href="/products/sdks/getting-started" aria-label="Generate your first SDK with Scalar">Generate your first SDK →</a> </div> <div class="product-image"> <div class="product-image-transform"> </div> </div> <div class="founder-quote border rounded-lg p-12 relative"> <scalar-icon src="https://cdn.scalar.com/marketing/landing/scalar-logomark.svg?cache=1234"></scalar-icon> <p>Marc from Scalar here,</p> <p> There's no better feeling than building and being enabled by the software you are integrating with. </p> <p> We've all experienced friction with out-of-date docs, no client SDKs in your favorite language, and no one to talk to about your struggles on-boarding. </p> <p> But we've also experienced those magical APIs that just work with everything you need right there. This drives our simple three tenants at Scalar: Accessibility, Open-Source, and API First. Making on-boarding easier and magical enables people to build, and being API first means your business can scale for the future (LLMs). </p> <p> Why Open-Source? If done right, it’s transparent, builds industry standards (OpenAPI), accelerates innovation, and fosters collaboration. We love Open-Source and keep it core to our values. </p> <p> We are fans of “show don't tell here” at Scalar: so try our Docs (this page), our SDKs for our API that includes our API Client, Agent to chat with APIs, and our GitHub for all our open-source products. As always, we love your feedback so drop us a line in our discord, email, or book a call with me to see how we can help. </p>

<scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/rzLt5QLobG1QcqnrhdAor.svg"></scalar-icon>

<div> <b>Marc Laventure</b> </div> <div class="draggable sticker-9"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/jSSY0fRlk7g_HdR7i7BIu.svg"></scalar-icon> </div> </div> <div class="cta flex flex-col gap-3 small-test"> <scalar-heading level="2" class="text-balance" slug="what-are-you-waiting-for">What are you waiting for?</scalar-heading> <p> We're committed to enabling developers and companies to practice the highest of API industry standards. </p> <div class="flex gap-2 mb-11"> <a class="t-editor__button" href="https://dashboard.scalar.com/register">Get Started</a> <a class="t-editor__button" href="https://scalar.cal.com/scalar/chat-with-scalar" target="_blank">Book a Demo</a> </div> <a class="expander-hover-link" href="https://discord.gg/scalar" target="_blank" aria-label="Join Scalar community on Discord">Community →</a> <a class="expander-hover-link" href="https://github.com/scalar/scalar" target="_blank" aria-label="View Scalar on GitHub">GitHub →</a> <a class="expander-hover-link" href="mailto:[email protected]" target="_blank" aria-label="Contact Scalar support">Contact Us →</a> </div> <div class="expander-container"> <div class="expander-hover"> <div class="expander-hover-preview"> </div> <div class="expander-hover"> <div class="expander-hover-preview"> </div> <div class="expander-hover"> <div class="expander-hover-preview"> </div> <div class="expander-hover"> <div class="expander-hover-preview"> </div> </div> <div class="introduction footer container-full"> <div class="footer-content"> <div> <span class="text-c-1"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/qlPkhjY7Ec6E5g3SHMjEp.svg"></scalar-icon> </span> <p class="mt-10 text-c-3 text-sm text-balance">The OpenAPI company.</p> <p class="mt-5 text-c-3 text-sm text-balance">© API Documentation, Inc.</p> </div> <div class="flex text-sm"> <div class="w-1/3 flex flex-col gap-2"> <b>Products</b> <a class="text-c-2 hover:text-c-1 font-normal" href="/products/api-references/getting-started" target="_blank">API References</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://client.scalar.com/" target="_blank">API Client</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://docs.scalar.com/" target="_blank">API Docs</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://editor.scalar.com/" target="_blank">Swagger Editor</a> </div> <div class="w-1/3 flex flex-col gap-2"> <b>Company</b> <a class="text-c-2 hover:text-c-1 font-normal" href="mailto:[email protected]" target="_blank">Support</a> <a class="text-c-2 hover:text-c-1 font-normal" href="/legal/terms-and-conditions">Terms of Service</a> <a class="text-c-2 hover:text-c-1 font-normal" href="/legal/privacy-policy">Privacy Policy</a> <button class="cky-banner-element text-c-2 hover:text-c-1 font-normal">Cookie Preferences</button> </div> <div class="w-1/3 flex flex-col gap-2"> <b>Socials</b> <a class="text-c-2 hover:text-c-1 font-normal" href="https://twitter.com/scalar" target="_blank">x (formerly Twitter)</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://github.com/scalar/scalar" target="_blank">GitHub</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://discord.gg/scalar" target="_blank">Discord</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://www.linkedin.com/company/scalar-org" target="_blank">Linkedin</a> </div> </div> </div> <!-- footer animation --> <div class="footer-animation"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/v1Pu6_BCmly6VhPAuotVZ.svg"></scalar-icon> </div> </div> <div class="sticker-filter-effect"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/utn6gGF3Iucolqx4jmXmY.svg"></scalar-icon> </div> <style> .t-editor__page-title, .layout-aside-right, .t-editor__page-nav, .notify-container, .subheading, .t-doc__toc, .page-nav, :not(.introduction).footer, .t-editor .page-header { display: none; } main.content { overflow-x: clip; } .t-doc .layout-header { z-index: 10000; } .t-editor__button { min-width: 160px; justify-content: center; } .t-editor .editor-content, .t-editor { padding-bottom: 0; } h3.t-editor__heading, h2.t-editor__heading { --font-size: var(--scalar-heading-1); margin-top: 0; } :root { --scalar-container-width: 960px; --scalar-toc-width: 0; } .hero.hero { margin-top: 88px; } .small-test { max-width: 440px; text-wrap: balance; margin-top: 44px; position: relative; } .t-editor.page { margin-right: unset; } .t-editor .slider { margin-top: unset; } .t-editor .editor-static .page-node, .t-editor .page-node, .t-editor .content { max-width: var(--scalar-container-width); padding-bottom: 0; margin-bottom: 0; } .container { width: var(--scalar-container-width); margin: auto; position: relative; } .container-full { --scalar-container-sidebar-gap: calc( ( (100dvw - var(--scalar-container-width) - var(--scalar-sidebar-width)) / 2 ) ); width: calc(100dvw - var(--scalar-sidebar-width)); margin-left: min(-1 * var(--scalar-container-sidebar-gap), -50px); } .gallery { display: flex; --scalar-gallery-item-offset: 140px; overflow: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--scalar-container-sidebar-gap) - 70px, 50px) !important; position: relative; margin-top: 32px; } .gallery::-webkit-scrollbar { display: none; } .gallery li { max-width: calc(100dvw - var(--scalar-sidebar-width) - 50px); scroll-snap-align: start; display: inline-block; font-size: 0; aspect-ratio: 16/9; padding-left: 50px; margin-right: 50px; } .gallery li img { min-width: 100%; height: 100%; max-height: 600px; object-fit: cover; } .slider { padding-top: 100px; } .slider button { margin-right: 16px; margin-bottom: 10px; color: var(--scalar-color-3); } .slider button.active { color: var(--scalar-oclor-1); font-weight: bold; text-decoration: underline; text-decoration-color: var(--scalar-border-color); text-underline-offset: 8px; } .slider button:hover { color: var(--scalar-color-1); } .container { width: 900px; margin: auto; position: relative; } .founder-quote { padding: 80px 160px 260px 160px; } .founder-quote.founder-quote { margin-top: 120px; } /* product */ .product { display: flex; position: relative; border-top: var(--scalar-border-width) solid var(--scalar-border-color); gap: 44px; padding: 80px 0; } .product > * { flex: 1; } .product-reversed { flex-direction: row-reverse; } .product:last-of-type { border-bottom: var(--scalar-border-width) solid var(--scalar-border-color); } .product-copy { display: flex; flex-direction: column; gap: 12px; padding: 100px 0; position: relative; } .product-image { position: relative; border-radius: var(--scalar-radius-lg); pointer-events: none; } .product-image-transform { position: absolute; mask-image: linear-gradient(to bottom, black 65%, transparent 100%); left: 0; } .product-reversed .product-image-transform { left: -76px; } .product-image img { all: unset; width: 1100px; pointer-events: none; mask-image: linear-gradient(to right, black 20%, transparent 45%); } object.product-image-sticker { all: unset; position: absolute; left: -93px; bottom: 90px; transform: rotate(-7deg); } object.product-image-sticker-right { transform: rotate(7deg); left: initial; right: -80px; } .product-copy h2 { margin-top: 0; } .icon-text svg { width: 18px; } .gap-y-2 { row-gap: 8px; } .gap-y-3 { row-gap: 12px; } /* logos */ .logowall.logowall { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 40px; } .logowall-item { display: flex; align-items: center; justify-content: center; } .logowall-item svg { width: 100%; height: auto; max-height: 24px; } .ign-logo__fill { fill: var(--scalar-color-1); } .fill-current-bg { fill: var(--scalar-background-1); } /* quotes */ .quotes { padding: 120px 0 !important; } .quotes-container { gap: 44px; margin-top: 32px; } .quotes-item { flex: 0 0 calc(50% - 22px); } .quotes-item p { margin-bottom: 10px; } /* new stuff */ .expander { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.25s, opacity 0.25s ease-in-out; } .expander-content { min-height: 0; margin-bottom: 12px; margin-top: 6px; line-height: 1.45; font-size: 14px; } .expander-hover { height: 370px; position: relative; } .expander-hover:hover .expander { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.5s, opacity 0.5s ease-in-out; } .expander.expanded .expander-content { visibility: visible; } .expander-hover-title { font-size: 20px; font-weight: var(--scalar-semibold); margin-top: 24px; } .expander-hover-link { --font-color: var(--scalar-color-2); --font-visited: var(--scalar-color-2); color: var(--font-color, var(--scalar-color-1)); font-weight: var(--scalar-semibold); text-underline-offset: 0.25rem; text-decoration-thickness: 1px; text-decoration: underline; text-decoration-color: color-mix( in srgb, var(--font-color, var(--scalar-color-1)) 30%, transparent ); margin-top: 6px; } .expander-hover:hover .expander-hover-link { --font-color: var(--scalar-color-1); } .expander-hover-preview { position: absolute; left: -120px; top: -220px; width: 1100px; mask-image: radial-gradient(circle at top left, black 25%, transparent 40%); pointer-events: none; opacity: 0; transition: all 0.3s ease-in-out; transform: rotate(1deg) translate3d(-10px, -10px, 0); max-height: 500px; overflow: hidden; } .expander-hover .relative { z-index: 1; } .expander-hover:hover .expander-hover-preview { opacity: 1; transform: rotate(2deg) translate3d(0, 0, 0); transition: all 0.3s ease-in-out 0.2s; } .expander-hover-preview img { margin-left: 0; mask-image: linear-gradient(black, transparent); width: 100%; } .expander-hover-sticker { height: 143px; width: 100%; display: flex; align-items: center; position: relative; margin-left: -12px; transition: transform 0.3s ease-in-out; justify-content: flex-start; } .expander-hover-sticker object { pointer-events: none; } .expander-hover-sticker img { max-height: initial; margin-left: initial; } .expander-hover:hover .expander-hover-sticker { transform: rotate(-3deg); } .expander-container { display: flex; gap: 44px; } .cta { padding: 80px 0; margin-top: 0 !important; } .mb-11 { margin-bottom: 44px; } /* footer */ .introduction.footer { position: relative; overflow: hidden; background: var(--scalar-background-2); padding-inline: 20px; padding-bottom: 200px; margin-top: 100px; } .footer-animation { margin-inline: -20px; } .footer-animation svg { position: absolute; bottom: 0; } .footer-content { display: flex; gap: 48px; max-width: var(--scalar-container-width); width: 100%; margin: auto; padding-top: 92px; } .footer-content > * { flex: 1; } .footer-content span, .footer-content p, .footer-content a, .footer-content button { position: relative; z-index: 1; } .w-1\/3 { width: 33.33% } .light-mode .dark-image { display: none; } .dark-mode .light-image { display: none; } .sticker-clip-client { clip-path: path("M158 91.9102C158 95.8908 154.773 99.1172 150.792 99.1172L147.269 99.1172L147.269 105.78C147.268 107.948 145.511 109.705 143.343 109.705L86.2051 109.705C84.0373 109.705 82.2795 107.948 82.2793 105.78L82.2793 99.1172L7.208 99.1172C3.22741 99.1172 1.10673e-05 95.8908 -4.01752e-06 91.9101L-3.50643e-06 80.2178C-3.47119e-06 79.4117 0.135571 78.6109 0.400387 77.8496L25.7949 4.83984C26.8028 1.94219 29.5346 -5.6154e-06 32.6025 -5.4813e-06L150.792 -3.15072e-07C154.773 -1.41078e-07 158 3.22654 158 7.20703L158 91.9102Z") } .sticker-clip-sdk { clip-path: path("M60.0562 8.61129C65.9233 -1.83053 81.0294 -1.61478 86.5955 8.99068L142.416 115.353C144.543 119.406 141.567 124.259 136.991 124.201L114.679 123.918L114.138 135.797C113.962 139.654 110.761 142.678 106.9 142.634L32.9393 141.782C29.1212 141.738 26.0084 138.707 25.864 134.891L25.406 122.787L6.28841 122.544C1.70363 122.486 -1.1476 117.543 1.09835 113.545L60.0562 8.61129Z") } .sticker-clip-registry { clip-path: path("M71.0986 1.13334C75.8537 -0.596969 81.1116 1.85514 82.8428 6.6099L90.3037 27.1079H98.5059C104.199 27.108 108.814 31.7235 108.814 37.4165V77.9663L121.32 112.329C119.703 112.128 118.003 112.298 116.351 112.899C110.96 114.861 108.12 120.659 110.009 125.848C111.898 131.038 117.8 133.654 123.191 131.692C124.844 131.091 126.254 130.127 127.364 128.933L134.608 148.835C136.339 153.591 133.887 158.849 129.132 160.58L73.3945 180.866C68.6393 182.596 63.3816 180.145 61.6504 175.39L58.958 167.994H2.29102C1.02582 167.994 0 166.968 0 165.703V29.398C0.000538247 28.1333 1.02616 27.1079 2.29102 27.1079H9.8125C10.6721 24.5603 12.6383 22.4116 15.3613 21.4204L71.0986 1.13334Z") } .sticker-clip-docs { overflow: hidden; border-radius: 20px; } @media screen and (max-width: 590px) { .gallery li { padding-left: 0 !important; margin-right: 25px; } } @media screen and (max-width: 1000px) { .t-doc { --scalar-sidebar-width: 0px; } .hero.hero { margin-top: 188px; } .sticker-1, .sticker-2, .sticker-3, .sticker-4, .sticker-5, .sticker-6, .sticker-7, .sticker-8, .sticker-9 { transform: scale(0.8); } .sticker-1 { top: -140px; left: -280px; } .sticker-2 { left: 220px; bottom: 80px; } .sticker-3 { left: 90px; bottom: 20px; } .sticker-4 { left: 60px; bottom: 20px; --sticker-rotate: 15deg; } .sticker-5 { top: -220px; left: -440px; } .sticker-6 { top: 160px; left: -30px; --sticker-rotate: -10deg; } .sticker-7 { top: -220px; left: -100px; } .sticker-8 { top: 840px; left: 260px; } .sticker-9 { bottom: 70px; right: 30px; } .t-editor.page { padding-inline: 30px; } .container-full { --scalar-container-sidebar-gap: 30px; width: 100dvw; padding-inline: 30px; margin-inline: -30px; } .gallery { --scalar-gallery-item-offset: 10px; margin-top: 14px; } .gallery li img { height: 300px; } .gallery li { max-width: unset; max-height: 300px; padding-left: 30px; margin-right: 30px; } .logowall.logowall { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 40px; } .logowall-item { justify-content: start; } .logowall-item svg { width: auto; max-width: 100%; height: 100%; max-height: 20px; } .quotes-item { flex: 0 0 calc(100% - 22px); } .product, .product-reversed { flex-direction: column; gap: 60px; } .product > * { flex: initial; } .product-copy { padding-block: 0; } .product-copy .lg-only { display: none; } .product-image { height: 500px; } .product-image-transform.product-image-transform { inset: 0; mask-image: none; } .product-image img { height: 100%; width: auto; mask-image: linear-gradient(to right, black 40%, transparent 60%); } .founder-quote { padding: 40px 40px 60px 40px; margin-inline: -10px; } .expander-container { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0; } .expander-hover { width: auto; } .expander-hover .expander { grid-template-rows: 1fr; opacity: 1; } .expander .expander-content { visibility: visible; } .footer-content { flex-direction: column; } .footer-content > * { flex: initial; } } </style>