/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
background: var(--ds-color-gray-700);
color: var(--ds-color-white);
font: var(--ds-font-body-s);
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: var(--ds-color-primary-500);
}
a,
button {
transition: color 150ms ease-in-out, background 150ms ease-in-out,
border-color 150ms ease-in-out;
}
input,
textarea,
select {
font: inherit;
}
img {
max-width: 100%;
}
ul {
padding-left: 1.2em;
}
.modal {
display: none;
}
body.embed .ds-article-back-button,
body.embed gh-cta,
body.embed .ds-blog-related {
display: none;
}
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+css-extras&plugins=line-numbers */
code[class*='language-'],
pre[class*='language-'] {
color: var(--ds-color-gray-200);
background: 0 0;
font-family: 'Roboto Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
font-size: 14px;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*='language-'] {
padding: 18px;
margin: 48px 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: var(--ds-color-gray-900);
border-radius: 12px;
}
:not(pre) > code[class*='language-'] {
white-space: normal;
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #999;
}
.token.punctuation {
color: var(--ds-color-gray-200);
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.function,
.token.number {
color: #f08d49;
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
color: #f8c555;
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
color: #cc99cd;
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
color: #7ec699;
}
.token.entity,
.token.operator,
.token.url {
color: #67cdcc;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
pre[class*='language-'].line-numbers {
position: relative;
padding-left: 64px;
counter-reset: linenumber;
}
pre[class*='language-'].line-numbers:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 48px;
bottom: 0;
background: var(--ds-color-gray-700);
}
pre[class*='language-'].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
display: block;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -64px;
width: 48px;
letter-spacing: -1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: var(--ds-color-gray-300);
display: block;
padding-right: 16px;
text-align: right;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/Roboto-Regular-20000d75440612ea9275ebd2723e3fa8730d6bbfd445ed31bad745bec6164d8b.ttf);
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/Roboto-Medium-6dd38ee27a77b8ce1172b15c8fa10ea0e588a54505741f5d397ebf466c199fa6.ttf);
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/RobotoCondensed-Regular-515b3a9526fc43b37c4ecbfdae2409ff89bd04fe03d83dfa9c51e0f40630e777.ttf);
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/RobotoCondensed-Bold-7cc1d8d17b69a7127155cb03e5f220a6c536432d7c5d6ccf118712f08a0d7285.ttf);
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/RobotoMono-Regular-19c9d50fa97b4fb7e689f152834cf8211c6c27d47d6c9a76c611bc048bf031c2.ttf);
}
@font-face {
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/RobotoMono-Italic-f0b2e383a6acdf8de6e1a3216496195f3e8d6fd5f132e108015992e511111d70.ttf);
}
html {
/* Colors */
--ds-color-gray-900: #12121c;
--ds-color-gray-800: #202225;
--ds-color-gray-700: #2f3136;
--ds-color-gray-600: #3f4146;
--ds-color-gray-500: #636468;
--ds-color-gray-400: #88898c;
--ds-color-gray-300: #b9bbbe;
--ds-color-gray-200: #d9dbde;
--ds-color-white: white;
--ds-color-primary-700: #0077cc;
--ds-color-primary-500: #00aef0;
--ds-color-primary-100: #d9f3fd;
--ds-color-secondary-500: #00b0ff;
--ds-color-newsletter-500: #ac59b5;
--ds-color-success-700: #13770c;
--ds-color-success-500: #43ac3c;
--ds-color-success-400: #6bd364;
--ds-color-warning-500: #ffbb00;
--ds-color-error-500: #ff4500;
--ds-color-error-400: #ff5d35;
--ds-color-danger-700: #e01a3b;
--ds-color-warning-700: #ffbb00;
--ds-color-wtm-700: #533ed6;
--ds-color-wtm-500: #715dee;
--ds-color-wtm-400: #9280ff;
--ds-color-wtm-violet: #db70e6;
--ds-color-wtm-teal: #80ffe8;
--ds-color-wtm-pink: #ff80db;
--ds-color-gradient-newsletter: linear-gradient(
103.06deg,
#ac59b5 0%,
#129bf2 74.57%
);
--ds-color-gradient-browser: linear-gradient(
141.55deg,
#ff7e74 15.08%,
#00aef0 75.66%
);
--ds-color-gradient-home: linear-gradient(
141.55deg,
#00aef0 15.08%,
#ff7e74 75.66%
);
--ds-color-gradient-enterprise: linear-gradient(
141.55deg,
#129bf2 0%,
#a276ff 100%
);
--ds-color-gradient-gray: linear-gradient(
180deg,
var(--ds-color-gray-700) 0%,
var(--ds-color-gray-800) 100%
);
--ds-color-gradient-wtm: linear-gradient(
152deg,
#8572ff 8.16%,
#01aef1 92.34%
);
/* Fonts */
--ds-font-family-display: 'Roboto Condensed', sans-serif;
--ds-font-family-headline: var(--ds-font-family-display);
--ds-font-family-button: var(--ds-font-family-display);
--ds-font-family-body: 'Roboto', sans-serif;
--ds-font-family-label: var(--ds-font-family-body);
--ds-font-display-3xl: 700 40px / 40px var(--ds-font-family-display);
--ds-font-display-2xl: 700 40px / 40px var(--ds-font-family-display);
--ds-font-display-xl: 700 32px / 32px var(--ds-font-family-display);
--ds-font-display-l: 700 32px / 32px var(--ds-font-family-display);
--ds-font-display-m: 700 24px / 24px var(--ds-font-family-display);
--ds-font-display-s: 700 20px / 20px var(--ds-font-family-display);
--ds-font-display-xs: 700 18px / 18px var(--ds-font-family-display);
--ds-font-display-2xs: 700 16px / 16px var(--ds-font-family-display);
--ds-font-headline-xl: 400 32px / 38px var(--ds-font-family-headline);
--ds-font-headline-l: 400 26px / 30px var(--ds-font-family-headline);
--ds-font-headline-m: 400 24px / 28px var(--ds-font-family-headline);
--ds-font-headline-s2: 400 22px / 26px var(--ds-font-family-headline);
--ds-font-headline-s: 400 20px / 24px var(--ds-font-family-headline);
--ds-font-headline-xs: 400 20px / 24px var(--ds-font-family-headline);
--ds-font-headline-2xs: 400 16px / 20px var(--ds-font-family-headline);
--ds-font-blockquote: 400 20px / 28px var(--ds-font-family-headline);
--ds-font-button-m: 700 18px / 20px var(--ds-font-family-button);
--ds-font-button-s: 700 16px / 18px var(--ds-font-family-button);
--ds-font-label-2xl: 500 20px / 24px var(--ds-font-family-label);
--ds-font-label-xl: 500 18px / 22px var(--ds-font-family-label);
--ds-font-label-l: 500 16px / 20px var(--ds-font-family-label);
--ds-font-label-m: 500 14px / 18px var(--ds-font-family-label);
--ds-font-label-s: 500 12px / 16px var(--ds-font-family-label);
--ds-font-label-xs: 500 12px / 16px var(--ds-font-family-label);
--ds-font-body-2xl: 400 20px / 28px var(--ds-font-family-body);
--ds-font-body-xl: 400 18px / 26px var(--ds-font-family-body);
--ds-font-body-l: 400 16px / 24px var(--ds-font-family-body);
--ds-font-body-m: 400 14px / 20px var(--ds-font-family-body);
--ds-font-body-s: 400 12px / 18px var(--ds-font-family-body);
--ds-font-body-xs: 400 12px / 18px var(--ds-font-family-body);
/* Layout Sizing */
--ds-layout-spacing-5xl: 64px;
--ds-layout-spacing-4xl: 40px;
--ds-layout-spacing-3xl: 64px;
--ds-layout-spacing-2xl: 40px;
--ds-layout-spacing-xl: 32px;
--ds-layout-spacing-l: 16px;
--ds-layout-spacing-m: 16px;
--ds-layout-spacing-s: 8px;
--ds-layout-spacing-xs: 4px;
--ds-layout-spacing-section: 16px;
--ds-layout-padding: 20px;
--ds-layout-container-max-width: 100%;
--ds-layout-z-index-modal: 1000;
--ds-text-transform-uppercase: uppercase;
/* Global overwrites */
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
@media screen and (min-width: 768px) {
html {
--ds-font-display-3xl: 700 88px / 88px var(--ds-font-family-display);
--ds-font-display-2xl: 700 72px / 72px var(--ds-font-family-display);
--ds-font-display-xl: 700 58px / 58px var(--ds-font-family-display);
--ds-font-display-l: 700 40px / 40px var(--ds-font-family-display);
--ds-font-display-m: 700 32px / 32px var(--ds-font-family-display);
--ds-font-display-s: 700 24px / 24px var(--ds-font-family-display);
--ds-font-display-xs: 700 20px / 20px var(--ds-font-family-display);
--ds-font-display-2xs: 700 16px / 16px var(--ds-font-family-display);
--ds-font-headline-xl: 400 58px / 64px var(--ds-font-family-headline);
--ds-font-headline-l: 400 40px / 48px var(--ds-font-family-headline);
--ds-font-headline-m: 400 32px / 38px var(--ds-font-family-headline);
--ds-font-headline-s2: 400 28px / 32px var(--ds-font-family-headline);
--ds-font-headline-s: 400 24px / 28px var(--ds-font-family-headline);
--ds-font-headline-xs: 400 20px / 24px var(--ds-font-family-headline);
--ds-font-headline-2xs: 400 16px / 20px var(--ds-font-family-headline);
--ds-font-blockquote: 400 24px / 32px var(--ds-font-family-headline);
--ds-font-button-m: 700 22px / 24px var(--ds-font-family-button);
--ds-font-button-s: 700 18px / 20px var(--ds-font-family-button);
--ds-font-label-2xl: 500 22px / 26px var(--ds-font-family-label);
--ds-font-label-xl: 500 20px / 24px var(--ds-font-family-label);
--ds-font-label-l: 500 18px / 22px var(--ds-font-family-label);
--ds-font-label-m: 500 16px / 20px var(--ds-font-family-label);
--ds-font-label-s: 500 14px / 18px var(--ds-font-family-label);
--ds-font-label-xs: 500 12px / 16px var(--ds-font-family-label);
--ds-font-body-2xl: 400 22px / 30px var(--ds-font-family-body);
--ds-font-body-xl: 400 20px / 28px var(--ds-font-family-body);
--ds-font-body-l: 400 18px / 26px var(--ds-font-family-body);
--ds-font-body-m: 400 16px / 24px var(--ds-font-family-body);
--ds-font-body-s: 400 14px / 20px var(--ds-font-family-body);
--ds-font-body-xs: 400 12px / 18px var(--ds-font-family-body);
--ds-layout-spacing-l: 24px;
--ds-layout-spacing-section: 40px;
--ds-layout-container-max-width: 768px;
}
}
@media screen and (min-width: 992px) {
html {
--ds-layout-container-max-width: 958px;
--ds-layout-spacing-4xl: 80px;
--ds-layout-spacing-5xl: 80px;
}
}
@media screen and (min-width: 1280px) {
html {
--ds-layout-container-max-width: 1240px;
}
}
/* Typography Classes */
.ds-display-3xl {
font: var(--ds-font-display-3xl);
}
.ds-display-2xl {
font: var(--ds-font-display-2xl);
}
.ds-display-xl {
font: var(--ds-font-display-xl);
}
.ds-display-l {
font: var(--ds-font-display-l);
}
.ds-display-m {
font: var(--ds-font-display-m);
}
.ds-display-s {
font: var(--ds-font-display-s);
}
.ds-display-xs {
font: var(--ds-font-display-xs);
}
.ds-display-2xs {
font: var(--ds-font-display-2xs);
}
.ds-display-3xl,
.ds-display-2xl,
.ds-display-xl,
.ds-display-l,
.ds-display-m,
.ds-display-s,
.ds-display-xs,
.ds-display-2xs {
text-transform: uppercase;
margin: 0;
padding: 0;
text-wrap: balance;
}
.ds-headline-xl {
font: var(--ds-font-headline-xl);
}
.ds-headline-l {
font: var(--ds-font-headline-l);
}
.ds-headline-m {
font: var(--ds-font-headline-m);
}
.ds-headline-s2 {
font: var(--ds-font-headline-s2);
}
.ds-headline-s {
font: var(--ds-font-headline-s);
}
.ds-headline-xs {
font: var(--ds-font-headline-xs);
}
.ds-headline-2xs {
font: var(--ds-font-headline-2xs);
}
.ds-headline-xl,
.ds-headline-l,
.ds-headline-m,
.ds-headline-s2,
.ds-headline-s,
.ds-headline-xs,
.ds-headline-2xs {
margin: 0;
padding: 0;
text-wrap: balance;
}
.ds-button-m {
font: var(--ds-font-button-m);
}
.ds-button-s {
font: var(--ds-font-button-s);
}
.ds-button-m,
.ds-button-s {
display: inline-flex;
align-items: center;
gap: var(--ds-layout-spacing-s);
text-transform: uppercase;
margin: 0;
padding: 0;
}
.ds-label-2xl {
font: var(--ds-font-label-2xl);
}
.ds-label-xl {
font: var(--ds-font-label-xl);
}
.ds-label-l {
font: var(--ds-font-label-l);
}
.ds-label-m {
font: var(--ds-font-label-m);
}
.ds-label-s {
font: var(--ds-font-label-s);
}
.ds-label-xs {
font: var(--ds-font-label-xs);
}
.ds-label-2xl,
.ds-label-xl,
.ds-label-l,
.ds-label-m,
.ds-label-s,
.ds-label-xs {
margin: 0;
padding: 0;
}
.ds-body-2xl {
font: var(--ds-font-body-2xl);
}
.ds-body-xl {
font: var(--ds-font-body-xl);
}
.ds-body-l {
font: var(--ds-font-body-l);
}
.ds-body-m {
font: var(--ds-font-body-m);
}
.ds-body-s {
font: var(--ds-font-body-s);
}
.ds-body-xs {
font: var(--ds-font-body-xs);
}
.ds-body-2xl,
.ds-body-xl,
.ds-body-l,
.ds-body-m,
.ds-body-s {
margin: 0;
padding: 0;
}
.ds-body-2xl a,
.ds-body-xl a,
.ds-body-l a,
.ds-body-m a,
.ds-body-s a,
.ds-anchor {
color: inherit;
text-decoration: underline;
}
.ds-anchor:hover {
color: var(--ds-color-white);
}
.ds-text-center {
text-align: center;
}
.ds-text-right {
text-align: right;
}
.ds-text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-text-clear-underscore {
text-decoration: none;
}
.ds-nowrap {
white-space: nowrap;
}
.ds-lowercase {
text-transform: lowercase;
}
.ds-uppercase {
text-transform: uppercase;
}
/* UI Components */
.ds-main {
max-width: 100%;
border-bottom: 2px solid var(--ds-color-gray-600);
overflow-x: clip;
}
.ds-section,
.ds-section-with-img {
padding: 64px var(--ds-layout-padding);
}
@media screen and (min-width: 768px) {
.ds-section,
.ds-section-with-img {
padding: 80px var(--ds-layout-padding);
}
}
.ds-section-header {
max-width: 800px;
margin: 0 auto;
}
.ds-section-with-img {
display: grid;
justify-items: start;
grid-gap: var(--ds-layout-spacing-l);
}
.ds-section-with-img img {
max-width: 400px;
width: 100%;
display: block;
grid-row: 1;
justify-self: center;
}
@media screen and (min-width: 768px) {
.ds-section-with-img {
align-items: start;
grid: 1fr / 3fr 2fr;
grid-gap: var(--ds-layout-spacing-l);
}
.ds-section-with-img img {
justify-self: end;
grid-column: 2;
margin-top: -40px;
}
}
.ds-section-divider {
border-bottom: 2px solid var(--ds-color-gray-800);
}
.ds-bg-gray-800 .ds-section-divider {
border-color: var(--ds-color-gray-700);
}
.ds-section-cta {
display: flex;
flex-flow: column-reverse;
position: relative;
padding: var(--ds-layout-spacing-l) var(--ds-layout-padding);
}
.ds-section-cta h1,
.ds-section-cta h2,
.ds-section-cta p {
max-width: max-content;
}
.ds-section-cta-img {
display: flex;
align-items: center;
justify-content: center;
}
.ds-section-cta-img > *:first-child {
max-width: 170%;
}
.ds-section-cta-short .ds-section-cta-img > *:first-child {
max-width: 100%;
}
@media screen and (min-width: 768px) {
.ds-section-cta {
flex-flow: column;
justify-content: center;
min-height: 480px;
padding: 80px var(--ds-layout-padding);
}
.ds-section-cta-img > *:first-child {
max-width: 100%;
}
.ds-section-cta > * {
position: relative;
z-index: 1;
max-width: 70%;
}
.ds-section-cta-img {
z-index: 0;
position: absolute;
left: 42%;
top: 50%;
transform: translateY(-50%);
width: 880px;
max-width: none;
}
.ds-section-cta-short {
padding: 64px var(--ds-layout-padding);
min-height: 410px;
}
.ds-section-cta-short .ds-section-cta-img > *:first-child {
width: 480px;
}
}
@media screen and (min-width: 992px) {
.ds-section-cta {
min-height: 700px;
}
.ds-section-cta > * {
max-width: 60%;
}
.ds-section-cta-img {
left: 30%;
width: 1180px;
max-width: none;
}
.ds-section-cta-short {
padding: 80px var(--ds-layout-padding);
min-height: 410px;
}
.ds-section-cta-docs {
min-height: 500px;
}
}
@media screen and (min-width: 1280px) {
.ds-section-cta {
padding: 120px var(--ds-layout-padding);
}
.ds-section-cta > * {
max-width: min(55%, 580px);
}
.ds-section-cta-img {
max-width: none;
left: 25%;
}
.ds-section-cta-short {
padding: 80px var(--ds-layout-padding);
min-height: 410px;
}
.ds-section-cta-short .ds-section-cta-img {
width: 1300px;
}
.ds-section-cta-docs .ds-section-cta-img {
left: 30%;
}
}
.ds-section-cta-icon-row {
display: grid;
grid: 1fr / min-content 1fr;
grid-gap: var(--ds-layout-spacing-s);
align-items: center;
font: var(--ds-font-body-l);
}
.ds-section-cta-icon-row svg {
width: 24px;
height: 24px;
}
@media screen and (min-width: 768px) {
.ds-section-cta-icon-row {
grid-gap: var(--ds-layout-spacing-m);
font: var(--ds-font-headline-s);
}
.ds-section-cta-icon-row svg {
width: 32px;
height: 32px;
}
}
.ds-section-wave {
height: 54px;
display: flex;
justify-content: center;
position: relative;
z-index: 1;
color: var(--ds-color-gray-800);
overflow: hidden;
}
.ds-section-wave-bottom svg {
margin-top: -24px;
}
.ds-section-wave svg {
flex: 0 0 auto;
display: block;
}
.ds-section-two-columns {
display: flex;
flex-flow: column;
gap: var(--ds-layout-spacing-l);
}
.ds-section-two-columns a {
color: inherit;
text-decoration: underline;
}
@media screen and (min-width: 768px) {
.ds-section-two-columns {
display: grid;
grid: auto / min(50%, 580px) 1fr;
gap: var(--ds-layout-spacing-4xl);
justify-content: space-between;
align-items: center;
}
.ds-section-two-columns-reverse {
grid: auto / 1fr min(50%, 580px);
grid-auto-flow: column;
}
.ds-section-two-columns-reverse img {
grid-column: 2;
}
}
.ds-container {
max-width: var(--ds-layout-container-max-width);
margin: 0 auto;
padding-left: var(--ds-layout-padding);
padding-right: var(--ds-layout-padding);
}
.ds-container-short {
--ds-layout-container-max-width: 640px;
}
.ds-list {
margin: 0;
padding: 0;
padding-left: 32px;
}
.ds-list li {
font: inherit;
padding-left: 8px;
}
.ds-button,
.ds-button-large,
.ds-button-small {
cursor: pointer;
display: inline-flex;
gap: var(--ds-layout-spacing-s);
align-items: center;
justify-content: center;
vertical-align: top;
text-transform: uppercase;
text-align: center;
color: var(--ds-color-white);
background: var(--ds-color-primary-500);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
border: 1px solid var(--ds-color-primary-500);
text-decoration: none !important;
}
.ds-button-large img,
.ds-button-large svg {
max-height: 40px;
}
@media screen and (min-width: 768px) {
.ds-button,
.ds-button-large {
font: var(--ds-font-button-m);
}
}
.ds-button:hover,
.ds-button-large:hover,
.ds-button-small:hover {
background-color: var(--ds-color-primary-700);
border: 1px solid var(--ds-color-primary-700);
}
.ds-button:focus,
.ds-button-large:focus,
.ds-button-small:focus {
outline: none;
}
.ds-button:focus-visible,
.ds-button-large:focus-visible,
.ds-button-small:focus-visible {
box-shadow: 0 0 0 4px var(--ds-color-gray-500);
}
.ds-button[disabled],
.ds-button-large[disabled],
.ds-button-small[disabled] {
background: var(--ds-color-gray-600);
border-color: var(--ds-color-gray-600);
color: var(--ds-color-gray-400);
cursor: not-allowed;
}
.ds-button[disabled]:hover,
.ds-button-large[disabled]:hover,
.ds-button-small[disabled]:hover {
background: var(--ds-color-gray-600);
border-color: var(--ds-color-gray-600);
color: var(--ds-color-gray-400);
}
.ds-button {
padding: 12px 20px;
border-radius: 24px;
height: 48px;
font: var(--ds-font-button-s);
width: 100%;
}
.ds-button-notext {
padding: 12px 12px;
}
@media screen and (min-width: 768px) {
.ds-button {
font: var(--ds-font-button-m);
width: auto;
}
}
.ds-button-small {
padding: 8px 16px;
border-radius: 24px;
font: var(--ds-font-button-s);
}
.ds-button-small svg {
width: 20px;
height: 20px;
}
.ds-button-large {
font: var(--ds-font-button-m);
padding: 11px 24px;
border-radius: 50px;
width: 100%;
}
@media screen and (min-width: 768px) {
.ds-button-large {
padding: 15px 24px;
width: auto;
}
}
input + .ds-button,
input + .ds-button-large {
width: auto;
}
.ds-button-outline {
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
}
.ds-button-outline:hover {
border-color: white;
background: var(--ds-color-gray-700);
}
.ds-button-outline.active {
color: var(--ds-color-gray-800);
background: var(--ds-color-white);
}
.ds-button-transparent {
background: transparent;
border: none;
box-shadow: none;
}
.ds-button-transparent:hover {
background: var(--ds-color-gray-700);
border: none;
box-shadow: none;
}
.ds-button-success {
background: var(--ds-color-success-700);
border: 1px solid var(--ds-color-success-700);
}
.ds-button-success:hover {
background: var(--ds-color-success-700);
border: 1px solid var(--ds-color-success-700);
}
.ds-button-danger {
background: var(--ds-color-danger-700);
border: 1px solid var(--ds-color-danger-700);
}
.ds-button-danger:hover {
background: var(--ds-color-danger-700);
border: 1px solid var(--ds-color-danger-700);
}
.ds-button-warning {
background: var(--ds-color-warning-700);
color: var(--ds-color-gray-900);
border: 1px solid var(--ds-color-warning-700);
}
.ds-button-warning:hover {
background: var(--ds-color-warning-700);
border: 1px solid var(--ds-color-warning-700);
}
.ds-button-wtm {
background: var(--ds-color-wtm-500);
border: 1px solid var(--ds-color-wtm-500);
}
.ds-button-wtm:hover {
background: var(--ds-color-wtm-700);
border: 1px solid var(--ds-color-wtm-700);
}
.ds-button-wtm-white {
background: var(--ds-color-white);
color: var(--ds-color-wtm-500);
border-color: transparent;
}
.ds-button-wtm-white:hover {
background: var(--ds-color-white);
color: var(--ds-color-wtm-700);
border-color: transparent;
}
.ds-button-secondary {
background: var(--ds-color-white);
color: var(--ds-color-primary-700);
border-color: var(--ds-color-white);
}
.ds-button-secondary:hover {
background: var(--ds-color-primary-100);
border-color: var(--ds-color-primary-100);
color: var(--ds-color-primary-700);
}
@media screen and (min-width: 768px) {
.ds-button-wide {
min-width: 400px;
}
}
.ds-icon-button {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ds-color-white);
font: var(--ds-font-body-xl);
gap: 8px;
}
.ds-icon-button:hover {
color: var(--ds-color-primary-500);
background: transparent;
border: none;
}
.ds-icon-button.ds-button-wtm:hover {
color: var(--ds-color-wtm-400);
}
.ds-button-full-width {
width: 100%;
}
.ds-badge {
font: var(--ds-font-body-xs);
color: var(--ds-color-white);
display: inline-block;
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-600);
border-radius: 4px;
padding: 4px 8px;
}
.ds-textbox {
color: var(--ds-color-gray-400);
background: var(--ds-color-gray-800);
padding: var(--ds-layout-spacing-m);
border-radius: 8px;
}
.ds-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: rgba(18, 18, 28, 0.6);
backdrop-filter: blur(4px);
z-index: var(--ds-layout-z-index-modal);
padding: var(--ds-layout-spacing-m);
opacity: 0;
visibility: hidden;
overflow-y: scroll;
overscroll-behavior: contain;
}
.ds-modal.ds-modal-open {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease-in-out;
}
.ds-modal-content {
position: relative;
display: flex;
flex-flow: column;
background: var(--ds-color-gray-700);
box-shadow: 30px 60px 120px rgba(0, 0, 0, 0.6);
border-radius: 16px;
width: 100%;
max-width: 900px;
padding: min(5vw, 60px) var(--ds-layout-spacing-m);
}
.ds-modal-content > * {
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.ds-modal-content .ds-button {
min-width: 200px;
}
.ds-modal-content .ds-modal-close + * {
max-width: calc(100% - 90px);
}
.ds-modal-close {
z-index: 1000;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 20px;
right: 20px;
background: var(--ds-color-gray-700);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
color: var(--ds-color-white);
cursor: pointer;
}
.ds-modal-close svg {
width: 32px;
height: 32px;
}
.ds-modal-actions {
display: flex;
flex-flow: column nowrap;
gap: 16px;
}
.ds-modal-video .ds-modal-content {
padding: 0;
overflow: hidden;
border-radius: 16px;
}
.ds-modal-video .ds-modal-content * {
max-width: none;
}
@media screen and (min-width: 768px) {
.ds-modal-close {
position: absolute;
top: 40px;
right: 40px;
}
.ds-modal-actions {
flex-flow: row;
}
.ds-modal-actions > * {
flex: 1;
}
}
.ds-product-grid {
display: flex;
flex-flow: column;
gap: var(--ds-layout-spacing-m);
}
.ds-product-grid > * {
display: flex;
align-items: center;
gap: var(--ds-layout-spacing-m);
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
box-shadow: 30px 60px 80px rgba(0, 0, 0, 0.15);
border-radius: 16px;
padding: var(--ds-layout-spacing-l);
}
.ds-product-grid a {
color: inherit;
text-decoration: underline;
font-weight: 500;
}
.ds-product-grid svg {
min-width: 120px;
min-height: 120px;
max-width: 120px;
max-height: 120px;
}
@media screen and (min-width: 992px) {
.ds-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.ds-product-grid > * {
flex-flow: column;
}
.ds-product-grid svg {
min-width: 160px;
min-height: 160px;
max-width: 160px;
max-height: 160px;
}
}
@media screen and (min-width: 1280px) {
.ds-product-grid {
gap: var(--ds-layout-spacing-2xl);
}
}
.ds-learn-more {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
display: flex;
justify-content: center;
align-items: center;
padding: 22px 10px 0px;
background: linear-gradient(180deg, rgba(18, 18, 28, 0) 0%, #12121c 100%);
transition: opacity 0.3s ease-in-out;
pointer-events: none;
}
.ds-learn-more a {
padding: 10px;
pointer-events: auto;
}
.ds-learn-more.hidden {
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease-in-out,
visibility 0.3s ease-in-out;
}
.ds-faq {
max-width: 800px;
margin: 0 auto;
color: var(--ds-color-gray-300);
}
.ds-faq h3 {
font: var(--ds-font-headline-s);
border-top: 1px solid var(--ds-color-gray-600);
padding-top: 24px;
color: var(--ds-color-white);
}
.ds-faq h3:first-child {
border-top: none;
padding-top: 0;
}
.ds-faq p,
.ds-faq ul {
font: var(--ds-font-body-l);
margin-bottom: 16px;
}
.ds-faq li {
font: var(--ds-font-body-l);
}
.ds-faq p + h3 {
margin-top: 24px;
}
.ds-faq-button {
margin: 32px 0 0;
text-align: center;
}
.ds-faq-help {
margin: 40px auto 0;
border-radius: 16px;
padding: 40px 24px;
}
.ds-faq-container {
max-width: 640px;
margin: 0 auto;
box-sizing: content-box;
}
@media screen and (min-width: 768px) {
.ds-faq-help {
margin-top: 64px;
}
.ds-faq-button {
margin-top: 48px;
}
}
@media screen and (min-width: 1280px) {
.ds-faq-help {
margin-top: 80px;
}
}
.ds-testimonials {
margin: 0 -20px;
padding: 0 40px;
}
.ds-testimonials-section > .ds-section-header {
margin-bottom: 24px;
}
.ds-testimonials-gallery {
display: flex;
gap: 24px;
}
.ds-testimonials-gallery > div {
width: 100%;
}
.ds-testimonials-card {
display: flex;
flex-flow: column nowrap;
flex-shrink: 0;
gap: 24px;
padding: 24px;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-900);
background:
linear-gradient(180deg, rgba(18, 19, 23, 0.5) 0%, rgba(18, 19, 23, 0) 100%),
no-repeat 16px 12px
url("data:image/svg+xml,%3Csvg width='64' height='51' viewBox='0 0 64 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.7863 0L64 6.68507C61.503 8.42428 59.1145 10.3265 56.8346 12.3918C54.5547 14.3485 52.4919 16.4138 50.6463 18.5878C48.8007 20.7618 47.335 23.0445 46.2494 25.4359C45.2723 27.8273 44.7294 30.3274 44.6209 32.9362L41.6896 30.3274C42.5581 29.8926 43.4266 29.6209 44.2952 29.5122C45.1637 29.4035 46.0322 29.3491 46.9008 29.3491C50.592 29.3491 53.5776 30.3274 55.8575 32.284C58.1374 34.1319 59.2773 36.6864 59.2773 39.9474C59.2773 43.0997 58.1374 45.7085 55.8575 47.7738C53.6862 49.8391 50.8092 50.8718 47.2265 50.8718C43.3181 50.8718 40.1696 49.7304 37.7812 47.4477C35.3927 45.165 34.1985 41.5236 34.1985 36.5233C34.1985 32.7188 34.6327 29.1317 35.5013 25.762C36.4784 22.2836 37.7269 19.0226 39.2468 15.979C40.7668 12.8266 42.6124 9.94609 44.7837 7.33727C46.955 4.61977 49.2892 2.17401 51.7863 0ZM17.4249 0L29.6387 6.68507C27.1416 8.42428 24.7532 10.3265 22.4733 12.3918C20.1934 14.3485 18.1306 16.4138 16.285 18.5878C14.5479 20.7618 13.1366 23.0445 12.0509 25.4359C10.9652 27.8273 10.3681 30.3274 10.2595 32.9362L7.32824 30.3274C8.30534 29.8926 9.17388 29.6209 9.93384 29.5122C10.8024 29.4035 11.6709 29.3491 12.5394 29.3491C16.3393 29.3491 19.3249 30.3274 21.4962 32.284C23.7761 34.1319 24.916 36.6864 24.916 39.9474C24.916 43.0997 23.7761 45.7085 21.4962 47.7738C19.3249 49.8391 16.4478 50.8718 12.8651 50.8718C8.95674 50.8718 5.80831 49.7304 3.41985 47.4477C1.13995 45.165 0 41.5236 0 36.5233C0 32.7188 0.434267 29.1317 1.3028 25.762C2.17133 22.2836 3.36556 19.0226 4.8855 15.979C6.514 12.8266 8.35963 9.94609 10.4224 7.33727C12.5937 4.61977 14.9279 2.17401 17.4249 0Z' fill='%23121317' /%3E%3C/svg%3E%0A");
box-shadow:
0px 4px 16px 0px rgba(0, 0, 0, 0.15),
0px -2px 0px 0px rgba(255, 255, 255, 0.1);
overflow: hidden;
margin-top:1px;
}
.ds-testimonials-info {
display: flex;
align-items: center;
gap: 8px;
}
.ds-testimonials-author {
display: flex;
flex-flow: column;
}
.ds-testimonials-source {
display: flex;
align-items: center;
gap: 4px;
}
.ds-testimonials-source svg {
width: 14px;
height: 14px;
}
.ds-testimonials-desc {
max-width: 700px;
margin: 40px auto 0;
}
.ds-testimonials-rating img {
width: 12px;
height: 12px;
}
.ds-testimonials-stars {
display: grid;
grid: min-content 1fr / max-content 1fr;
gap: 2px 16px;
margin: 20px auto 0;
max-width: 480px;
}
.ds-testimonials-stars img:first-child {
grid-row: span 2;
}
.ds-testimonials-stars-rating {
display: flex;
align-items: center;
gap: 8px;
}
.ds-testimonials-stars-rating-value {
font-weight: 500;
font-size: 16px;
line-height: 1;
color: #fff;
}
.ds-testimonials.ds-testimonials-size-1 button {
display: none;
}
@media screen and (min-width: 768px) {
.ds-testimonials-card {
padding: 32px;
}
.ds-testimonials-gallery > div {
width: calc(50% - 12px);
}
.ds-testimonials.ds-testimonials-size-2 button {
display: none;
}
}
@media screen and (min-width: 992px) {
.ds-testimonials-gallery > div {
width: calc(100% / 3 - 16px);
}
.ds-testimonials.ds-testimonials-size-3 button {
display: none;
}
}
/* Form Components */
.ds-form-field {
font: var(--ds-font-body-l);
font-weight: 400;
color: var(--ds-color-white);
background: var(--ds-color-gray-800);
padding: 10px 20px;
border: 1px solid var(--ds-color-gray-600);
border-radius: 24px;
outline: none;
}
.ds-form-field-large {
font: var(--ds-font-body-xl);
font-weight: 400;
}
.ds-form-field::placeholder {
color: var(--ds-color-gray-400);
}
.ds-form-field:hover {
border: 1px solid var(--ds-color-white);
}
.ds-form-field:focus {
outline: none;
}
.ds-form-field:focus-visible {
box-shadow: 0 0 0 4px var(--ds-color-gray-500);
}
.ds-form-field.ds-form-field-center-placeholder::placeholder {
text-align: center;
}
.ds-form-field.ds-form-field-center-placeholder::ms-input-placeholder {
text-align: center;
}
.ds-form-error .ds-form-field,
.ds-form-field.ds-form-error {
border: 1px solid var(--ds-color-error-400);
}
select.ds-form-field {
appearance: none;
background: var(--ds-color-gray-800) no-repeat top 50% right 16px
url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.96967 8.46967C4.26256 8.17678 4.73744 8.17678 5.03033 8.46967L12 15.4393L18.9697 8.46967C19.2626 8.17678 19.7374 8.17678 20.0303 8.46967C20.3232 8.76256 20.3232 9.23744 20.0303 9.53033L12.5303 17.0303C12.2374 17.3232 11.7626 17.3232 11.4697 17.0303L3.96967 9.53033C3.67678 9.23744 3.67678 8.76256 3.96967 8.46967Z' fill='white'/%3E%3C/svg%3E%0A");
}
input.ds-form-field::file-selector-button {
display: none;
}
input.ds-form-field::-webkit-search-cancel-button {
position: relative;
right: -10px;
margin-left: -24px;
-webkit-appearance: none;
height: 24px;
width: 24px;
color: var(--ds-color-gray-300);
cursor: pointer;
border-radius: 12px;
background: center no-repeat;
background-size: cover;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.11101 2.17971C5.26216 1.41054 6.61553 1 8 1C8.91926 1 9.82951 1.18106 10.6788 1.53284C11.5281 1.88463 12.2997 2.40024 12.9497 3.05025C13.5998 3.70026 14.1154 4.47194 14.4672 5.32121C14.8189 6.17049 15 7.08075 15 8C15 9.38447 14.5895 10.7378 13.8203 11.889C13.0511 13.0401 11.9579 13.9373 10.6788 14.4672C9.3997 14.997 7.99224 15.1356 6.63437 14.8655C5.2765 14.5954 4.02922 13.9287 3.05026 12.9497C2.07129 11.9708 1.4046 10.7235 1.13451 9.36563C0.86441 8.00776 1.00303 6.6003 1.53285 5.32121C2.06266 4.04213 2.95987 2.94888 4.11101 2.17971ZM6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L6.58579 8L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L8 9.41421L9.29289 10.7071C9.68342 11.0976 10.3166 11.0976 10.7071 10.7071C11.0976 10.3166 11.0976 9.68342 10.7071 9.29289L9.41421 8L10.7071 6.70711C11.0976 6.31658 11.0976 5.68342 10.7071 5.29289C10.3166 4.90237 9.68342 4.90237 9.29289 5.29289L8 6.58579L6.70711 5.29289Z' fill='%2388898c'/%3E%3C/svg%3E%0A");
}
.ds-form-checkbox {
width: 16px;
height: 16px;
background: var(--ds-color-gray-800) no-repeat center;
border: 1px solid var(--ds-color-gray-500);
border-radius: 4px;
display: block;
appearance: none;
}
.ds-form-checkbox:checked {
border-color: var(--ds-color-primary-500);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC41ODkzIDIuNDEwMDhDMTAuOTE0NyAyLjczNTUxIDEwLjkxNDcgMy4yNjMxMiAxMC41ODkzIDMuNTg4NTVMNS4wODkyOCA5LjA4ODU1QzQuNzYzODYgOS40MTM5NyA0LjIzNjI0IDkuNDEzOTcgMy45MTA4MiA5LjA4ODU1TDEuNDEwODIgNi41ODg1NUMxLjA4NTM5IDYuMjYzMTIgMS4wODUzOSA1LjczNTUxIDEuNDEwODIgNS40MTAwOEMxLjczNjI0IDUuMDg0NjYgMi4yNjM4NiA1LjA4NDY2IDIuNTg5MjggNS40MTAwOEw0LjUwMDA1IDcuMzIwODVMOS40MTA4MiAyLjQxMDA4QzkuNzM2MjQgMi4wODQ2NiAxMC4yNjM5IDIuMDg0NjYgMTAuNTg5MyAyLjQxMDA4WiIgZmlsbD0iIzAwQUVGMCIvPgo8L3N2Zz4=');
}
.ds-form-checkbox:focus {
outline: none;
}
.ds-form-checkbox:focus-visible {
box-shadow: 0 0 0 4px var(--ds-color-gray-600);
}
.ds-form-checkbox.ds-form-error {
border-color: var(--ds-color-error-400);
}
.ds-form-label {
margin: 0;
font-weight: inherit;
}
.ds-form-label input[type='radio'] {
width: 24px;
height: 24px;
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-500);
border-radius: 12px;
appearance: none;
}
.ds-form-label input[type='radio']:checked {
border-color: var(--ds-color-primary-500);
background: var(--ds-color-gray-800) no-repeat center
url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8838 0.754774C15.3719 1.24291 15.3719 2.03433 14.8838 2.52247L6.6338 10.7725C6.14566 11.2606 5.35424 11.2606 4.8661 10.7725L1.1161 7.02247C0.627966 6.53434 0.627966 5.74291 1.1161 5.25477C1.60424 4.76664 2.39566 4.76664 2.8838 5.25477L5.74995 8.12093L13.1161 0.754774C13.6042 0.266638 14.3957 0.266638 14.8838 0.754774Z' fill='%2300AEF0'/%3E%3C/svg%3E%0A");
}
.ds-form-label-checkbox {
display: grid;
grid: auto / min-content 1fr;
gap: 8px;
}
.ds-form-error-msg {
color: var(--ds-color-error-400);
margin: 0;
}
.ds-form-error-msg:empty {
display: none;
}
.ds-form-field-container {
display: flex;
flex-flow: column nowrap;
gap: 8px;
margin: 24px 0;
}
.ds-form-field-container:first-child {
margin-top: 0;
}
.ds-form-field-row {
display: flex;
flex-flow: row wrap;
gap: 16px;
margin: 24px 0;
}
.ds-form-field-row > * {
flex: 1;
margin: 0;
min-width: 200px;
}
.ds-form-field-row > * .ds-form-field {
width: 100%;
}
.ds-carousel {
position: relative;
}
.ds-carousel-prev,
.ds-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
appearance: none;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.ds-carousel-prev {
left: 2px;
}
.ds-carousel-next {
right: 2px;
}
.ds-carousel-prev:active,
.ds-carousel-next:active {
transform: translateY(-50%) scale(0.9);
}
.ds-carousel-slider {
display: flex;
flex-flow: row nowrap;
overflow: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.ds-carousel-slider::-webkit-scrollbar {
display: none;
}
.ds-carousel-slider > * {
scroll-snap-align: start;
}
.ds-shop-discount {
color: white;
font: var(--ds-font-label-xs);
display: inline-block;
padding: 4px;
margin-left: 4px;
margin-bottom: 2px;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: var(--ds-color-error-500);
white-space: nowrap;
}
.ds-banner {
display: grid;
position: relative;
z-index: 1;
gap: 16px 40px;
grid: auto / max-content 1fr min-content;
align-items: center;
padding: 24px 40px;
border-radius: 36px / 34px;
border: 1px solid var(--ds-color-gray-900);
box-shadow:
0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
0 40px 60px 0 rgba(0, 0, 0, 0.2);
background:
center center / 800px 800px no-repeat
url('data:image/svg+xml,'),
center top
radial-gradient(
238.31% 138.8% at -0.03% -0.51%,
#0092c3 0%,
#2d3f9b 31.73%,
#320065 100%
);
}
.ds-banner div {
display: flex;
gap: 4px;
flex-flow: column nowrap;
justify-content: center;
}
.ds-banner img {
border-radius: 8px;
overflow: hidden;
width: 220px;
}
.ds-banner a {
white-space: nowrap;
grid-column: 3 / 4;
align-self: center;
}
@media screen and (max-width: 992px) {
.ds-banner {
padding: 24px;
gap: 16px;
}
.ds-banner img {
width: 150px;
}
.ds-banner h3 {
font: var(--ds-font-headline-s);
}
.ds-banner a span {
display: none;
}
.ds-banner a {
width: 48px;
padding: 0;
}
}
@media screen and (max-width: 767px) {
.ds-banner {
gap: 8px;
grid: auto / 1fr min-content;
padding: 20px;
background-size: 100% auto;
}
.ds-banner div {
display: contents;
}
.ds-banner h3,
.ds-banner h4 {
grid-column: 1 / 4;
}
.ds-banner img {
display: none;
}
.ds-banner a {
grid-row: auto;
}
}
/* UI Helpers */
.ds-overflow {
overflow: visible;
}
/* Colors */
.ds-color-gray-900 {
color: var(--ds-color-gray-900);
}
.ds-color-gray-800 {
color: var(--ds-color-gray-800);
}
.ds-color-gray-700 {
color: var(--ds-color-gray-700);
}
.ds-color-gray-600 {
color: var(--ds-color-gray-600);
}
.ds-color-gray-500 {
color: var(--ds-color-gray-500);
}
.ds-color-gray-400 {
color: var(--ds-color-gray-400);
}
.ds-color-gray-300 {
color: var(--ds-color-gray-300);
}
.ds-color-gray-200 {
color: var(--ds-color-gray-200);
}
.ds-color-white {
color: var(--ds-color-white);
}
.ds-color-primary-700 {
color: var(--ds-color-primary-700);
}
.ds-color-primary-500 {
color: var(--ds-color-primary-500);
}
.ds-color-secondary-500 {
color: var(--ds-color-secondary-500);
}
.ds-color-newsletter-500 {
color: var(--ds-color-newsletter-500);
}
.ds-color-success-500 {
color: var(--ds-color-success-500);
}
.ds-color-success-400 {
color: var(--ds-color-success-400);
}
.ds-color-warning-500 {
color: var(--ds-color-warning-500);
}
.ds-color-error-500 {
color: var(--ds-color-error-500);
}
.ds-color-error-400 {
color: var(--ds-color-error-400);
}
.ds-color-wtm-700 {
color: var(--ds-color-wtm-700);
}
.ds-color-wtm-500 {
color: var(--ds-color-wtm-500);
}
.ds-color-wtm-400 {
color: var(--ds-color-wtm-400);
}
.ds-color-wtm-violet {
color: var(--ds-color-wtm-violet);
}
.ds-color-wtm-teal {
color: var(--ds-color-wtm-teal);
}
.ds-color-wtm-pink {
color: var(--ds-color-wtm-pink);
}
.ds-color-gradient-newsletter {
background: var(--ds-color-gradient-newsletter);
}
.ds-color-gradient-browser {
background: var(--ds-color-gradient-browser);
}
.ds-color-gradient-home {
background: var(--ds-color-gradient-home);
}
.ds-color-gradient-enterprise {
background: var(--ds-color-gradient-enterprise);
}
.ds-color-gradient-gray {
background: var(--ds-color-gradient-gray);
}
.ds-color-gradient-wtm {
background: var(--ds-color-gradient-wtm);
}
.ds-color-gradient-newsletter,
.ds-color-gradient-browser,
.ds-color-gradient-home,
.ds-color-gradient-enterprise,
.ds-color-gradient-gray,
.ds-color-gradient-wtm {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
/* Backgrounds */
.ds-bg-gray-900 {
background-color: var(--ds-color-gray-900);
}
.ds-bg-gray-800 {
background-color: var(--ds-color-gray-800);
}
.ds-bg-gray-700 {
background-color: var(--ds-color-gray-700);
}
.ds-bg-gray-600 {
background-color: var(--ds-color-gray-600);
}
.ds-bg-gray-500 {
background-color: var(--ds-color-gray-500);
}
.ds-bg-gray-400 {
background-color: var(--ds-color-gray-400);
}
.ds-bg-gray-300 {
background-color: var(--ds-color-gray-300);
}
.ds-bg-white {
background-color: var(--ds-color-white);
}
.ds-bg-gradient-gray {
background: var(--ds-color-gradient-gray);
}
.ds-bg-primary-500 {
background-color: var(--ds-color-primary-500);
}
.ds-bg-success-500 {
background-color: var(--ds-color-success-500);
}
.ds-bg-warning-500 {
background-color: var(--ds-color-warning-500);
}
/* Margins */
.ds-margin-section {
margin: var(--ds-layout-spacing-section) 0;
}
.ds-margin-v-5xl {
margin: var(--ds-layout-spacing-5xl) 0;
}
.ds-margin-v-4xl {
margin: var(--ds-layout-spacing-4xl) 0;
}
.ds-margin-v-3xl {
margin: var(--ds-layout-spacing-3xl) 0;
}
.ds-margin-v-2xl {
margin: var(--ds-layout-spacing-2xl) 0;
}
.ds-margin-v-xl {
margin: var(--ds-layout-spacing-xl) 0;
}
.ds-margin-v-l {
margin: var(--ds-layout-spacing-l) 0;
}
.ds-margin-v-m {
margin: var(--ds-layout-spacing-m) 0;
}
.ds-margin-v-s {
margin: var(--ds-layout-spacing-s) 0;
}
.ds-margin-v-xs {
margin: var(--ds-layout-spacing-xs) 0;
}
.ds-margin-h-5xl {
margin: 0 var(--ds-layout-spacing-5xl);
}
.ds-margin-h-4xl {
margin: 0 var(--ds-layout-spacing-4xl);
}
.ds-margin-h-3xl {
margin: 0 var(--ds-layout-spacing-3xl);
}
.ds-margin-h-2xl {
margin: 0 var(--ds-layout-spacing-2xl);
}
.ds-margin-h-xl {
margin: 0 var(--ds-layout-spacing-xl);
}
.ds-margin-h-l {
margin: 0 var(--ds-layout-spacing-l);
}
.ds-margin-h-m {
margin: 0 var(--ds-layout-spacing-m);
}
.ds-margin-h-s {
margin: 0 var(--ds-layout-spacing-s);
}
.ds-margin-h-xs {
margin: 0 var(--ds-layout-spacing-xs);
}
.ds-margin-t-5xl {
margin-top: var(--ds-layout-spacing-5xl);
}
.ds-margin-t-4xl {
margin-top: var(--ds-layout-spacing-4xl);
}
.ds-margin-t-3xl {
margin-top: var(--ds-layout-spacing-3xl);
}
.ds-margin-t-2xl {
margin-top: var(--ds-layout-spacing-2xl);
}
.ds-margin-t-xl {
margin-top: var(--ds-layout-spacing-xl);
}
.ds-margin-t-l {
margin-top: var(--ds-layout-spacing-l);
}
.ds-margin-t-m {
margin-top: var(--ds-layout-spacing-m);
}
.ds-margin-t-s {
margin-top: var(--ds-layout-spacing-s);
}
.ds-margin-t-xs {
margin-top: var(--ds-layout-spacing-xs);
}
.ds-margin-r-5xl {
margin-right: var(--ds-layout-spacing-5xl);
}
.ds-margin-r-4xl {
margin-right: var(--ds-layout-spacing-4xl);
}
.ds-margin-r-3xl {
margin-right: var(--ds-layout-spacing-3xl);
}
.ds-margin-r-2xl {
margin-right: var(--ds-layout-spacing-2xl);
}
.ds-margin-r-xl {
margin-right: var(--ds-layout-spacing-xl);
}
.ds-margin-r-l {
margin-right: var(--ds-layout-spacing-l);
}
.ds-margin-r-m {
margin-right: var(--ds-layout-spacing-m);
}
.ds-margin-r-s {
margin-right: var(--ds-layout-spacing-s);
}
.ds-margin-r-xs {
margin-right: var(--ds-layout-spacing-xs);
}
.ds-margin-b-5xl {
margin-bottom: var(--ds-layout-spacing-5xl);
}
.ds-margin-b-4xl {
margin-bottom: var(--ds-layout-spacing-4xl);
}
.ds-margin-b-3xl {
margin-bottom: var(--ds-layout-spacing-3xl);
}
.ds-margin-b-2xl {
margin-bottom: var(--ds-layout-spacing-2xl);
}
.ds-margin-b-xl {
margin-bottom: var(--ds-layout-spacing-xl);
}
.ds-margin-b-l {
margin-bottom: var(--ds-layout-spacing-l);
}
.ds-margin-b-m {
margin-bottom: var(--ds-layout-spacing-m);
}
.ds-margin-b-s {
margin-bottom: var(--ds-layout-spacing-s);
}
.ds-margin-b-xs {
margin-bottom: var(--ds-layout-spacing-xs);
}
.ds-margin-l-5xl {
margin-left: var(--ds-layout-spacing-5xl);
}
.ds-margin-l-4xl {
margin-left: var(--ds-layout-spacing-4xl);
}
.ds-margin-l-3xl {
margin-left: var(--ds-layout-spacing-3xl);
}
.ds-margin-l-2xl {
margin-left: var(--ds-layout-spacing-2xl);
}
.ds-margin-l-xl {
margin-left: var(--ds-layout-spacing-xl);
}
.ds-margin-l-l {
margin-left: var(--ds-layout-spacing-l);
}
.ds-margin-l-m {
margin-left: var(--ds-layout-spacing-m);
}
.ds-margin-l-s {
margin-left: var(--ds-layout-spacing-s);
}
.ds-margin-l-xs {
margin-left: var(--ds-layout-spacing-xs);
}
.ds-row {
display: flex;
flex-flow: row nowrap;
gap: 8px;
}
.ds-flex-wrap {
flex-wrap: wrap;
}
.ds-column {
display: flex;
flex-flow: column nowrap;
gap: 8px;
}
.ds-gap-0 {
gap: 0;
}
.ds-gap-4 {
gap: 4px;
}
.ds-gap-8 {
gap: 8px;
}
.ds-gap-16 {
gap: 16px;
}
.ds-gap-24 {
gap: 24px;
}
.ds-gap-40 {
gap: 40px;
}
.ds-flex-inline {
display: inline-flex;
}
.ds-flex-items-center {
align-items: center;
}
.ds-flex-justify-center {
justify-content: center;
}
.ds-flex-justify-right {
justify-content: flex-end;
}
.ds-flex-grow {
flex: 1;
}
.ds-flex-no-shrink {
flex-shrink: 0;
}
.ds-article-main {
overflow: visible;
}
.ds-hidden-article .ds-article-header {
border: none;
padding-bottom: 0;
margin-bottom: 40px;
padding-top: 40px;
}
.ds-article {
color: var(--ds-color-gray-200);
padding-bottom: 80px;
}
.ds-article-note-container {
display: flex;
justify-content: center;
max-width: 940px;
margin: 0 auto 32px;
text-align: center;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-600);
}
.ds-article-note-container > p {
color: var(--ds-color-white);
font: var(--ds-font-body-m);
margin: 0;
padding: 16px;
}
.ds-article-note-container > p > strong {
font: var(--ds-font-label-m);
}
.ds-article-note-container > p > a {
display:inline-block;
}
.ds-article h1 {
font: var(--ds-font-display-xl);
font-weight: 700;
text-transform: uppercase;
color: var(--ds-color-white);
text-align: center;
margin: 16px 0 24px;
}
.ds-article-container h2 {
font: var(--ds-font-headline-l);
margin: 64px 0 24px;
color: var(--ds-color-white);
}
.ds-article-container h2:first-child {
margin-top: 0;
}
.ds-article-container h3 {
font: var(--ds-font-headline-m);
margin: 48px 0 24px;
color: var(--ds-color-white);
}
.ds-article-container h2 + h3 {
margin-top: 24px;
}
.ds-article-container h4 {
font: var(--ds-font-headline-s2);
margin: 40px 0 24px;
color: var(--ds-color-white);
}
.ds-article-container h5 {
margin: 32px 0 12px;
padding: 8px;
width: 76px;
font: var(--ds-font-display-xs);
text-transform: uppercase;
text-align: center;
color: var(--ds-color-white);
background: var(--ds-color-gray-700);
border-radius: 8px;
}
.ds-article h1 strong,
.ds-article-container h2 strong,
.ds-article-container h3 strong,
.ds-article-container h4 strong,
.ds-article-container h5 strong {
font-weight: inherit;
}
.ds-article-container p {
font: var(--ds-font-body-xl);
margin: 24px 0;
word-break: break-word;
overflow-wrap: anywhere;
}
.ds-article-container p + p {
margin-top: 32px;
}
.ds-article-container h5 + p {
margin-top: 12px;
}
.ds-article-container p strong,
.ds-article-container li strong {
color: var(--ds-color-white);
font-weight: 500;
}
.ds-article-container p code {
display: inline-block;
padding: 2px 6px;
font-size: 0.8em;
border-radius: 4px;
background: var(--ds-color-gray-900);
}
.ds-article-container li {
font: var(--ds-font-body-xl);
margin-bottom: 24px;
}
.ds-article-container a:not(.ds-button, .ds-button-large) {
color: var(--ds-color-primary-500);
text-decoration: none;
}
.ds-article-container
a:hover:not(.ds-button, .ds-button-large, .ds-blockquote-link) {
text-decoration: underline;
}
.ds-article-container .block-img {
border-radius: 16px;
overflow: hidden;
margin: 64px 0 48px;
outline: 1px solid var(--ds-color-gray-900);
}
.ds-article-container .block-img img {
display: block;
width: 100%;
height: auto;
}
.ds-article-container gh-cta {
margin: 64px 0;
}
.ds-article-header .ds-article-container gh-cta {
margin: 40px 0;
}
.ds-article-container gh-cta:last-child {
margin-bottom: 0;
}
.ds-article-container blockquote {
margin: 48px 0;
padding-left: 32px;
border-left: 2px solid var(--ds-color-primary-500);
color: var(--ds-color-white);
}
.ds-article-container blockquote p {
font: var(--ds-font-blockquote);
margin: 0;
}
.ds-article-container blockquote p::before {
content: '\201C';
}
.ds-article-container blockquote p::after {
content: '\201D';
}
.ds-article-container blockquote cite {
display: block;
margin-top: 16px;
font: var(--ds-font-label-l);
color: var(--ds-color-gray-400);
}
.ds-article-container blockquote .ds-blockquote-link:hover span {
text-decoration: underline;
}
.ds-article-container blockquote cite a svg {
vertical-align: bottom;
}
.ds-article-container {
max-width: 640px;
margin: 0 auto;
box-sizing: content-box;
}
.ds-article-header {
max-width: 1200px;
margin: 0 auto 40px;
box-sizing: border-box;
}
.ds-article-header.ds-article-hidden {
border: none;
padding-bottom: 0;
margin-bottom: 40px;
padding-top: 40px;
}
.ds-article-header > h1 {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.ds-article-header > p {
font: var(--ds-font-headline-xs);
text-align: center;
margin: 0 0 8px;
text-transform: uppercase;
text-align: center;
}
.ds-article-header .ds-article-container h2 {
font: var(--ds-font-headline-m);
margin-top: 24px;
}
.ds-article-header > img {
display: block;
margin: 24px auto;
width: 940px;
max-width: 100%;
border-radius: 16px;
overflow: hidden;
}
a.ds-article-back-button {
margin: 16px 0 24px;
}
.ds-article-testimonials {
margin: 80px 0;
}
.ds-article-testimonials p {
font: inherit;
}
.ds-article-testimonials-items {
margin: 16px 0;
display: flex;
flex-flow: column;
gap: 8px;
}
.ds-article-testimonials-items > * {
flex: 1;
}
.ds-article-testimonials-items *:first-child:last-child > div:first-child {
font: var(--ds-font-headline-m);
}
.ds-article .ds-testimonials-section {
padding-bottom: 0;
}
@media screen and (min-width: 768px) {
.ds-article-container .block-img {
margin: 64px 0;
}
.ds-article-container gh-cta {
margin: 80px 0;
}
a.ds-article-back-button {
margin: 24px 0 40px;
}
.ds-article-header {
margin-bottom: 64px;
}
.ds-article-header > p {
margin-bottom: 16px;
}
.ds-article-header .ds-article-container h2 {
margin-top: 40px;
}
.ds-article-header > img {
margin: 40px auto;
}
.ds-article-testimonials-items {
flex-flow: row;
}
}
@media screen and (min-width: 992px) {
.ds-article-container h2 {
margin: 80px 0 24px;
}
.ds-article-container h3 {
margin: 64px 0 24px;
}
.ds-article-container h4 {
margin: 56px 0 24px;
}
.ds-article-header h2 {
margin-top: 40px;
}
}
@media screen and (min-width: 1280px) {
.ds-article-header {
padding-bottom: 40px;
margin-bottom: 80px;
border-bottom: 1px solid var(--ds-color-gray-600);
}
}
.ds-article-table {
margin: 64px 0;
overflow: auto;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-600);
}
h3.ds-article-table-header {
font: var(--ds-font-display-m);
text-transform: uppercase;
text-align: center;
margin: 64px 0 32px;
}
h3.ds-article-table-header + .ds-article-table {
margin-top: 0;
}
.ds-article-table table {
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: separate;
}
.ds-article-table td:first-child {
position: sticky;
left: 0px;
z-index: 1;
}
.ds-article-table tr:nth-child(odd) td {
background: var(--ds-color-gray-700);
}
.ds-article-table tr:nth-child(even) td {
background: var(--ds-color-gray-800);
}
.ds-article-table td:first-child {
border-right: 1px solid var(--ds-color-gray-600);
}
.ds-article-table h4 {
margin: 0;
font: var(--ds-font-label-m);
}
.ds-article-table p {
margin: 0;
font: var(--ds-font-body-s);
}
.ds-article-table p + p {
margin-top: 12px;
}
.ds-article-table td {
vertical-align: top;
min-width: 150px;
padding: 8px 0 8px 8px;
}
.ds-article-table td:first-child {
min-width: 110px;
}
.ds-article-table td:last-child {
padding-right: 8px;
}
.ds-article-table tr:first-child td {
padding: 16px 8px;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.ds-article-table td {
padding: 16px;
min-width: 150px;
}
.ds-article-table td:first-child {
min-width: 120px;
}
.ds-article-table tr:first-child td {
padding: 16px;
}
}
.ds-article-table tr:first-child td:first-child {
text-align: center;
}
.ds-article-table td:has(img) {
vertical-align: middle;
padding: 16px;
}
.ds-article-table td .block-img {
border-radius: 0;
margin: 0;
outline: none;
}
@media screen and (min-width: 768px) {
.ds-article-table {
margin-left: -48px;
margin-right: -48px;
}
}
@media screen and (min-width: 992px) {
.ds-article-table {
margin-left: -64px;
margin-right: -64px;
}
}
.ds-blog-container {
margin-top: 24px;
margin-bottom: 40px;
}
.ds-blog-title-container {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.ds-blog-title {
position: relative;
}
.ds-blog-rss-button {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
height: 40px;
margin-left: 16px;
display: grid;
grid-template-columns: max-content;
align-items: center;
justify-content: center;
padding: 10px 14px;
gap: 8px;
font: var(--ds-font-label-m);
background: rgba(32, 34, 37, 0.5);
color: var(--ds-color-white);
border-radius: 100px;
}
.ds-blog-rss-button span {
display: none;
}
.ds-blog-rss-button:hover,
.ds-blog-rss-button:focus,
.ds-blog-rss-button:active {
color: var(--ds-color-primary-500);
background: rgba(32, 34, 37, 1);
}
.ds-blog-categories {
display: flex;
overflow-x: auto;
gap: 4px;
margin: 16px calc(var(--ds-layout-padding) * -1);
padding: 0 var(--ds-layout-padding);
scrollbar-width: none;
}
.ds-blog-categories::-webkit-scrollbar {
display: none;
}
.ds-blog-categories a {
flex-shrink: 0;
}
.ds-blog-categories a.active {
background: white;
color: var(--ds-color-gray-800);
}
.ds-blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 24px 0;
}
.ds-blog-related {
padding-top: 40px;
padding-bottom: 40px;
}
.ds-blog-related .ds-blog-grid {
margin: 0;
}
.ds-blog-post {
display: flex;
flex-flow: column nowrap;
}
.ds-blog-post-img {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
padding-top: 56.25;
aspect-ratio: 16 / 9;
background: var(--ds-color-gray-800);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ds-blog-post-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s cubic-bezier(0.4, 0.15, 0, 1);
}
.ds-blog-post-content {
padding: 4px;
margin-top: 4px;
border-radius: 16px;
transition: background 0.3s cubic-bezier(0.4, 0.15, 0, 1);
}
.ds-blog-post-content div:first-child {
text-transform: uppercase;
}
.ds-blog-post:hover img {
transform: translateY(4px) scale(1.1);
}
.ds-blog-post:hover .ds-blog-post-content {
background: var(--ds-color-gray-800);
}
.ds-blog-grid.span .ds-blog-post:first-child {
grid-column: span 2;
}
.ds-blog-grid.span .ds-blog-post:first-child h4 {
font: var(--ds-font-label-xl);
font-weight: 500;
}
.ds-blog-faq {
margin-top: 0px;
padding-bottom: 80px;
}
@media screen and (min-width: 768px) {
.ds-blog-container {
margin-top: 32px;
}
.ds-blog-rss-button {
grid-template-columns: max-content max-content;
}
.ds-blog-rss-button span {
display: inline;
}
.ds-blog-categories {
margin: 24px 0;
padding: 0;
gap: 8px;
flex-flow: row wrap;
justify-content: center;
}
.ds-blog-grid {
gap: 40px;
margin: 40px 0;
}
.ds-blog-grid.span .ds-blog-post:first-child {
flex-flow: row nowrap;
}
.ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-img {
max-width: 580px;
flex: 4;
}
.ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-content {
flex: 3 1;
display: flex;
flex-flow: column;
justify-content: center;
margin: 0 0 0 12px;
padding: 12px;
}
.ds-blog-grid.span .ds-blog-post:first-child h4 {
font: var(--ds-font-headline-s);
font-weight: 500;
}
.ds-blog-post-content {
padding: 12px;
}
.ds-blog-faq {
margin-top: 0px;
padding-bottom: 120px;
}
}
@media screen and (min-width: 992px) {
.ds-blog-container {
margin-bottom: 64px;
}
.ds-blog-grid {
grid-template-columns: repeat(3, 1fr);
}
.ds-blog-grid.span .ds-blog-post:first-child {
grid-column: span 3;
}
.ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-content {
margin-left: 24px;
padding: 16px;
}
.ds-blog-grid.span .ds-blog-post:first-child h4 {
font: var(--ds-font-headline-l);
font-weight: 500;
}
.ds-blog-grid.span .ds-blog-post:first-child div:last-child {
font: var(--ds-font-label-l);
font-weight: 500;
}
}
@media screen and (min-width: 1280px) {
.ds-blog-related {
padding-top: 64px;
padding-bottom: 64px;
}
.ds-blog-grid.span .ds-blog-post:first-child {
margin-bottom: 40px;
}
}
@media screen and (max-width: 991px) {
.ds-blog-related .ds-blog-grid {
grid-template-rows: 1fr;
grid-auto-rows: 0;
overflow: hidden;
}
}
.ds-contribution .ds-body-l a,
.ds-contribution .ds-body-m a {
color: var(--ds-color-primary-500);
text-decoration: none;
}
.ds-contribution .ds-section-two-columns a {
text-decoration: none;
}
.ds-contribution-section-cta {
display: flex;
flex-flow: column-reverse;
padding-top: 32px;
padding-bottom: 0;
}
.ds-contribution-section-cta > *:first-child {
max-width: 240px;
margin: 0 auto;
}
.ds-contribution-section-cta-button {
display: flex;
flex-flow: column;
margin: 24px 0;
gap: 8px;
}
.ds-contribution-shop-button {
position: relative;
}
.ds-contribution-section-cta-products {
display: grid;
grid: auto / max-content 1fr;
gap: 24px;
margin: 24px 0;
}
.ds-contribution-section-cta-products > div:nth-child(odd) {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--ds-color-gray-800);
margin-right: -8px;
}
@media screen and (min-width: 768px) {
.ds-contribution-section-cta > div > p {
max-width: 520px;
}
.ds-contribution-section-cta-button {
flex-flow: row;
}
.ds-contribution-shop-button .ds-shop-discount {
position: absolute;
top: -16px;
right: -16px;
}
.ds-contribution-section-cta-products {
grid: auto / repeat(2, max-content 1fr);
gap: 40px;
margin: 32px 0;
}
.ds-contribution-section-cta-products > div:nth-child(odd) {
margin-right: -24px;
}
}
@media screen and (min-width: 1024px) {
.ds-contribution-section-cta {
display: grid;
grid: auto / 1fr max-content;
gap: 40px;
padding-top: 40px;
}
.ds-contribution-section-cta > *:first-child {
max-width: 320px;
}
.ds-contribution-section-cta-button {
margin: 40px 0 40px;
}
}
.ds-contribution-info {
flex-flow: column-reverse;
}
.ds-contribution-support {
display: flex;
flex-flow: column;
gap: 40px;
max-width: 600px;
margin: 0 auto;
padding-bottom: var(--ds-layout-spacing-2xl);
}
@media screen and (min-width: 1280px) {
.ds-contribution-support {
display: grid;
grid: auto / 1fr 600px;
align-items: start;
max-width: 100%;
}
}
.ds-contribution-pricing {
display: flex;
flex-flow: column;
gap: 8px;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-600);
box-shadow: 30px 60px 160px rgba(0, 0, 0, 0.4);
padding: 24px 16px;
text-align: center;
}
.ds-contribution-pricing.yearly .monthly,
.ds-contribution-pricing.yearly .one-time,
.ds-contribution-pricing.monthly .yearly,
.ds-contribution-pricing.monthly .one-time,
.ds-contribution-pricing.one-time .monthly,
.ds-contribution-pricing.one-time .yearly {
display: none;
}
.ds-contribution-pricing a.contributor {
display: none;
}
.ds-contribution-pricing a.contributor.active {
display: inline-block;
}
.ds-contribution-pricing-description {
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.ds-contribution-pricing-payment {
display: flex;
flex-flow: column;
align-self: center;
gap: 16px;
padding: 0 8px;
}
.ds-contribution-pricing-payment label {
display: flex;
flex-flow: row;
align-items: center;
column-gap: 8px;
text-align: left;
padding-bottom: 12px;
cursor: pointer;
}
.ds-contribution-pricing-payment label input[type='radio'] {
grid-row: span 2;
margin: 0;
width: 16px;
height: 16px;
}
.ds-contribution-pricing-payment label input[type='radio']:checked {
background-size: 8px 8px;
}
.ds-contribution-pricing-table {
display: flex;
gap: 8px;
margin: 0 -8px 16px;
}
.ds-contribution-pricing-table button {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
min-height: 88px;
background: var(--ds-color-gray-600);
border: 1px solid var(--ds-color-gray-800);
border-radius: 8px;
height: 96px;
flex: 1;
cursor: pointer;
}
.ds-contribution-pricing-table button div {
display: flex;
flex-flow: column;
}
.ds-contribution-pricing-table button.selected {
border-color: var(--ds-color-primary-500);
background: rgba(0, 174, 240, 0.1);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.ds-contribution-pricing-table button.selected div {
color: var(--ds-color-primary-500);
}
.ds-contribution-pricing-anchors a {
padding-left: 40px;
padding-right: 40px;
}
@media screen and (min-width: 768px) {
.ds-contribution-pricing {
padding: 24px;
}
.ds-contribution-pricing-payment {
display: flex;
flex-flow: row;
justify-content: center;
gap: 8px;
padding: 0;
}
.ds-contribution-pricing-payment label {
min-width: 168px;
justify-content: center;
}
.ds-contribution-pricing-table {
margin-left: 0px;
margin-right: 0px;
}
.ds-contribution-pricing-table button div {
display: block;
}
.ds-contribution-pricing > a {
margin: 16px 16px 8px;
}
.ds-contribution-pricing-logos {
display: flex;
margin: 16px -24px -24px;
}
}
@media screen and (min-width: 1280px) {
.ds-contribution-pricing {
padding: 40px 40px 24px;
}
.ds-contribution-pricing > a {
margin: 16px 0px 8px;
}
.ds-contribution-pricing-logos {
display: flex;
margin: 16px -40px -40px;
}
}
.ds-contribution-platform {
text-transform: none;
font: var(--ds-font-body-l);
}
.ds-contribution-platform svg {
width: 32px;
height: 32px;
}
.ds-contribution-share a {
width: 64px;
height: 64px;
padding: 0;
border-radius: 64px;
background: var(--ds-color-gray-900);
border-color: var(--ds-color-gray-900);
}
.ds-contribution-share a:hover {
border-color: var(--ds-color-gray-500);
background: var(--ds-color-gray-900);
}
.ds-comparison {
color: var(--ds-color-gray-300);
}
.ds-comparison-header {
display: flex;
align-items: flex-end;
position: relative;
text-align: center;
background: var(--ds-color-gray-700);
padding-bottom: 8px;
padding-top: 0;
}
.ds-comparison-header h1 {
margin-top: 0;
}
.ds-comparison-header::before {
z-index: 0;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--ds-color-gray-800)
url("data:image/svg+xml,%3Csvg width='1440' height='525' viewBox='0 0 1440 525' fill='none' xmlns='http://www.w3.org/2000/svg' style='background: %232f3136'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-560 0H0C132.548 0 240 107.452 240 240C240 242.827 239.951 245.642 239.854 248.445C239.951 251.616 240 254.927 240 258.38C240 499.88 461 499.88 720 499.88C979 499.88 1199 499.88 1199 258.38C1199 248.822 1199.38 240.358 1200.1 232.915C1203.85 103.644 1309.82 0 1440 0H2000V549H1440V549.38H0V549H-560V0Z' fill='%23202225'/%3E%3C/svg%3E")
no-repeat center bottom;
height: 525px;
}
.ds-comparison-header * {
position: relative;
z-index: 1;
}
.ds-comparison-header h2 {
margin: 24px 0 8px;
}
.ds-comparison-header p {
margin: 8px 0 0px;
padding-bottom: 32px;
}
.ds-comparison-header gh-cta {
margin: 0 0 60px;
}
.ds-comparison-header gh-cta::part(container) {
border-color: var(--ds-color-gray-500);
}
.ds-comparison-button {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.ds-comparison-button a {
text-decoration: none;
}
.ds-comparison-body *:first-child {
margin-top: 0;
}
@media screen and (min-width: 768px) {
.ds-comparison-header {
padding-bottom: 0px;
padding-top: 80px;
}
.ds-comparison-header img {
display: block;
margin: 40px auto;
}
.ds-comparison-button {
right: auto;
left: 50%;
transform: translateX(-50%);
}
}
.ds-header.ds-header-home {
background: var(--ds-color-gray-800);
}
.ds-home-header {
overflow: hidden;
}
#ds-home-header-animation {
background: url(/prismic-images/ghostery/20c83a12-ea8f-45e0-9e1d-c14c8362ed40_bg_animation.png?auto=format)
no-repeat center 1px;
background-size: contain;
}
.ds-home-section-cta h2 {
max-width: 230px;
}
.ds-home-section-cta-button p {
max-width: 100%;
}
.ds-home-section-cta-video {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: -8px;
}
.ds-home-video-container {
padding: 0;
border-radius: 16px;
overflow: hidden;
}
.ds-home-video {
max-width: 100%;
}
.ds-home-tools {
position: relative;
z-index: 2;
display: flex;
flex-flow: column nowrap;
gap: 16px;
padding-bottom: 40px;
}
.ds-home-tools > a {
display: flex;
flex-flow: column nowrap;
text-align: center;
align-items: center;
gap: 16px;
padding: 40px 0 0;
background: linear-gradient(
180deg,
rgba(18, 19, 23, 0.5) 0%,
rgba(18, 19, 23, 0) 100%
);
border: 1px solid var(--ds-color-gray-900);
border-radius: 16px;
box-shadow: 0px 40px 60px 0px #00000033, 0px 2px 0px 0px #ffffff1a inset;
overflow: hidden;
}
.ds-home-tools > a:hover {
background: var(--ds-color-gray-800);
}
.ds-home-tools > a:hover > div:last-child {
background: rgba(255, 255, 255, 0.1);
}
.ds-home-tools > a:active {
background: var(--ds-color-gray-900);
}
.ds-home-tools > a:active > div:last-child {
background: transparent;
}
.ds-home-tools > a > div:last-child {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px;
background: rgba(255, 255, 255, 0.02);
align-self: stretch;
border-top: 1px solid var(--ds-color-gray-900);
box-shadow: inset 0 1px 0 var(--ds-color-gray-600);
}
.ds-home-tools-features {
display: grid;
grid-template-columns: max-content 1fr;
text-align: left;
align-items: center;
gap: 4px;
padding: 4px 24px;
flex: 1;
}
.ds-home-features-section {
padding-bottom: 0;
}
.ds-home-features-header {
display: flex;
gap: 24px;
align-items: center;
}
.ds-home-features-header div {
display: flex;
flex-flow: column;
gap: 4px;
}
.ds-home-products a:hover {
color: var(--ds-color-primary-500);
}
.ds-home-products .ds-home-learn-more:hover {
color: var(--ds-color-white);
}
.ds-home-logos {
margin: 0 -20px;
padding: 0 40px;
}
.ds-home-logos-prev {
left: 2px;
}
.ds-home-logos-next {
right: 2px;
}
.ds-home-logos-container img {
flex: 0 0 calc(100% / 3);
aspect-ratio: 2;
min-width: 0;
object-fit: contain;
}
@media screen and (min-width: 768px) {
.ds-header.ds-header-home {
background: var(--ds-color-gray-800);
box-shadow: inset 0 48px 0px var(--ds-color-gray-800),
inset 0 49px 0px var(--ds-color-gray-600);
}
.ds-header.ds-header-home .ds-header-other a.active {
background: var(--ds-color-gray-700);
}
.ds-home-section-cta h2 {
max-width: none;
}
.ds-home-section-cta-button,
.ds-home-section-cta-button p {
max-width: max-content;
}
.ds-home-logos {
margin: 0;
}
.ds-home-logos-container img {
flex: 0 0 calc(100% / 4);
}
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.ds-home-section-cta > div:last-child {
width: 100%;
max-width: 100%;
}
.ds-home-tools-features {
padding: 0;
}
}
@media screen and (min-width: 992px) {
.ds-home-section-cta > div:last-child {
max-width: 70%;
}
.ds-home-tools {
flex-flow: row nowrap;
justify-content: center;
gap: 8px;
}
.ds-home-tools > a {
flex: 1;
max-width: 400px;
}
}
@media screen and (min-width: 1280px) {
.ds-home-section-cta > div:last-child {
max-width: 65%;
}
.ds-home-tools {
gap: 24px;
}
.ds-home-logos-container img {
flex: 0 0 calc(100% / 6);
}
}
/* ----- Feature carousel ----- */
.ds-feature-carousel-section-wrap {
position: relative;
overflow: hidden;
}
.ds-feature-carousel-section-wrap::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg width='3048' height='78' viewBox='0 0 3048 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1.5 91.7305C-1.5 42.3614 51.4115 11.0494 94.6874 34.8088C114.185 45.5132 137.804 45.4936 157.284 34.7568L189.5 17C229.03 -4.78811 276.97 -4.78811 316.5 17C356.03 38.7881 403.97 38.7881 443.5 17C483.03 -4.78811 530.97 -4.78811 570.5 17C610.03 38.7881 657.97 38.7881 697.5 17C737.03 -4.78811 784.97 -4.78811 824.5 17C864.03 38.7881 911.97 38.7881 951.5 17C991.03 -4.78811 1038.97 -4.78811 1078.5 17C1118.03 38.7881 1165.97 38.7881 1205.5 17C1245.03 -4.78811 1292.97 -4.78811 1332.5 17C1372.03 38.7881 1419.97 38.7881 1459.5 17C1499.03 -4.78811 1546.97 -4.78811 1586.5 17C1626.03 38.7881 1673.97 38.7881 1713.5 17C1753.03 -4.78811 1800.97 -4.78811 1840.5 17C1880.03 38.7881 1927.97 38.7881 1967.5 17C2007.03 -4.78811 2054.97 -4.78811 2094.5 17C2134.03 38.7881 2181.97 38.7881 2221.5 17C2261.03 -4.78811 2308.97 -4.78811 2348.5 17C2388.03 38.7881 2435.97 38.7881 2475.5 17C2515.03 -4.78811 2562.97 -4.78811 2602.5 17C2642.03 38.7881 2689.97 38.7881 2729.5 17C2769.03 -4.78811 2816.97 -4.78811 2856.5 17L2888.81 34.8078C2908.23 45.5103 2931.77 45.5103 2951.19 34.8078C2994.26 11.071 3047 42.2243 3047 91.398V134H-1.5V91.7305Z' fill='%23202225'/%3E%3C/svg%3E"),
linear-gradient(
to bottom,
var(--ds-color-gray-800) 0,
var(--ds-color-gray-700) 292px,
var(--ds-color-gray-700) 528px,
transparent 528px,
transparent 100%
);
background-repeat: no-repeat, no-repeat;
background-position: center 432px, 0 0;
background-size: auto 96px, 100% 100%;
}
.ds-feature-carousel-section-wrap > section {
position: relative;
z-index: 1;
}
.ds-feature-carousel {
position: relative;
}
.ds-feature-carousel-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 72px;
margin: 0 -20px -40px;
padding-left: 20px;
padding-right: 20px;
scroll-padding-left: 20px;
}
.ds-feature-carousel-track::-webkit-scrollbar {
display: none;
}
.ds-feature-carousel-card {
flex: 0 0 calc(100% - 32px);
max-width: 360px;
scroll-snap-align: start;
display: flex;
flex-flow: column nowrap;
padding: 16px;
gap: 16px;
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
border-radius: 16px;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1),
0px 40px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.ds-feature-carousel-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 56px;
padding: 12px 16px;
background: rgba(0, 174, 240, 0.15);
border-radius: 12px;
color: var(--ds-color-primary-500);
font-family: var(--ds-font-family-display);
font-size: 16px;
line-height: 16px;
font-weight: 700;
letter-spacing: 0.48px;
text-transform: uppercase;
}
.ds-feature-carousel-label svg {
flex-shrink: 0;
}
.ds-feature-carousel-body {
flex: 1;
}
/* Controls (arrows + dots) */
.ds-feature-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 8px;
}
.ds-feature-carousel-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
color: var(--ds-color-white);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s ease, opacity 0.15s ease;
}
.ds-feature-carousel-arrow:hover {
background: rgba(255, 255, 255, 0.1);
}
.ds-feature-carousel-arrow:disabled {
opacity: 0.3;
cursor: default;
}
.ds-feature-carousel-arrow:disabled:hover {
background: transparent;
}
.ds-feature-carousel-dots {
display: flex;
align-items: center;
gap: 12px;
}
.ds-feature-carousel-dot {
width: 8px;
height: 8px;
padding: 0;
background: var(--ds-color-gray-600);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.ds-feature-carousel-dot:hover {
background: var(--ds-color-gray-400);
}
.ds-feature-carousel-dot[aria-current="true"] {
background: var(--ds-color-white);
transform: scale(1.1);
}
@media screen and (min-width: 768px) {
.ds-feature-carousel-track {
margin: 0 0 -40px;
padding-left: 0;
padding-right: 0;
scroll-padding-left: 0;
}
.ds-feature-carousel-card {
flex: 0 0 calc((100% - 16px) / 2);
max-width: none;
}
}
@media screen and (min-width: 992px) {
.ds-feature-carousel-card {
flex: 0 0 calc((100% - 48px) / 4);
}
}
.ds-home-hero-b-header {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 64px 24px;
}
.ds-home-hero-b-circles {
position: absolute;
top: 50%;
left: 50%;
width: min(640px, 100%);
height: auto;
/* Roundness depends on the SVG keeping preserveAspectRatio="meet" when this cap makes the box non-square. */
max-height: 100%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.ds-home-hero-b-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 100%;
}
.ds-home-hero-b-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 100%;
}
.ds-home-hero-b-heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
max-width: 683px;
}
.ds-home-hero-b-heading h1 {
text-align: center;
/* Use background-image, not the shorthand, so the inherited background-clip:text keeps working. */
background-image: linear-gradient(170.22deg, #129bf2 14.02%, #f77d7a 88.23%);
}
.ds-home-hero-b-subline {
text-align: center;
}
.ds-home-hero-b-cards {
display: flex;
gap: 8px;
justify-content: center;
width: 100%;
max-width: 376px;
}
.ds-home-hero-b-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 0;
min-width: 0;
max-width: 120px;
height: 120px;
border: 1px solid var(--ds-color-gray-900);
border-radius: 16px;
background: linear-gradient(180deg, rgba(18, 19, 23, 0.5), rgba(18, 19, 23, 0));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
overflow: hidden;
}
.ds-home-hero-b-card-badge {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
}
.ds-home-hero-b-card-badge img {
display: block;
width: 32px;
height: 32px;
}
.ds-home-hero-b-card-badge--ads {
background: #ff375b;
}
.ds-home-hero-b-card-badge--trackers {
background: #b980ff;
}
.ds-home-hero-b-card-badge--popups {
background: #f1d801;
}
.ds-home-hero-b-card-label {
font: var(--ds-font-display-2xs);
text-transform: uppercase;
text-align: center;
color: var(--ds-color-white);
}
/* Zero the shared partial's margin so the 40px rhythm holds. */
.ds-home-hero-b-cta {
display: flex;
justify-content: center;
width: 100%;
}
.ds-home-hero-b-cta p {
margin: 0;
}
.ds-home-hero-b-bullets {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.ds-home-hero-b-bullet {
display: flex;
align-items: center;
gap: 16px;
}
.ds-home-hero-b-bullet svg {
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.ds-home-hero-b-header {
padding: 96px 24px;
}
}
/*
* Light color scheme for homepage variant B (/?hero=b).
* The layout is identical to variant A; this file only remaps the
* design-system color variables and patches the few hardcoded colors.
* Scoped to body.ds-home-light — no effect on any other page or variant.
*/
body.ds-home-light {
/* backgrounds: dark grays become light */
--ds-color-gray-900: #daf3ff;
--ds-color-gray-800: #ffffff;
--ds-color-gray-700: #ebf7fd;
--ds-color-gray-600: #d4d6d9;
/* text: light grays become dark */
--ds-color-gray-400: #636468;
--ds-color-gray-300: #3f4146;
--ds-color-gray-200: #2f3136;
--ds-color-white: #202225;
/* lavender-blue section gradient — the white wave sits on top of this,
and it fades to pure white so following white sections join seamlessly */
--ds-color-gradient-gray: linear-gradient(180deg, #e6e7f5 0%, #ffffff 100%);
/* headline fades blue to purple in the light design */
--ds-color-gradient-home: linear-gradient(141.55deg, #129bf2 15.08%, #715dee 75.66%);
/* mesh-gradient glow spans the header and hero (both are transparent);
white base beyond it so it can't peek through section margins */
background: #ffffff url(/assets/home-light/bg-gradient-light-e78f649e1fc80af7e7dd3cec7047825443e1044590fa595515318cbb27f10a5b.jpg) no-repeat top center;
background-size: max(100%, 1100px) auto;
}
/* First fold sits on the body glow; only feather its bottom into white */
body.ds-home-light .ds-home-header {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, #ffffff 100%);
}
/* Hero B one-column layout on the light variant: transparent over the body
glow, light glass cards, blue-to-purple headline */
body.ds-home-light .ds-home-hero-b-header {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, #ffffff 100%);
}
body.ds-home-light .ds-home-hero-b-heading h1 {
background-image: linear-gradient(141.55deg, #129bf2 15.08%, #715dee 75.66%);
}
body.ds-home-light .ds-home-hero-b-card {
border: 1px solid #d8e1eb;
background: #ffffff;
box-shadow: 0 8px 24px rgba(0, 83, 166, 0.12);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Header is transparent so the glow shows through */
body.ds-home-light .ds-header.ds-header-home {
background: transparent;
}
@media screen and (min-width: 768px) {
body.ds-home-light .ds-header.ds-header-home {
background: transparent;
/* slightly darker topbar strip + white divider line (per Figma) */
box-shadow: inset 0 48px 0px rgba(0, 46, 139, 0.05), inset 0 49px 0px #ffffff;
}
/* Sections breathe 20% less on the light variant (80px -> 64px) */
body.ds-home-light .ds-section {
padding-top: 64px;
padding-bottom: 64px;
}
/* Design rhythm: 40px between feature blocks and under section headers
(frame 3210-42016), instead of the 80px 4xl margin */
body.ds-home-light .ds-home-products .ds-section-two-columns,
body.ds-home-light .ds-home-products .ds-section-header,
body.ds-home-light .ds-feature-carousel-section .ds-section-header {
margin-bottom: 40px;
}
body.ds-home-light .ds-testimonials-section > .ds-section-header {
margin-bottom: 40px;
}
body.ds-home-light .ds-testimonials-section > .ds-section-header h2 {
margin-bottom: 0;
}
}
/* Solid buttons keep white text on their colored backgrounds */
body.ds-home-light .ds-button,
body.ds-home-light .ds-button-large,
body.ds-home-light .ds-button-small {
color: #ffffff;
}
body.ds-home-light .ds-button-transparent,
body.ds-home-light .ds-button-outline {
color: var(--ds-color-white);
}
body.ds-home-light .ds-button-wtm-white {
background: #ffffff;
}
/* Wave strip: transparent so the glow section below shows behind the
white wave crest (the section is pulled up underneath it) */
body.ds-home-light .ds-section-wave-bottom {
background: transparent;
}
/* Feather the top of glow sections into the white section above them —
except directly after the wave, where the glow must start solid */
body.ds-home-light .ds-bg-gradient-gray {
box-shadow: inset 0 100px 70px -70px #ffffff;
}
/* "Let's change" section: mesh glow starts at the wave and fades to white */
body.ds-home-light .ds-section-wave-bottom + .ds-bg-gradient-gray {
box-shadow: none;
margin-top: -54px;
padding-top: 54px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, #ffffff 100%),
#ffffff url(/assets/home-light/bg-gradient-light-e78f649e1fc80af7e7dd3cec7047825443e1044590fa595515318cbb27f10a5b.jpg) no-repeat top center;
background-size: auto, max(100%, 1100px) auto;
}
/* Testimonials section: plain white, no gradient (per design review) */
body.ds-home-light .ds-feature-carousel-section-wrap + .ds-bg-gradient-gray {
background: #ffffff;
box-shadow: none;
}
/* "Join 100+ Million" section: top of the footer glow asset,
starting with a clean straight edge (no white feather) */
body.ds-home-light .ds-bg-gradient-gray:has(> .ds-section-cta) {
background: #f5f8ff url(/assets/home-light/bg-gradient-light-footer-df5f2382ebc8114aaa8176dde8b0d2a7b845c3c10f881506df6e0c1af801b9c7.svg) no-repeat top center / cover;
box-shadow: none;
}
/* Product tiles are white in the light design — blue-tinted shadow per Figma */
body.ds-home-light .ds-home-features-header > img {
border-radius: 16px;
box-shadow: 0 0 0 1px #d8e1eb, 0 32px 80px 0 rgba(0, 83, 166, 0.12);
}
body.ds-home-light .ds-home-tools > a > img {
border-radius: 50%;
box-shadow: 0 0 0 1px #eef0f2, 0 2px 12px rgba(32, 34, 37, 0.06);
}
/* Hero: drop the dark backdrop behind the animation */
body.ds-home-light #ds-home-header-animation {
background: none;
}
/* Hero illustration is a 2x retina export (1160px) — display at half size */
body.ds-home-light .ds-home-section-cta .ds-section-cta-img img {
width: 580px;
max-width: 100%;
height: auto;
}
/* Tools cards: white cards with light borders instead of dark glass */
body.ds-home-light .ds-home-tools > a {
background: #ffffff;
border: 1px solid #d4d6d9;
box-shadow: 0px 24px 40px 0px rgba(32, 34, 37, 0.1);
}
body.ds-home-light .ds-home-tools > a:hover {
background: #ebf7fd;
}
body.ds-home-light .ds-home-tools > a:hover > div:last-child {
background: rgba(0, 174, 240, 0.08);
}
body.ds-home-light .ds-home-tools > a:active {
background: #daf3ff;
}
body.ds-home-light .ds-home-tools > a > div:last-child {
background: rgba(32, 34, 37, 0.03);
border-top: 1px solid #d4d6d9;
box-shadow: none;
}
/* Fade the edges of the suite screenshots so their glow doesn't cut off hard */
body.ds-home-light .ds-home-products .ds-section-two-columns > img {
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* Text links use the deeper blue on light backgrounds (per Figma) */
body.ds-home-light .ds-home-tools > a > div:last-child,
body.ds-home-light .ds-home-learn-more,
body.ds-home-light .ds-home-products p.ds-color-primary-500 {
color: var(--ds-color-primary-700);
}
/* Testimonial cards: white cards, light quote mark, soft shadow */
body.ds-home-light .ds-testimonials-card {
border: 1px solid #d8e1eb;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
#ffffff no-repeat 16px 12px
url("data:image/svg+xml,%3Csvg width='64' height='51' viewBox='0 0 64 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.7863 0L64 6.68507C61.503 8.42428 59.1145 10.3265 56.8346 12.3918C54.5547 14.3485 52.4919 16.4138 50.6463 18.5878C48.8007 20.7618 47.335 23.0445 46.2494 25.4359C45.2723 27.8273 44.7294 30.3274 44.6209 32.9362L41.6896 30.3274C42.5581 29.8926 43.4266 29.6209 44.2952 29.5122C45.1637 29.4035 46.0322 29.3491 46.9008 29.3491C50.592 29.3491 53.5776 30.3274 55.8575 32.284C58.1374 34.1319 59.2773 36.6864 59.2773 39.9474C59.2773 43.0997 58.1374 45.7085 55.8575 47.7738C53.6862 49.8391 50.8092 50.8718 47.2265 50.8718C43.3181 50.8718 40.1696 49.7304 37.7812 47.4477C35.3927 45.165 34.1985 41.5236 34.1985 36.5233C34.1985 32.7188 34.6327 29.1317 35.5013 25.762C36.4784 22.2836 37.7269 19.0226 39.2468 15.979C40.7668 12.8266 42.6124 9.94609 44.7837 7.33727C46.955 4.61977 49.2892 2.17401 51.7863 0ZM17.4249 0L29.6387 6.68507C27.1416 8.42428 24.7532 10.3265 22.4733 12.3918C20.1934 14.3485 18.1306 16.4138 16.285 18.5878C14.5479 20.7618 13.1366 23.0445 12.0509 25.4359C10.9652 27.8273 10.3681 30.3274 10.2595 32.9362L7.32824 30.3274C8.30534 29.8926 9.17388 29.6209 9.93384 29.5122C10.8024 29.4035 11.6709 29.3491 12.5394 29.3491C16.3393 29.3491 19.3249 30.3274 21.4962 32.284C23.7761 34.1319 24.916 36.6864 24.916 39.9474C24.916 43.0997 23.7761 45.7085 21.4962 47.7738C19.3249 49.8391 16.4478 50.8718 12.8651 50.8718C8.95674 50.8718 5.80831 49.7304 3.41985 47.4477C1.13995 45.165 0 41.5236 0 36.5233C0 32.7188 0.434267 29.1317 1.3028 25.762C2.17133 22.2836 3.36556 19.0226 4.8855 15.979C6.514 12.8266 8.35963 9.94609 10.4224 7.33727C12.5937 4.61977 14.9279 2.17401 17.4249 0Z' fill='%23E0E2E5' /%3E%3C/svg%3E%0A");
box-shadow: 0px 32px 80px -24px rgba(0, 83, 166, 0.18);
padding: 24px 32px;
justify-content: center;
}
/* Quotes cap at 4 lines and center vertically so all cards match (per Figma) */
body.ds-home-light .ds-testimonials-quote {
display: flex;
align-items: center;
min-height: 104px;
}
body.ds-home-light .ds-testimonials-quote p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
margin: 0;
}
/* Arrows: the shadow bleed inflates the carousel height, so center them
on the 218px cards instead of the element */
body.ds-home-light .ds-testimonials .ds-carousel-prev,
body.ds-home-light .ds-testimonials .ds-carousel-next {
top: 109px;
}
/* The slider clips overflow — give the big blue card shadows room to render
on every side so they fade out instead of cutting off in a hard line */
body.ds-home-light .ds-testimonials-gallery {
padding: 4px 0 120px;
margin: -4px 0 -120px;
/* fade out the very bottom of the shadow zone so it never cuts off hard */
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
}
/* Star rating sits on the same row as the store name (light layout only) */
body.ds-home-light .ds-testimonials-meta {
display: flex;
align-items: center;
gap: 8px;
color: #636568;
}
body.ds-home-light .ds-testimonials-meta .ds-testimonials-rating {
display: flex;
align-items: center;
gap: 4px;
}
body.ds-home-light .ds-testimonials-meta .ds-testimonials-source {
color: #636568;
}
/* Blog category labels: darken the per-category colors for contrast */
body.ds-home-light .ds-blog-post-content > .ds-headline-2xs {
filter: brightness(0.6) saturate(1.6);
}
/* Promo banner: light gradient instead of the dark blue/purple one */
body.ds-home-light .ds-banner {
border: 1px solid #d4d6d9;
box-shadow: 0 40px 60px 0 rgba(32, 34, 37, 0.08);
background:
center center / 800px 800px no-repeat
url('data:image/svg+xml,'),
center top
radial-gradient(
238.31% 138.8% at -0.03% -0.51%,
#daf3ff 0%,
#ebf7fd 60%,
#ffffff 100%
);
}
/* Header menu, footer links, and star rating hardcode white — remap to dark text */
body.ds-home-light .ds-header-menu-button button,
body.ds-home-light .ds-header-list,
body.ds-home-light .ds-header-list a,
body.ds-home-light .ds-footer-nav a,
body.ds-home-light .ds-testimonials-stars-rating-value {
color: var(--ds-color-white);
}
/* Header logo: the wordmark is white in the SVG — darken it (ghost stays blue) */
body.ds-home-light .ds-header-logo svg path[fill="white"] {
fill: #2f3136;
}
/* Active nav pill: subtle dark tint with dark text (per Figma) */
body.ds-home-light .ds-header.ds-header-home .ds-header-other a.active {
background: rgba(0, 0, 0, 0.05);
color: #2f3136;
}
/* Footer sits on the lower half of the glow asset (per design review) */
body.ds-home-light .ds-footer {
background: #f5f8ff url(/assets/home-light/bg-gradient-light-footer-df5f2382ebc8114aaa8176dde8b0d2a7b845c3c10f881506df6e0c1af801b9c7.svg) no-repeat center bottom / cover;
}
/* Footer bottom bar (copyright, legal links, socials) is muted gray per Figma */
body.ds-home-light .ds-footer-notice,
body.ds-home-light .ds-footer-notice a,
body.ds-home-light .ds-footer-copyrights svg,
body.ds-home-light .ds-footer-copyrights p {
color: #88898c;
}
/* Footer bottom bar: slightly darker overlay spanning the full viewport
width (per Figma); the padding formula keeps content aligned with the
container while the negative margins bleed the bar to the edges */
body.ds-home-light .ds-footer-notice {
background: rgba(0, 46, 139, 0.05);
border-top-color: #ffffff;
margin: 0 calc(50% - 50vw) -40px;
padding: 24px calc(50vw - 50%);
}
@media screen and (min-width: 992px) {
body.ds-home-light .ds-footer-notice {
margin-bottom: -24px;
}
}
/* Hover states (the light color overrides above would otherwise hide them) */
body.ds-home-light .ds-header-privacy-suite a {
color: #2f3136;
font: 500 16px / 20px var(--ds-font-family-label);
}
body.ds-home-light .ds-header-privacy-suite a:hover {
color: #121317;
}
body.ds-home-light .ds-header-other a:hover {
color: var(--ds-color-primary-700);
}
body.ds-home-light .ds-footer-nav a:hover,
body.ds-home-light .ds-footer-socials a:hover {
color: var(--ds-color-primary-700);
}
body.ds-home-light .ds-footer-notice a:hover {
color: var(--ds-color-white);
}
/* Bottom-viewport "Learn more" bar: light gradient instead of black */
body.ds-home-light .ds-learn-more {
background: linear-gradient(180deg, rgba(245, 248, 255, 0) 0%, #f5f8ff 100%);
}
body.ds-home-light .ds-learn-more a {
color: #2f3136;
}
body.ds-home-light .ds-learn-more a svg path {
fill: #2f3136;
}
/* Footer logo on light: blue ghost + dark wordmark (per Figma), not gray */
body.ds-home-light .ds-footer-logo svg path {
fill: #202225;
}
body.ds-home-light .ds-footer-logo svg path:first-of-type {
fill: #00aef0;
}
/* Press logos are white SVGs — invert them to dark */
body.ds-home-light .ds-home-logos-container img {
filter: invert(1);
}
/* Feature carousel: light cards and controls */
body.ds-home-light .ds-feature-carousel-card {
box-shadow: 0px 20px 30px rgba(32, 34, 37, 0.08);
}
body.ds-home-light .ds-feature-carousel-arrow:hover {
background: rgba(32, 34, 37, 0.06);
}
body.ds-home-light .ds-feature-carousel-section-wrap::before {
/* same wave as home.css but filled white to sit on the light gradient */
background-image: url("data:image/svg+xml,%3Csvg width='3048' height='78' viewBox='0 0 3048 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1.5 91.7305C-1.5 42.3614 51.4115 11.0494 94.6874 34.8088C114.185 45.5132 137.804 45.4936 157.284 34.7568L189.5 17C229.03 -4.78811 276.97 -4.78811 316.5 17C356.03 38.7881 403.97 38.7881 443.5 17C483.03 -4.78811 530.97 -4.78811 570.5 17C610.03 38.7881 657.97 38.7881 697.5 17C737.03 -4.78811 784.97 -4.78811 824.5 17C864.03 38.7881 911.97 38.7881 951.5 17C991.03 -4.78811 1038.97 -4.78811 1078.5 17C1118.03 38.7881 1165.97 38.7881 1205.5 17C1245.03 -4.78811 1292.97 -4.78811 1332.5 17C1372.03 38.7881 1419.97 38.7881 1459.5 17C1499.03 -4.78811 1546.97 -4.78811 1586.5 17C1626.03 38.7881 1673.97 38.7881 1713.5 17C1753.03 -4.78811 1800.97 -4.78811 1840.5 17C1880.03 38.7881 1927.97 38.7881 1967.5 17C2007.03 -4.78811 2054.97 -4.78811 2094.5 17C2134.03 38.7881 2181.97 38.7881 2221.5 17C2261.03 -4.78811 2308.97 -4.78811 2348.5 17C2388.03 38.7881 2435.97 38.7881 2475.5 17C2515.03 -4.78811 2562.97 -4.78811 2602.5 17C2642.03 38.7881 2689.97 38.7881 2729.5 17C2769.03 -4.78811 2816.97 -4.78811 2856.5 17L2888.81 34.8078C2908.23 45.5103 2931.77 45.5103 2951.19 34.8078C2994.26 11.071 3047 42.2243 3047 91.398V134H-1.5V91.7305Z' fill='white'/%3E%3C/svg%3E"),
linear-gradient(
to bottom,
var(--ds-color-gray-800) 0,
var(--ds-color-gray-700) 292px,
var(--ds-color-gray-700) 528px,
transparent 528px,
transparent 100%
);
}
.ds-header {
position: relative;
height: 72px;
}
.ds-header * {
-webkit-tap-highlight-color: transparent;
}
.ds-header-container {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 72px;
display: grid;
grid: auto / min-content 1fr min-content;
align-content: start;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.ds-header-container.open {
position: fixed;
height: 100%;
overflow: auto;
overscroll-behavior: contain;
--webkit-overflow-scrolling: touch;
background: var(--ds-color-gray-800);
}
.ds-header-container.open .ds-header-logo,
.ds-header-container.open .ds-header-menu-button {
background: var(--ds-color-gray-700);
}
}
.ds-header-logo {
box-sizing: content-box;
display: flex;
align-items: center;
grid-column: 1 / 3;
padding: 16px 20px;
}
.ds-header-logo a {
display: flex;
}
.ds-header-menu-button {
display: grid;
place-items: center;
padding: 16px 20px;
grid-column: 3;
}
.ds-header-menu-button button {
display: grid;
place-items: center;
padding: 0;
margin: 0;
width: 40px;
height: 40px;
background: var(--ds-color-gray-600);
border: none;
border-radius: 20px;
color: white;
}
.ds-header-menu-button .ds-header-menu-close {
display: none;
}
.open .ds-header-menu-button .ds-header-menu-close {
display: block;
}
.open .ds-header-menu-button .ds-header-menu-open {
display: none;
}
.ds-header-actions {
display: flex;
flex-flow: column;
gap: 8px;
padding: 20px;
grid-column: 1 / 4;
background: var(--ds-color-gray-800);
}
.ds-header-list {
display: flex;
flex-flow: column;
grid-column: 1 / 4;
color: white;
border-top: 1px solid var(--ds-color-gray-600);
border-bottom: 1px solid var(--ds-color-gray-600);
margin-bottom: 16px;
background: var(--ds-color-gray-700);
}
.ds-header-list p {
padding: 24px 24px 0;
}
.ds-header-list a {
display: flex;
align-items: center;
gap: 18px;
position: relative;
margin-left: 24px;
padding: 18px 16px 18px 0;
border-bottom: 1px solid var(--ds-color-gray-600);
color: white;
font: var(--ds-font-label-l);
}
.ds-header-list a::after {
position: absolute;
top: 0;
right: 24px;
bottom: 0;
content: '';
display: block;
width: 24px;
background: center center no-repeat
url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.46967 3.96967C8.76256 3.67678 9.23744 3.67678 9.53033 3.96967L17.0303 11.4697C17.3232 11.7626 17.3232 12.2374 17.0303 12.5303L9.53033 20.0303C9.23744 20.3232 8.76256 20.3232 8.46967 20.0303C8.17678 19.7374 8.17678 19.2626 8.46967 18.9697L15.4393 12L8.46967 5.03033C8.17678 4.73744 8.17678 4.26256 8.46967 3.96967Z' fill='white'/%3E%3C/svg%3E%0A");
}
.ds-header-list a:last-of-type {
border-bottom: none;
}
.ds-header-list a:hover {
color: var(--ds-color-primary-500);
}
.ds-header-more-menu {
display: none;
}
.ds-header-list a.ds-header-whotracksme-search,
.ds-header-list gh-wtm-search-input {
display: none;
}
@media screen and (min-width: 768px) {
.ds-header,
.ds-header-container.open {
height: auto;
}
.ds-header {
position: static;
}
.ds-header-type-pages {
background: var(--ds-color-gray-700);
box-shadow: inset 0 48px 0px var(--ds-color-gray-800),
inset 0 49px 0px var(--ds-color-gray-600);
}
.ds-header-container {
position: static;
grid: min-content min-content / min-content 1fr max-content;
max-width: var(--ds-layout-container-max-width);
height: auto;
padding: 0px var(--ds-layout-padding);
margin: 0 auto;
gap: 8px;
background: none;
overflow: visible;
}
.ds-header-logo {
grid-area: 2 / 1 / 3 / 2;
background: none;
padding: 20px 4px 20px 0;
}
.ds-header-list {
flex-flow: row;
align-items: center;
gap: 14px 24px;
border: none;
padding: 0;
margin: 0;
background: none;
}
.ds-header-list a {
position: relative;
border: none;
padding: 0;
margin: 0;
font: var(--ds-font-label-s);
gap: 3px;
}
.ds-header-list a svg,
.ds-header-list a img {
width: 18px;
height: 18px;
}
.ds-header-list a::after {
display: none;
}
.ds-header-list .ds-header-list-item-mobile {
display: none;
}
.ds-header-menu-button {
display: none;
}
.ds-header-privacy-suite {
grid-area: 1 / 1 / 2 / 4;
flex-wrap: wrap;
padding: 16px 0 0;
}
.ds-header-privacy-suite p {
width: 100%;
padding: 0;
}
.ds-header-privacy-suite a {
position: relative;
z-index: 1;
}
.ds-header-privacy-suite a.active::before {
z-index: -1;
content: '';
display: block;
position: absolute;
top: -10px;
left: -12px;
right: -12px;
bottom: -9px;
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
border-bottom: none;
border-radius: 12px 12px 0 0;
}
.ds-header-other {
column-gap: 0px;
grid-area: 2 / 2 / 3 / 3;
}
.ds-header-other a {
padding: 10px 16px;
border-radius: 24px;
}
.ds-header-other a.active {
color: var(--ds-color-white);
background: var(--ds-color-gray-800);
}
.ds-header-actions {
grid-area: 2 / 3 / 3 / 4;
flex-flow: row-reverse;
align-items: center;
background: none;
padding: 0;
}
.ds-header-privacy-suite p {
display: none;
}
.ds-header-privacy-suite {
gap: 8px 24px;
}
.ds-header-privacy-suite a {
padding-bottom: 6px;
}
.ds-header-more-menu {
display: block;
position: relative;
}
.ds-header-more-menu input {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: none;
appearance: none;
margin: 0;
padding: 0;
border-radius: 8px;
cursor: pointer;
}
.ds-header-more-menu input:hover + label {
color: var(--ds-color-primary-500);
}
.ds-header-more-menu label {
text-transform: none;
max-width: 280px;
justify-content: flex-start;
font: var(--ds-font-label-m);
transition: color 0.2s ease-in-out;
}
.ds-header-more-menu label span {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-header-more-menu label svg {
flex-shrink: 0;
}
.ds-header-more-menu-dropdown {
display: none;
}
.ds-header-more-menu-dropdown > * {
display: flex;
align-items: center;
padding: 8px 16px;
gap: 8px;
}
.ds-header-more-menu-dropdown > div {
border-bottom: 1px solid var(--ds-color-gray-600);
}
.ds-header-more-menu-dropdown > a:hover {
color: var(--ds-color-primary-500);
}
.ds-header-more-menu input:checked ~ .ds-header-more-menu-dropdown {
z-index: 1000;
display: flex;
flex-flow: column;
position: absolute;
top: calc(100% + 8px);
right: 0;
border-radius: 8px;
border: 1px solid var(--ds-color-gray-600);
background: var(--ds-color-gray-700);
box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
}
.ds-header-whotracksme-menu-dropdown {
width: 180px;
}
.ds-header-list .ds-header-whotracksme-menu-dropdown > a {
border-radius: 0;
padding: 0;
margin: 12px 16px;
font: var(--ds-font-label-s);
}
.ds-header-list .ds-header-whotracksme-menu-dropdown > a svg {
width: 16px;
height: 16px;
margin-right: 4px;
}
.ds-header-whotracksme-menu-dropdown > div {
padding: 0;
margin: 0 16px;
}
.ds-header-user-menu-dropdown {
width: 360px;
}
.ds-header-more-menu input:checked ~ label svg:last-child {
transform: rotate(180deg);
}
.ds-header-list .ds-header-list-contributor-badge {
height: 34px;
width: 34px;
margin: -8px -12px -8px 2px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.ds-header-list .ds-shop-discount {
position: absolute;
top: -12px;
right: -16px;
}
}
@media screen and (min-width: 992px) {
.ds-header-container {
gap: 6px;
}
.ds-header-logo {
padding-right: 36px;
}
.ds-header-privacy-suite {
gap: 8px 40px;
}
.ds-header-privacy-suite a.active::before {
bottom: -7px;
left: -16px;
right: -16px;
}
.ds-header-list a {
font: var(--ds-font-label-m);
}
.ds-header-more-menu label {
max-width: 350px;
}
.ds-header-other {
column-gap: 8px;
}
.ds-header-list a.ds-header-whotracksme-search {
display: flex;
justify-content: center;
height: 38px;
width: 40px;
padding-left: 0;
padding-right: 0;
color: var(--ds-color-white);
font: var(--ds-font-body-m);
border: 2px solid var(--ds-color-gray-600);
margin: 0 24px 0 12px;
}
.ds-header-list a.ds-header-whotracksme-search span {
display: none;
}
.ds-header-list a.ds-header-whotracksme-search:hover {
color: var(--ds-color-primary-500);
border: 2px solid var(--ds-color-gray-500);
}
.ds-header-list gh-wtm-search-input input {
height: 38px;
color: var(--ds-color-white);
font: var(--ds-font-body-m);
flex: 1;
border-width: 2px;
}
.ds-header-list gh-wtm-search-input input:hover,
.ds-header-list gh-wtm-search-input input:focus {
box-shadow: none;
border: double 2px transparent;
background-image: linear-gradient(
var(--ds-color-gray-800),
var(--ds-color-gray-800)
),
var(--ds-color-gradient-wtm);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.ds-header-list gh-wtm-search-input input::-webkit-search-cancel-button {
right: -18px;
}
.ds-header-list a.ds-header-whotracksme-menu-search {
display: none;
}
}
@media screen and (min-width: 1280px) {
.ds-header-logo {
padding-right: 60px;
}
.ds-header-privacy-suite p {
display: block;
width: auto;
margin: 0;
padding-bottom: 6px;
}
.ds-header-more-menu label {
max-width: 400px;
}
.ds-header-list a.ds-header-whotracksme-search {
flex: 1;
color: var(--ds-color-gray-400);
width: auto;
}
.ds-header-list a.ds-header-whotracksme-search span {
display: inline;
}
.ds-header-list gh-wtm-search-input {
display: flex;
margin: 0 24px 0 12px;
}
}
.ds-footer {
position: relative;
overflow: hidden;
padding: 40px 16px;
}
.ds-footer-logo {
display: flex;
justify-content: center;
}
.ds-footer-container {
display: flex;
flex-flow: column;
gap: 40px;
width: 100%;
max-width: var(--ds-layout-container-max-width);
margin: 0 auto;
}
.ds-footer-socials {
display: flex;
justify-content: center;
gap: 16px;
}
.ds-footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
gap: 8px;
color: var(--ds-color-gray-300);
}
.ds-footer-nav-container {
display: grid;
grid: auto / repeat(2, 1fr);
gap: 24px;
}
.ds-footer-nav {
display: flex;
flex-flow: column;
align-items: start;
gap: 4px;
font: var(--ds-font-label-s);
}
.ds-footer-nav p {
text-transform: uppercase;
margin-bottom: 6px;
}
.ds-footer-nav a {
display: flex;
align-items: center;
height: 36px;
color: white;
gap: 4px;
white-space: nowrap;
}
.ds-footer-nav a:hover,
.ds-footer-socials a:hover {
color: var(--ds-color-primary-500);
}
.ds-footer-nav svg,
.ds-footer-nav img {
width: 16px;
height: 16px;
}
.ds-footer-notice {
display: flex;
flex-flow: column;
align-items: center;
gap: 24px 40px;
padding-top: 40px;
margin: 0 -16px;
font: var(--ds-font-label-xs);
border-top: 1px solid var(--ds-color-gray-700);
}
.ds-footer-copyrights {
display: flex;
align-items: center;
column-gap: 8px;
}
.ds-footer-copyrights svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.ds-footer-copyrights p {
margin: 0;
}
.ds-footer-nav-bottom {
display: flex;
justify-content: center;
gap: 16px;
}
.ds-footer-nav-bottom a {
display: flex;
align-items: center;
height: 40px;
color: var(--ds-color-gray-400);
}
.ds-footer-nav-bottom a:hover {
color: var(--ds-color-white);
}
.ds-footer-nav .ds-footer-status {
display: flex;
gap: 8px;
}
.ds-footer-nav .ds-footer-status-icon {
width: 8px;
height: 8px;
border-radius: 6px;
background: var(--ds-color-error-500);
}
.ds-footer-summary {
padding-top: 0;
border-top: 1px solid var(--ds-color-gray-600);
}
.ds-footer-summary .ds-footer-notice {
border-top: none;
}
.ds-footer-badge {
color: var(--ds-color-white);
padding: 2px 4px;
font: var(--ds-font-label-xs);
display: flex;
align-items: center;
gap: 8px;
border-radius: 4px;
background: var(--ds-color-success-500);
}
@media screen and (min-width: 768px) {
.ds-footer {
padding: 40px;
}
.ds-footer-summary {
padding-top: 0;
}
.ds-footer-logo {
justify-content: start;
}
.ds-footer-notice {
flex-flow: row wrap;
margin: 0 -40px;
padding: 40px 40px 0;
}
.ds-footer-socials {
margin-left: -8px;
}
}
@media screen and (min-width: 992px) {
.ds-footer {
padding: 40px 40px 24px;
}
.ds-footer-summary {
padding-top: 0;
}
.ds-footer-nav-container {
grid: repeat(2, max-content) / repeat(3, 1fr);
grid-auto-flow: column;
}
.ds-footer-nav a {
height: 24px;
}
.ds-footer-notice {
padding-top: 24px;
justify-content: space-between;
}
.ds-footer-socials {
margin-left: 0px;
gap: 4px;
}
}
@media screen and (min-width: 1280px) {
.ds-footer-container {
display: grid;
grid: auto / 1fr 4fr;
}
.ds-footer-nav-container {
gap: 40px;
}
.ds-footer-notice {
font: var(--ds-font-body-s);
grid-column: span 2;
border-top: none;
}
.ds-footer-notice::before {
position: absolute;
left: 0;
right: 0;
content: '';
display: block;
height: 1px;
margin-top: -90px;
background: var(--ds-color-gray-700);
}
.ds-footer-socials a {
width: 40px;
height: 40px;
}
}
.ds-menu {
position: relative;
background: var(--ds-color-gray-800);
}
.ds-menu::after {
content: '';
position: absolute;
top: 2px;
right: 0;
bottom: 0;
width: 40px;
background: linear-gradient(270deg, #2f3136 0%, rgba(47, 49, 54, 0) 100%);
pointer-events: none;
}
.ds-menu-container {
display: flex;
flex-flow: row;
overflow-x: auto;
gap: 12px;
padding: 16px var(--ds-layout-padding);
background: var(--ds-color-gray-700);
border-top: 2px solid var(--ds-color-gray-800);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
margin: 0 auto;
}
.ds-menu-container::-webkit-scrollbar {
display: none;
}
.ds-menu-container a {
white-space: nowrap;
padding: 8px;
color: var(--ds-color-gray-300);
}
.ds-menu-container a.active {
color: var(--ds-color-white);
border-bottom: 2px solid var(--ds-color-primary-500);
}
@media screen and (min-width: 768px) {
.ds-menu {
padding: var(--ds-layout-padding);
}
.ds-menu::after {
display: none;
}
.ds-menu-container {
border-radius: 16px;
justify-content: center;
gap: 16px;
max-width: calc(
var(--ds-layout-container-max-width) - var(--ds-layout-padding) * 2
);
}
.ds-menu-container a {
padding: 16px;
}
}
.ds-notification {
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.ds-notification > p {
flex: 1;
}
.ds-notification > a,
.ds-notification > button {
width: auto;
}
.ds-notification > img {
display: none;
}
.ds-notification > button {
cursor: pointer;
width: 40px;
height: 40px;
border-color: var(--ds-color-gray-300);
}
.ds-notification > button:hover {
background: transparent;
border-color: var(--ds-color-gray-400);
}
.ds-notification > button svg {
width: 16px;
height: 16px;
}
@media screen and (min-width: 768px) {
.ds-notification > img {
display: block;
}
}
@media screen and (min-width: 992px) {
.ds-notification > p {
font: var(--ds-font-display-xs);
}
}
.ds-notification-donate-container {
padding: 8px;
}
.ds-notification-donate {
display: flex;
flex-flow: column;
align-items: start;
gap: 12px;
padding: 8px;
border-radius: 8px;
background: var(--ds-color-gray-600, #3f4146);
}
.ds-notification-donate-icon {
display: none;
}
.ds-notification-donate-text {
flex: 1 1;
}
.ds-notification-donate-icon svg path {
fill: var(--ds-color-wtm-700);
}
.ds-notification-donate.light {
background: #dbd5ff;
color: #412dbf;
}
.ds-notification-donate.success {
background: #d8ffd5;
color: #0c5007;
}
.ds-notification-donate.success .ds-notification-donate-icon {
background: var(--ds-color-success-400);
}
.ds-notification-donate.success .ds-notification-donate-icon svg path {
fill: #13770c;
}
.ds-notification-donate.danger {
background: #ffd5dc;
color: #500713;
}
.ds-notification-donate.danger .ds-notification-donate-icon {
background: #ff96a8;
}
.ds-notification-donate.danger .ds-notification-donate-icon svg path {
fill: #e01a3b;
}
.ds-notification-donate.warning {
background: #fff4d5;
color: #713800;
}
.ds-notification-donate.warning .ds-notification-donate-icon {
background: #ffe396;
}
.ds-notification-donate.warning .ds-notification-donate-icon svg path {
fill: #e88700;
}
@media screen and (min-width: 768px) {
.ds-notification-donate-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 24px;
background: var(--ds-color-wtm-400, #9280ff);
}
.ds-notification-donate {
display: grid;
grid-template-columns: max-content 1fr max-content;
}
}
/* From */
.ds-newsletter-form {
min-height: 200px;
}
@media screen and (min-width: 768px) {
.ds-newsletter-form {
max-width: 540px;
}
}
.ds-newsletter-form-label {
display: grid;
grid: 1fr / min-content 1fr;
grid-gap: var(--ds-layout-spacing-s) var(--ds-layout-spacing-m);
}
.ds-newsletter-form-label input {
margin-top: 2px;
}
.ds-newsletter-form-label .ds-form-error-msg {
grid-column: 1 / span 2;
}
.ds-newsletter-form-label .ds-form-error-msg:empty {
display: block;
}
.ds-newsletter-form-label .ds-form-error-msg:empty:before {
display: inline-block;
content: ' ';
min-height: 1em;
}
.ds-newsletter-form-email {
position: relative;
width: 100%;
}
@media screen and (min-width: 768px) {
.ds-newsletter-form-email {
max-width: 380px;
}
}
.ds-newsletter-form-textfield {
color: var(--ds-color-newsletter-500);
width: 100%;
padding: 11px 146px 11px 20px;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border: double 1px transparent;
border-radius: 32px;
background-image:
linear-gradient(var(--ds-color-gray-800), var(--ds-color-gray-800)),
var(--ds-color-gradient-newsletter);
background-origin: border-box;
background-clip: padding-box, border-box;
}
@media screen and (min-width: 768px) {
.ds-newsletter-form-email {
max-width: 420px;
}
.ds-newsletter-form-textfield {
padding: 17px 146px 17px 24px;
}
}
.ds-newsletter-form-textfield::placeholder {
background: var(--ds-color-gradient-newsletter);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
opacity: 1;
}
.ds-newsletter-form-email button {
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
padding: 0 16px;
}
@media screen and (min-width: 768px) {
.ds-newsletter-form-email button {
padding: 0 24px;
}
}
/* cards */
.ds-newsletter-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-gap: var(--ds-layout-spacing-3xl) var(--ds-layout-spacing-2xl);
margin: 40px 0px var(--ds-layout-spacing-4xl);
}
.ds-newsletter-card {
display: grid;
grid-auto-rows: max-content;
grid-gap: 8px;
text-decoration: none;
}
@media screen and (min-width: 768px) {
.ds-newsletter-card {
grid-gap: 16px;
}
}
.ds-newsletter-card:hover .ds-newsletter-card-headline {
color: var(--ds-color-primary-500);
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.ds-newsletter-cards.ds-newsletter-cards-hidden
.ds-newsletter-card:last-child {
display: none;
}
}
.ds-newsletter-card-bar {
height: 8px;
border-radius: 8px;
}
.ds-newsletter-card-img {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
padding-top: 66%;
background: var(--ds-color-gray-800);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ds-newsletter-card-img::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--ds-color-primary-500);
opacity: 0;
pointer-events: none;
transition: 0.2s ease opacity;
}
.ds-newsletter-card-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.2s ease transform;
}
.ds-newsletter-card:hover .ds-newsletter-card-img img {
transform: scale(1.05);
}
.ds-newsletter-card:hover .ds-newsletter-card-img::after {
opacity: 0.1;
}
.ds-newsletter-card-info {
display: grid;
grid-gap: 8px;
}
.ds-newsletter-card-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.ds-newsletter-card-tags {
font: var(--ds-font-body-2xl);
line-height: 30px;
max-height: 66px;
overflow: hidden;
}
.ds-newsletter-card-full .ds-newsletter-card-desc {
display: block;
}
.ds-newsletter-card-full .ds-newsletter-card-tags {
max-height: none;
overflow: visible;
}
.ds-newsletter-card-full .ds-newsletter-card-img {
padding-top: 56.25%;
}
.ds-newsletter-card-full .ds-newsletter-card-bar {
height: 100%;
grid-row: span 2;
}
.ds-newsletter-card-full:has(.ds-newsletter-card-bar) {
grid: auto / 8px auto;
}
/* Editions */
.ds-newsletter-editions {
padding-top: var(--ds-layout-spacing-xl);
margin-top: calc(var(--ds-layout-spacing-xl) * -1);
}
.ds-newsletter-edition {
max-width: 616px;
margin-top: -46px;
padding-left: 44px;
padding-right: 44px;
}
html:has(.ds-newsletter-edition) {
scroll-behavior: smooth;
}
.ds-newsletter-subscribe-cta {
display: flex;
align-items: center;
gap: 24px;
padding: 20px;
background: var(--ds-color-gray-800);
border-radius: 16px;
}
.ds-newsletter-subscribe-cta img {
width: 96px;
height: 96px;
flex-shrink: 0;
}
.ds-newsletter-subscribe-cta p {
margin: 0;
}
.ds-newsletter-subscribe-cta p + p {
margin: 4px 0 20px;
}
.ds-newsletter-edition-img {
display: block;
overflow: hidden;
margin-left: -24px;
margin-right: -24px;
max-width: none;
width: calc(100% + 48px);
border-radius: 16px;
background: var(--ds-color-gray-800);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* Success */
@media screen and (max-width: 767px) {
.ds-newsletter-success-cta {
display: flex;
flex-flow: column-reverse;
align-items: center;
padding-top: var(--ds-layout-spacing-l);
}
.ds-newsletter-success-cta img {
max-width: 220px;
}
}
.ds-extension-subtitle > * {
margin: 0;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
.ds-extension-features-content h4 {
font: var(--ds-font-headline-s);
margin: var(--ds-layout-spacing-s) 0;
}
.ds-extension-features-content p {
font: var(--ds-font-body-l);
margin: 0 0 var(--ds-layout-spacing-l);
color: var(--ds-color-gray-300);
}
.ds-extension-mentions {
display: grid;
grid: auto-flow / repeat(auto-fit, minmax(135px, 1fr));
grid-auto-flow: row;
grid-auto-rows: 80px;
gap: var(--ds-layout-spacing-m);
}
.ds-extension-mentions > * {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--ds-color-white);
border-radius: 8px;
padding: var(--ds-layout-spacing-s);
}
.ds-extension-mentions svg {
max-width: 100%;
}
@media screen and (max-width: 767px) {
.ds-extension-footer-cta .ds-section-cta-img > *:first-child {
margin-left: -31%;
}
}
.ds-extension-video-cta {
position: absolute;
bottom: 2%;
left: 8%;
padding-top: 8px;
padding-bottom: 8px;
}
@media screen and (min-width: 768px) {
.ds-extension-video-cta {
bottom: 0px;
left: 20%;
}
}
@media screen and (min-width: 992px) {
.ds-extension-title {
max-width: 580px;
}
.ds-section-cta-docs .ds-extension-title {
max-width: 680px;
}
.ds-extension-subtitle {
max-width: 590px;
}
.ds-extension-video-cta {
bottom: 14px;
left: 32%;
}
}
@media screen and (min-width: 1280px) {
.ds-extension-video-cta {
left: 50%;
}
}
.ds-extension-video {
z-index: 1000;
position: relative;
}
.ds-extension-video video {
display: block;
max-width: 800px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
transform: translateY(-35%);
}
.ds-extension-press-logos {
padding: 24px 0;
}
@media screen and (min-width: 768px) {
.ds-extension-video {
margin-bottom: -15%;
}
.ds-extension-video video {
transform: translateY(-60%);
}
}
@media screen and (min-width: 1024px) {
.ds-extension-video {
margin-bottom: -15%;
}
}
@media screen and (min-width: 1280px) {
.ds-extension-video {
margin-bottom: -12%;
}
.ds-extension-video video {
transform: translateY(-60%);
}
}
.ds-extension-android-cta {
display: flex;
gap: var(--ds-layout-spacing-l);
flex-wrap: wrap;
margin-top: var(--ds-layout-spacing-2xl);
}
.ds-extension-android-cta.standalone {
justify-content: center;
column-gap: var(--ds-layout-spacing-4xl);
}
#lottie-zap-animation {
position: relative;
display: flex;
border-radius: 20px;
overflow: hidden;
margin-right: 0px;
}
.ds-zap-animation-bg {
display: none;
content: '';
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 550px;
height: 550px;
border-radius: 100%;
background: var(--ds-color-gray-800);
}
@media screen and (min-width: 768px) {
#lottie-zap-animation {
margin-right: -180px;
}
.ds-zap-animation-bg {
display: block;
left: calc(50% + 90px);
}
}
@media screen and (min-width: 992px) {
#lottie-zap-animation {
margin-right: -80px;
}
.ds-zap-animation-bg {
left: calc(50% + 40px);
}
}
.ds-zap-steps {
position: relative;
z-index: 1;
margin-top: -140px;
}
.ds-zap-steps > div > div {
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-zap-steps-divider {
border: none;
display: flex;
width: 32px;
height: 32px;
padding: 8px;
justify-content: center;
align-items: center;
align-self: center;
}
.ds-zap-steps-divider svg {
min-width: 16px;
min-height: 16px;
max-width: 16px;
max-height: 16px;
transform: rotate(90deg);
}
@media screen and (min-width: 768px) {
.ds-zap-steps {
margin-top: -220px;
display: grid;
grid-template-columns: 1fr min-content 1fr min-content 1fr;
align-items: stretch;
gap: 8px;
}
.ds-zap-steps > div {
display: flex;
flex-direction: column;
text-align: center;
}
.ds-zap-steps-divider svg {
transform: rotate(0deg);
}
}
.ds-zap-platforms-divider {
display: none;
position: relative;
justify-content: center;
align-items: center;
}
.ds-zap-platforms-divider > p {
position: absolute;
z-index: 1;
background: var(--ds-color-wtm-700);
padding: 16px 24px;
border-radius: 100px;
}
@media screen and (min-width: 768px) {
.ds-zap-platforms-divider {
display: flex;
}
.ds-zap-platforms-divider > p {
margin-top: -16px;
}
.ds-zap-platforms-divider > svg {
max-width: 80%;
}
}
@media screen and (min-width: 992px) {
.ds-zap-platforms-divider > p {
margin-top: -24px;
}
}
@media screen and (min-width: 1280px) {
.ds-zap-platforms-divider > svg {
max-width: 100%;
}
}
.ds-zap-target {
text-align: center;
gap: 8px;
}
.ds-zap-target > div {
padding-left: 16px;
padding-right: 16px;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-600);
background: var(--ds-color-gray-800);
box-shadow: 30px 60px 80px 0 rgba(0, 0, 0, 0.15);
}
.ds-support-faq {
padding: 40px 0;
}
.ds-support-faq h1 {
margin-bottom: 40px;
}
.ds-support-faq-section + .ds-support-faq-section {
margin-top: 40px;
}
.ds-support-faq-section h2 {
margin-bottom: 32px;
}
.ds-support-faq-section:last-of-type .ds-support-faq-answer:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ds-support-faq-answer {
border-bottom: 1px solid var(--ds-color-gray-600);
padding-bottom: 24px;
margin-bottom: 24px;
margin-top: 8px;
}
.ds-faq .ds-support-faq-answer:last-of-type {
border-bottom: 0px;
}
.ds-support-faq-answer br {
display: none;
}
.ds-support-faq-answer li,
.ds-support-faq-answer p {
font: var(--ds-font-body-l);
}
.ds-support-faq-answer ul,
.ds-support-faq-answer ol {
padding-left: 24px;
}
.ds-support-faq-answer p,
.ds-support-faq-answer ul,
.ds-support-faq-answer ol,
.ds-support-faq-answer li {
margin-bottom: 1em;
}
.ds-support-faq-answer p:last-child,
.ds-support-faq-answer ul:last-child,
.ds-support-faq-answer ol:last-child,
.ds-support-faq-answer li:last-child {
margin-bottom: 0;
}
.ds-support-faq-answer a {
color: white;
text-decoration: underline;
}
.ds-support-faq-help {
margin: 0 0 40px;
}
@media screen and (min-width: 768px) {
.ds-support-faq {
padding: 64px 0;
}
.ds-support-faq-section h2 {
margin-bottom: 40px;
}
.ds-support-faq-help {
margin: 0 0 64px;
}
}
@media screen and (min-width: 992px) {
.ds-support-faq {
padding: 80px 0;
}
.ds-support-faq-help {
margin: 0 0 80px;
}
}
.ds-static {
margin-bottom: 50px;
max-width: 660px;
}
.ds-static h1,
.ds-static h2,
.ds-static h3,
.ds-static h4 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
color: var(--ds-color-white);
}
.ds-static h1 {
font: var(--ds-font-headline-xl);
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 50px;
}
.ds-static h2 {
font: var(--ds-font-headline-l);
text-align: left;
}
.ds-static h3 {
font: var(--ds-font-headline-m);
text-align: left;
}
.ds-static h4 {
font: var(--ds-font-headline-s);
text-align: left;
}
.ds-static p {
font: var(--ds-font-body-l);
color: var(--ds-color-gray-300);
text-align: left;
}
.ds-static a > span {
font: var(--ds-font-body-l);
}
.ds-static strong {
color: var(--ds-color-gray-200);
}
.ds-static em {
color: var(--ds-color-gray-300);
}
.ds-static ul {
text-align: left;
padding-left: 2em;
}
.ds-static li {
font: var(--ds-font-body-l);
}
.ds-static table {
width: 100%;
text-align: left;
}
.ds-static table tr {
border-top: 1px solid var(--ds-color-gray-800);
}
.ds-static table td,
.ds-static table th {
padding: 6px 13px;
border: 1px solid var(--ds-color-gray-800);
}
.ds-static pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: var(--ds-color-gray-800);
border-radius: 3px;
text-align: left;
}
.ds-static pre code {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
word-break: normal;
white-space: pre;
}
.ds-static pre code::after,
.ds-static pre code::before {
content: normal;
letter-spacing: -0.2em;
}
/* Privacy Policy */
.ds-static-policy {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
}
.ds-static-policy h1 {
font: var(--ds-font-display-xl);
background: linear-gradient(129deg, #129bf2 6.95%, #f77d7a 84.11%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 24px;
}
.ds-static-policy div#doc h1 {
display: none;
}
.ds-static-policy h1 + p {
font: var(--ds-font-body-xl);
color: #f2f4f7;
text-align: center;
margin: 24px 0 80px;
}
.ds-search-header {
position: relative;
display: flex;
justify-content: center;
min-height: calc(100vh - 72px);
min-height: calc(100svh - 72px);
padding: 0 var(--ds-layout-padding) 72px;
}
.ds-search-header .ds-section-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.ds-search-header-content {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 24px;
margin: 0 auto;
width: 100%;
}
.ds-search-header-content svg {
max-width: calc(100% - 36px);
}
.ds-search-header-input {
position: relative;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
height: 48px;
width: 100%;
padding: 12px;
text-align: center;
background: var(--ds-color-gray-800);
border: 2px solid var(--ds-color-gray-600);
border-radius: 8px;
}
.ds-search-header-input:hover {
background:
linear-gradient(var(--ds-color-gray-800), var(--ds-color-gray-800))
padding-box,
linear-gradient(to bottom right, #67a73a, #00aef0) border-box;
border: 2px solid transparent;
}
.ds-search-header-input span {
display: block;
background: linear-gradient(141.55deg, #67a73a 15.08%, #00aef0 75.66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.ds-search-header-input svg {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
.ds-search-card-section {
display: flex;
flex-flow: column;
align-items: center;
gap: 8px;
margin-top: 160px;
padding: 40px 20px;
border-radius: 16px;
}
.ds-search-card-section p a {
color: var(--ds-color-white);
text-decoration: underline;
}
.ds-search-card-section > svg {
margin-top: -150px;
}
.ds-search-card-section > * {
max-width: 800px;
}
.ds-search-footer {
border-top: 1px solid var(--ds-color-gray-800);
padding: 120px var(--ds-layout-padding);
}
@media screen and (min-width: 768px) {
.ds-search-header {
min-height: calc(100vh - 120px);
min-height: calc(100svh - 120px);
padding-bottom: 120px;
}
.ds-search-header-content {
max-width: 640px;
}
.ds-search-footer {
padding: 120px 0;
}
}
@media screen and (min-width: 992px) {
.ds-search-card-section {
margin-top: 200px;
}
.ds-search-footer {
padding-top: 164px;
padding-bottom: 164px;
}
}
.ds-search-section-dense {
padding-top: 80px;
padding-bottom: 20px;
}
p.ds-enterprise-get-a-quote {
display: flex;
flex-flow: column;
max-width: 100%;
gap: 12px;
}
.ds-enterprise-copy-email-address {
width: 240px;
flex-flow: row wrap;
gap: 0 8px;
justify-content: start;
cursor: pointer;
position: relative;
font: var(--ds-font-body-m);
text-transform: none;
}
.ds-enterprise-copy-email-address:hover,
.ds-enterprise-copy-email-address:focus,
.ds-enterprise-copy-email-address:active {
color: var(--ds-color-primary-500);
background: none;
}
.ds-enterprise-copy-email-address.copied::after {
box-sizing: border-box;
content: attr(data-copied);
position: absolute;
left: 0;
right: 0;
bottom: 100%;
font: var(--ds-font-body-m);
color: var(--ds-color-white);
background: var(--ds-color-gray-600);
padding: 16px;
border-radius: 8px;
text-wrap: balance;
}
.info-badge {
display: inline-flex;
justify-content: flex-start;
align-items: center;
background: var(--ds-color-gray-800);
color: var(--ds-color-gray-300);
font: var(--ds-font-body-m);
border-radius: 8px;
padding: 8px 16px;
margin-top: 8px;
flex-basis: auto;
}
.info-badge--light {
background: var(--ds-color-gray-700);
}
.info-badge .info-ico {
width:16px;
height:16px;
margin-right: 8px;
}
.ds-enterprise-features {
position: relative;
z-index: 2;
margin-top: -200px;
}
.ds-enterprise-browser-logos svg {
width: 48px;
height: 48px;
margin: 0 var(--ds-layout-spacing-xs);
}
.ds-enterprise-bullet {
display: grid;
grid-template-columns: 64px 1fr;
gap: 0 16px;
margin-bottom: 24px;
}
.ds-enterprise-product {
align-items: start;
}
.ds-enterprise-bullet svg {
grid-row: span 2;
}
.ds-enterprise-bullet a {
font-weight: 500;
}
.ds-enterprise-slider-images {
display: none;
}
.ds-enterprise-slider-desc {
display: flex;
flex-flow: column nowrap;
gap: 40px;
}
.ds-enterprise-slider-desc > div {
display: grid;
grid: auto / max-content 1fr;
grid-gap: 8px 20px;
}
.ds-enterprise-slider-icon {
display: block;
align-self: start;
grid-row: span 2;
color: var(--ds-color-gray-400);
background: var(--ds-color-gray-800);
padding: 16px;
border-radius: 36px;
}
.ds-enterprise-slider-icon svg {
display: block;
width: 40px;
height: 40px;
}
.ds-enterprise-form-fields {
display: flex;
flex-flow: row wrap;
gap: 24px 16px;
}
.ds-enterprise-form-fields > div {
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.ds-enterprise-form-fields > p {
width: 100%;
}
.ds-enterprise-form-name {
max-width: 440px;
flex: 1;
}
.ds-enterprise-form.success,
.ds-enterprise-form + .ds-enterprise-form-success {
display: none;
}
.ds-enterprise-form.success + .ds-enterprise-form-success {
display: block;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.ds-enterprise-features {
flex-flow: row wrap;
}
.ds-enterprise-features > div {
max-width: 50%;
flex: 1 1 30%;
flex-flow: column;
text-align: center;
}
.ds-enterprise-features > div:first-child {
min-width: 50%;
}
}
@media screen and (min-width: 768px) {
p.ds-enterprise-get-a-quote {
flex-flow: row;
align-items: center;
max-width: max-content;
flex-wrap: wrap;
}
.ds-enterprise-features {
margin-top: -210px;
}
.ds-enterprise-slider-images {
display: block;
position: relative;
aspect-ratio: 2/1;
margin-bottom: 64px;
}
@keyframes ds-enterprise-slider-fade-in-fade-out {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
28% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.ds-enterprise-slider-images img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
object-fit: contain;
animation: ds-enterprise-slider-fade-in-fade-out 18s infinite;
}
.ds-enterprise-slider-images img:nth-child(1) {
animation-delay: 0s;
}
.ds-enterprise-slider-images img:nth-child(2) {
animation-delay: 6s;
}
.ds-enterprise-slider-images img:nth-child(3) {
animation-delay: 12s;
}
.ds-enterprise-slider-desc {
display: flex;
flex-flow: row;
gap: 32px;
}
.ds-enterprise-slider-desc > div {
position: relative;
flex: 1;
display: flex;
flex-flow: column;
gap: 12px;
}
.ds-enterprise-slider-desc > div::before {
content: '';
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 2px;
background: var(--ds-color-gray-800);
border-radius: 2px;
}
@keyframes enterprise-slider-width {
0% {
opacity: 1;
width: 0;
}
30% {
opacity: 1;
width: 100%;
}
35% {
width: 100%;
opacity: 0;
}
100% {
width: 100%;
opacity: 0;
}
}
.ds-enterprise-slider-desc > div::after {
content: '';
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 2px;
background: var(--ds-color-primary-500);
border-radius: 2px;
width: 0px;
animation: enterprise-slider-width 18s infinite both;
}
.ds-enterprise-slider-desc > div:nth-child(1)::after {
animation-delay: 0s;
}
.ds-enterprise-slider-desc > div:nth-child(2)::after {
animation-delay: 6s;
}
.ds-enterprise-slider-desc > div:nth-child(3)::after {
animation-delay: 12s;
}
@keyframes enterprise-slider-background {
0% {
background: var(--ds-color-gray-800);
}
5% {
background: var(--ds-color-primary-500);
color: white;
}
28% {
background: var(--ds-color-primary-500);
color: white;
}
33% {
background: var(--ds-color-gray-800);
color: var(--ds-color-gray-400);
}
}
.ds-enterprise-slider-icon {
margin-bottom: 8px;
animation: enterprise-slider-background 18s infinite both;
}
.ds-enterprise-slider-desc > div:nth-child(1) .ds-enterprise-slider-icon {
animation-delay: 0s;
}
.ds-enterprise-slider-desc > div:nth-child(2) .ds-enterprise-slider-icon {
animation-delay: 6s;
}
.ds-enterprise-slider-desc > div:nth-child(3) .ds-enterprise-slider-icon {
animation-delay: 12s;
}
}
@media screen and (min-width: 992px) {
.ds-enterprise-features {
margin-left: -20px;
margin-right: -20px;
grid: auto / repeat(5, 1fr);
}
.ds-enterprise-features > div {
text-align: center;
}
.ds-enterprise-features > div svg {
min-width: 128px;
min-height: 128px;
max-width: 128px;
max-height: 128px;
}
}
@media screen and (min-width: 1280px) {
.ds-enterprise-features {
margin-left: 0;
margin-right: 0;
}
.ds-enterprise-features > div svg {
min-width: 160px;
min-height: 160px;
max-width: 160px;
max-height: 160px;
}
}
/* Documentation Styles */
.ds-docs-layout {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
max-width: 1240px;
margin: 0 auto;
padding: 32px var(--ds-layout-padding);
}
@media screen and (min-width: 992px) {
.ds-docs-layout {
grid-template-columns: 240px 1fr;
gap: 64px;
padding: 64px var(--ds-layout-padding);
}
}
@media screen and (min-width: 1280px) {
.ds-docs-layout {
gap: 80px;
}
}
.ds-docs-nav {
display: none;
}
@media screen and (min-width: 992px) {
.ds-docs-nav {
display: block;
position: sticky;
top: 100px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: 16px;
margin-right: -16px;
scrollbar-width: thin;
scrollbar-color: var(--ds-color-gray-600) transparent;
}
.ds-docs-nav::-webkit-scrollbar {
width: 4px;
}
.ds-docs-nav::-webkit-scrollbar-track {
background: transparent;
}
.ds-docs-nav::-webkit-scrollbar-thumb {
background: var(--ds-color-gray-600);
border-radius: 2px;
}
}
.ds-docs-nav-section {
margin-bottom: 28px;
}
.ds-docs-nav-section:last-child {
margin-bottom: 0;
}
.ds-docs-nav-title {
display: block;
font: var(--ds-font-display-2xs);
color: var(--ds-color-gray-500);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 12px;
padding-left: 26px;
}
.ds-docs-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.ds-docs-nav li {
margin-bottom: 2px;
}
.ds-docs-nav-link {
display: block;
padding: 10px 12px 10px 24px;
font: var(--ds-font-body-m);
color: var(--ds-color-gray-300);
text-decoration: none;
border-radius: 8px;
transition: background 0.15s, color 0.15s, transform 0.15s;
border-left: 2px solid transparent;
}
.ds-docs-nav-link:hover {
background: var(--ds-color-gray-700);
color: var(--ds-color-white);
}
.ds-docs-nav-link:focus-visible {
outline: none;
background: var(--ds-color-gray-700);
box-shadow: 0 0 0 2px var(--ds-color-primary-500);
}
.ds-docs-nav-link-active {
background: var(--ds-color-gray-700);
color: var(--ds-color-white);
position: relative;
}
.ds-docs-nav-link-active::before {
content: "";
position: absolute;
left: 8px;
top: 8px;
bottom: 8px;
width: 4px;
border-radius: 6px;
background: var(--ds-color-gray-400);
}
.ds-docs-content {
min-width: 0;
}
.ds-docs-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--ds-color-gray-700);
}
.ds-docs-breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 16px 0;
padding: 0;
gap: 8px;
}
.ds-docs-breadcrumb li {
display: flex;
align-items: center;
font: var(--ds-font-body-s);
color: var(--ds-color-gray-500);
}
.ds-docs-breadcrumb li:not(:last-child)::after {
content: '›';
margin-left: 8px;
color: var(--ds-color-gray-600);
font-size: 14px;
}
.ds-docs-breadcrumb a {
color: var(--ds-color-gray-400);
text-decoration: none;
transition: color 0.15s;
}
.ds-docs-breadcrumb a:hover {
color: var(--ds-color-primary-500);
}
.ds-docs-breadcrumb a:focus-visible {
outline: none;
color: var(--ds-color-primary-500);
text-decoration: underline;
}
.ds-docs-subtitle {
font: var(--ds-font-label-s);
color: var(--ds-color-primary-500);
margin: 0 0 8px 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.ds-docs-header h1 {
font: var(--ds-font-display-s);
color: var(--ds-color-white);
margin: 0;
background: linear-gradient(90deg, #129BF2 0%, #A276FF 50%);
background-size: 500px 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media screen and (min-width: 768px) {
.ds-docs-header h1 {
font: var(--ds-font-display-m);
}
}
.ds-docs-content h2 {
font: var(--ds-font-headline-l);
color: var(--ds-color-white);
margin: 56px 0 20px 0;
padding-top: 24px;
}
.ds-docs-content h2:first-of-type,
.ds-docs-header + h2,
.ds-docs-header + p + h2 {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.ds-docs-content > h3 {
font: var(--ds-font-headline-xs);
color: var(--ds-color-white);
margin: 40px 0 16px 0;
}
.ds-docs-content h4 {
font: var(--ds-font-label-l);
color: var(--ds-color-white);
margin: 28px 0 12px 0;
}
.ds-docs-hero {
position: relative;
background: var(--ds-color-gray-900);
border-bottom: 1px solid var(--ds-color-gray-700);
padding: 48px var(--ds-layout-padding);
margin-bottom: 0;
overflow: hidden;
}
.ds-docs-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 30% 0%, rgba(18, 155, 242, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 70% 100%, rgba(162, 118, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.ds-docs-hero-content {
position: relative;
max-width: 1240px;
margin: 0 auto;
}
.ds-docs-hero h1 {
font: var(--ds-font-display-m);
margin: 0 0 16px 0;
background: var(--ds-color-gradient-enterprise);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media screen and (min-width: 768px) {
.ds-docs-hero {
padding: 80px var(--ds-layout-padding);
}
.ds-docs-hero h1 {
font: var(--ds-font-display-l);
}
}
.ds-docs-hero p {
font: var(--ds-font-body-xl);
color: var(--ds-color-gray-300);
margin: 0;
max-width: 640px;
}
.ds-docs-content p {
font: var(--ds-font-body-s);
color: var(--ds-color-gray-200);
margin: 0 0 16px 0;
}
.ds-docs-content .ds-banner p {
margin: 0;
}
.ds-docs-content ul,
.ds-docs-content ol {
margin: 0 0 16px 0;
padding-left: 24px;
}
.ds-docs-content li {
font: var(--ds-font-body-l);
color: var(--ds-color-gray-300);
margin-bottom: 8px;
line-height: 1.6;
}
.ds-docs-content code {
font-family: 'Roboto Mono', 'SF Mono', 'Monaco', monospace;
font-size: 0.875em;
background: var(--ds-color-gray-700);
padding: 3px 8px;
border-radius: 6px;
color: var(--ds-color-white);
border: 1px solid var(--ds-color-gray-700);
}
.ds-docs-content pre {
position: relative;
background: var(--ds-color-gray-900);
border: 1px solid var(--ds-color-gray-700);
border-radius: 12px;
padding: 24px;
margin: 0 0 28px 0;
overflow-x: auto;
}
.ds-docs-content pre code {
background: none;
padding: 0;
font-size: 14px;
line-height: 1.7;
color: var(--ds-color-gray-200);
border: none;
}
.ds-docs-table-wrapper {
overflow-x: auto;
margin: 0 0 28px 0;
border-radius: 12px;
border: 1px solid var(--ds-color-gray-700);
}
.ds-docs-table {
width: 100%;
border-collapse: collapse;
font: var(--ds-font-label-s);
}
.ds-docs-table th,
.ds-docs-table td {
text-align: left;
border-bottom: 1px solid var(--ds-color-gray-700);
}
.ds-docs-table tr:last-child td {
border-bottom: none;
}
.ds-docs-table th {
font: var(--ds-font-label-m);
color: var(--ds-color-gray-300);
background: var(--ds-color-gray-800);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 14px 20px;
}
.ds-docs-table th:first-child {
border-radius: 11px 0 0 0;
}
.ds-docs-table th:last-child {
border-radius: 0 11px 0 0;
}
.ds-docs-table td {
color: var(--ds-color-gray-300);
background: var(--ds-color-gray-800);
padding: 24px 20px;
}
.ds-docs-table tr:hover td {
background: var(--ds-color-gray-700);
}
.ds-docs-table td code {
font-size: 13px;
background: var(--ds-color-gray-700);
border-color: var(--ds-color-gray-700);
}
.ds-docs-table a {
color: var(--ds-color-primary-500);
text-decoration: none;
}
.ds-docs-table a:hover {
text-decoration: underline;
}
.ds-docs-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 32px 0;
}
@media screen and (min-width: 768px) {
.ds-docs-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media screen and (min-width: 992px) {
.ds-docs-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.ds-docs-card {
display: flex;
flex-direction: column;
padding: 24px 24px 0;
background: var(--ds-color-gray-700);
border-radius: 16px;
text-decoration: none;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
position: relative;
}
.ds-docs-card:hover {
background: var(--ds-color-gray-600);
}
.ds-docs-card:focus-visible {
outline: none;
border-color: var(--ds-color-primary-500);
box-shadow: 0 0 0 3px rgba(0, 174, 240, 0.3);
}
.ds-docs-card::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMThMMTggNk0xOCAxNFY2SDEwIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
}
.ds-docs-card:hover::after {
opacity: 1;
transform: translateY(0) translateX(0);
}
.ds-docs-card-icon {
width: 48px;
height: 48px;
margin-bottom: 16px;
color: var(--ds-color-primary-500);
}
.ds-docs-card-ico{
width:32px;
height:32px;
margin:0 0 20px;
}
.ds-docs-card-title {
font: var(--ds-font-headline-xs);
color: var(--ds-color-white);
margin: 0 0 8px 0;
}
.ds-docs-card-desc {
font: var(--ds-font-body-m);
color: var(--ds-color-gray-300);
margin: 0;
flex: 1;
line-height: 1.6;
}
.ds-docs-card-arrow {
margin-top: 16px;
color: var(--ds-color-primary-500);
font: var(--ds-font-label-m);
display: flex;
align-items: center;
gap: 6px;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.2s, transform 0.2s;
}
.ds-docs-card:hover .ds-docs-card-arrow {
opacity: 1;
transform: translateX(0);
}
.ds-docs-cards-single {
grid-template-columns: 1fr !important;
}
.ds-docs-card-featured {
background: linear-gradient(135deg, var(--ds-color-gray-700) 0%, rgba(18, 155, 242, 0.1) 100%);
border-color: rgba(0, 174, 240, 0.3);
}
.ds-docs-card-featured:hover {
border-color: var(--ds-color-primary-500);
}
.ds-docs-cta {
position: relative;
background: var(--ds-color-gray-700);
border-radius: 16px;
padding: 40px 32px;
margin: 56px 0 0 0;
text-align: center;
overflow: hidden;
}
.ds-docs-cta h3 {
font: var(--ds-font-headline-m);
color: var(--ds-color-white);
margin: 12px 0 12px 0;
}
.ds-docs-cta p {
font: var(--ds-font-body-l);
color: var(--ds-color-gray-300);
margin: 0 0 24px 0;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
.ds-docs-steps {
counter-reset: step-counter;
list-style: none;
padding: 0;
margin: 32px 0;
}
.ds-docs-steps li {
position: relative;
padding-left: 56px;
padding-bottom: 32px;
border-left: 2px solid var(--ds-color-gray-600);
margin-left: 16px;
}
.ds-docs-steps li:last-child {
border-left-color: transparent;
padding-bottom: 0;
}
.ds-docs-steps li::before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
left: -18px;
top: -2px;
width: 34px;
height: 34px;
background: var(--ds-color-primary-500);
color: var(--ds-color-gray-900);
border-radius: 50%;
font: var(--ds-font-label-m);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 174, 240, 0.2);
}
.ds-docs-note {
background: rgba(0, 174, 240, 0.08);
padding: 20px 24px 20px 32px;
margin: 28px 0;
border-radius: 12px;
position: relative;
}
.ds-docs-note::before {
content: "";
position: absolute;
left: 8px;
top: 8px;
bottom:8px;
width: 4px;
border-radius: 6px;
background: var(--ds-color-primary-500);
}
.ds-docs-note p {
margin: 0;
color: var(--ds-color-gray-200);
font: var(--ds-font-body-xl);
}
.ds-docs-note strong {
color: var(--ds-color-white);
font: var(--ds-font-label-xl);
display: block;
margin-bottom: 4px;
}
.ds-docs-warning {
background: rgba(255, 187, 0, 0.08);
padding: 20px 24px 20px 32px;
margin: 28px 0;
border-radius: 12px;
position: relative;
}
.ds-docs-warning::before {
content: "";
position: absolute;
left: 8px;
top: 8px;
bottom:8px;
width: 4px;
border-radius: 6px;
background: var(--ds-color-warning-500);
}
.ds-docs-warning p {
margin: 0;
color: var(--ds-color-gray-200);
}
.ds-docs-warning strong {
color: var(--ds-color-white);
font: var(--ds-font-label-xl);
display: block;
margin-bottom: 4px;
}
.ds-docs-warning ul,
.ds-docs-note ul {
margin: 12px 0 0 0;
padding-left: 10px;
list-style: none;
}
.ds-docs-warning li,
.ds-docs-note li {
margin-bottom: 16px;
color: var(--ds-color-gray-300);
position: relative;
padding-left: 18px;
}
.ds-docs-warning li:last-child,
.ds-docs-note li:last-child {
margin-bottom: 0px;
}
.ds-docs-warning li::before,
.ds-docs-note li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--ds-color-white);
}
.ds-docs-warning li::marker,
.ds-docs-note li::marker {
margin-bottom: 8px;
color: var(--ds-color-white);
}
.ds-docs-related {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--ds-color-gray-700);
}
.ds-docs-related h3 {
font: var(--ds-font-headline-s);
color: var(--ds-color-white);
margin: 0 0 20px 0;
}
.ds-docs-related ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ds-docs-related a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
border-radius: 8px;
font: var(--ds-font-body-m);
color: var(--ds-color-gray-300);
text-decoration: none;
transition: all 0.2s;
}
.ds-docs-related a:hover {
border-color: var(--ds-color-primary-500);
color: var(--ds-color-primary-500);
background: rgba(0, 174, 240, 0.08);
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.ds-docs-related a:focus-visible {
outline: none;
border-color: var(--ds-color-primary-500);
box-shadow: 0 0 0 3px rgba(0, 174, 240, 0.3);
}
/* Tags - Based on Figma UI Components */
.ds-docs-tag {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-600);
border-radius: 4px;
font: var(--ds-font-body-xs);
color: var(--ds-color-white);
white-space: nowrap;
}
.ds-docs-tag-success {
background: var(--ds-color-success-500);
border-color: var(--ds-color-success-500);
font: var(--ds-font-label-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ds-docs-tag-warning {
background: var(--ds-color-error-400);
border-color: var(--ds-color-error-400);
font: var(--ds-font-label-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ds-docs-tag-primary {
background: var(--ds-color-primary-500);
border-color: var(--ds-color-primary-500);
font: var(--ds-font-label-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ds-docs-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
/* Enhanced Alert/Notification Box - Based on Figma Notification component */
.ds-docs-alert {
display: flex;
gap: 16px;
padding: 16px;
background: var(--ds-color-gray-600);
border-radius: 12px;
margin: 28px 0;
}
.ds-docs-alert-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ds-color-success-500);
}
.ds-docs-alert-icon svg {
width: 20px;
height: 20px;
color: var(--ds-color-white);
}
.ds-docs-alert-icon-info {
background: var(--ds-color-primary-500);
}
.ds-docs-alert-icon-warning {
background: var(--ds-color-warning-500);
}
.ds-docs-alert-icon-error {
background: var(--ds-color-error-400);
}
.ds-docs-alert-content {
flex: 1;
min-width: 0;
}
.ds-docs-alert-title {
font: var(--ds-font-label-l);
color: var(--ds-color-white);
margin: 0 0 4px 0;
}
.ds-docs-alert-text {
font: var(--ds-font-body-s);
color: var(--ds-color-gray-300);
margin: 0;
}
.ds-docs-alert-action {
font: var(--ds-font-label-m);
color: var(--ds-color-primary-500);
text-decoration: none;
margin-top: 12px;
display: inline-block;
}
.ds-docs-alert-action:hover {
text-decoration: underline;
}
.ds-docs-mobile-nav {
display: block;
margin-bottom: 24px;
}
@media screen and (min-width: 992px) {
.ds-docs-mobile-nav {
display: none;
}
}
.ds-docs-mobile-nav select {
width: 100%;
padding: 14px 20px;
font: var(--ds-font-body-m);
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
border-radius: 12px;
color: var(--ds-color-white);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.96967 8.46967C4.26256 8.17678 4.73744 8.17678 5.03033 8.46967L12 15.4393L18.9697 8.46967C19.2626 8.17678 19.7374 8.17678 20.0303 8.46967C20.3232 8.76256 20.3232 9.23744 20.0303 9.53033L12.5303 17.0303C12.2374 17.3232 11.7626 17.3232 11.4697 17.0303L3.96967 9.53033C3.67678 9.23744 3.67678 8.76256 3.96967 8.46967Z' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 48px;
}
.ds-docs-mobile-nav select:focus {
outline: none;
border-color: var(--ds-color-primary-500);
box-shadow: 0 0 0 3px rgba(0, 174, 240, 0.2);
}
/* ENTERPRISE FEATURES SLICK-LIKE SLIDER */
.ds-enterprise-features-slider {
position: relative;
z-index: 2;
margin-top: -200px;
overflow: visible;
}
.ds-enterprise-features-viewport {
overflow: visible;
}
.ds-enterprise-features-track {
display: flex;
gap: 24px;
transition: transform 0.35s ease;
will-change: transform;
}
.ds-enterprise-features-track > div {
flex: 0 0 calc((1200px - 72px) / 4);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 380px;
padding: 20px 24px;
box-sizing: border-box;
background: var(--ds-color-gray-700);
border: 1px solid var(--ds-color-gray-600);
border-radius: 16px;
}
.ds-enterprise-features-track > div > svg {
width: 160px;
height: 160px;
margin-bottom: 20px;
}
.ds-enterprise-features-track h3 {
font: var(--ds-font-headline-s);
color: var(--ds-color-white);
margin: 0 0 20px;
}
.ds-enterprise-features-track p {
font: var(--ds-font-body-s);
color: var(--ds-color-gray-200);
margin: 0;
}
.ds-enterprise-features-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin-top: 32px;
}
.ds-enterprise-features-arrow {
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--ds-color-white);
cursor: pointer;
}
.ds-enterprise-features-arrow:disabled {
opacity: 0.3;
cursor: default;
}
.ds-enterprise-features-arrow svg {
width: 24px;
height: 24px;
}
.ds-enterprise-features-dots {
display: flex;
gap: 10px;
}
.ds-enterprise-features-dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 999px;
background: var(--ds-color-gray-600);
padding: 0;
cursor: pointer;
}
.ds-enterprise-features-dot.is-active {
background: var(--ds-color-white);
}
@media screen and (max-width: 1279px) {
.ds-enterprise-features-track > div {
flex-basis: 280px;
}
}
@media screen and (max-width: 767px) {
.ds-enterprise-get-a-quote .ds-button {
order: 1;
}
.ds-enterprise-get-a-quote .ds-enterprise-copy-email-address {
order: 3;
}
.ds-enterprise-get-a-quote .info-badge {
order: 2;
}
.ds-enterprise-features-slider {
margin-top: -160px;
overflow: visible;
}
.ds-enterprise-features-viewport {
overflow: visible;
}
.ds-enterprise-features-track {
display: flex;
flex-direction: column;
gap: 8px;
transform: none !important;
transition: none;
}
.ds-enterprise-features-track > div {
width: 100%;
flex: 0 0 auto;
min-height: auto;
display: grid;
grid-template-columns: 96px 1fr;
align-items: flex-start;
text-align: left;
padding: 16px;
}
.ds-enterprise-features-track > div > svg {
width: 88px;
height: 88px;
margin: 0;
}
.ds-enterprise-features-track h3 {
margin: 0 0 8px;
}
.ds-enterprise-features-track p {
margin: 0;
}
.ds-enterprise-features-controls {
display: none;
}
.ds-product-card-text {
margin-left:8px;
}
}
.ds-status-info {
margin-top: 24px;
}
.ds-status-info-item {
display: grid;
grid: auto / max-content 1fr;
gap: 12px 16px;
padding: 16px;
border: 1px solid var(--ds-color-gray-600);
border-top: none;
}
.ds-status-info-item svg {
grid-row: span 2;
}
.ds-status-info-item span {
display: flex;
align-items: center;
gap: 8px;
}
.ds-status-info-item:last-child {
border-radius: 0 0 8px 8px;
}
.ds-status-info-header {
display: block;
text-align: center;
padding: 16px;
border: none;
border-radius: 8px 8px 0 0;
background: var(--ds-color-success-400);
}
.ds-status-info-header.error {
background: var(--ds-color-warning-500);
}
.ds-status-message h2 {
font: var(--ds-font-headline-m);
}
.ds-status-message p,
.ds-status-message ul {
font: var(--ds-font-body-xl);
}
@media screen and (min-width: 768px) {
.ds-status-info {
margin-top: 40px;
}
.ds-status-info-item {
padding: 32px 40px;
grid: auto / max-content 1fr max-content;
place-content: center;
}
.ds-status-info-item svg {
grid-row: 1;
}
}
.ds-wtm-link {
color: var(--ds-color-wtm-400);
text-decoration: underline;
font: var(--ds-font-label-m);
}
.ds-wtm-link:hover {
color: var(--ds-color-wtm-500);
}
.ds-wtm-white-link {
color: white;
text-decoration: underline;
}
.ds-wtm-white-link:hover {
color: var(--ds-color-wtm-400);
}
.ds-wtm-category-badge {
position: relative;
display: inline-flex;
align-items: center;
padding: 6px;
gap: 8px;
border-radius: 8px;
border: 1px solid var(--ds-color-gray-700);
background: var(--ds-color-gray-800);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
font: var(--ds-font-label-m);
}
.ds-wtm-category-badge-tooltip {
z-index: 1000;
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: max(160px, 100%);
padding: 4px;
text-align: center;
border-radius: 4px;
background: var(--ds-color-gray-900);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}
.ds-wtm-category-badge:hover .ds-wtm-category-badge-tooltip {
display: block;
}
.ds-wtm-section {
padding: 20px 0;
}
.ds-wtm-section-card {
display: flex;
flex-flow: column;
gap: 8px;
padding: 20px;
border-radius: 16px;
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-700);
box-shadow:
1px 3px 8px 0px rgba(39, 44, 49, 0.03),
8px 14px 38px 0px rgba(39, 44, 49, 0.06);
}
.ds-wtm-section-card.small {
padding: 16px;
}
.ds-wtm-section-card.medium {
padding: 24px;
}
.ds-wtm-entities {
display: flex;
flex-flow: column;
gap: 16px;
}
.ds-wtm-entities > p {
grid-column: 1/-1;
}
.ds-wtm-entities > a {
display: block;
min-width: 200px;
flex: 1;
color: white;
}
.ds-wtm-entities > a.hidden,
.ds-wtm-entities.cards > a.hidden {
display: none;
}
.ds-wtm-entities.cards {
gap: 16px;
}
.ds-wtm-entities.cards > a {
display: grid;
gap: 0px 4px;
grid-template-columns: max-content 1fr;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid rgba(18, 19, 23, 0.4);
background: linear-gradient(
180deg,
rgba(47, 49, 54, 0.5) 0%,
rgba(47, 49, 54, 0.1) 100%
);
white-space: nowrap;
color: inherit;
}
.ds-wtm-entities.cards > a > div:first-child {
grid-row: 1 / 3;
margin-top: 5px;
}
.ds-wtm-header {
display: flex;
flex-flow: column;
gap: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.ds-wtm-header > div {
display: flex;
flex-flow: column;
gap: 16px;
}
.ds-wtm-header-facts {
list-style: none;
display: flex;
flex-flow: column;
gap: 4px;
padding: 0;
}
.ds-wtm-header-facts > li {
display: grid;
align-items: center;
grid: auto / max-content 1fr;
gap: 4px 16px;
border-radius: 16px;
background: var(--ds-color-gray-800);
padding: 16px;
}
.ds-wtm-header-facts > li svg {
grid-row: 1 / 3;
}
.ds-wtm-result {
padding: 40px 0;
}
.ds-wtm-table-container {
overflow-x: auto;
}
.ds-wtm-table {
width: 100%;
border-collapse: collapse;
}
.ds-wtm-table th:hover {
color: var(--ds-color-wtm-400);
}
.ds-wtm-table th svg {
display: none;
transition: none;
}
.ds-wtm-table th.active svg {
display: inline-block;
margin-bottom: -2px;
transform: rotate(180deg);
}
.ds-wtm-table th.active.desc svg {
transform: rotate(0deg);
}
.ds-wtm-table th button {
appearance: none;
background: none;
border: none;
color: inherit;
font: inherit;
padding: 0;
margin: 0;
cursor: pointer;
font: var(--ds-font-label-s);
text-transform: uppercase;
transition: none;
}
.ds-wtm-table th,
.ds-wtm-table td {
padding: 8px;
}
.ds-wtm-table thead tr {
background: var(--ds-color-gray-700);
text-align: left;
}
.ds-wtm-table thead tr th:first-child,
.ds-wtm-table tbody tr td:first-child {
border-radius: 8px 0 0 8px;
}
.ds-wtm-table thead tr th:last-child,
.ds-wtm-table tbody tr td:last-child {
border-radius: 0 8px 8px 0;
}
.ds-wtm-table thead th {
font: var(--ds-font-label-s);
text-transform: uppercase;
white-space: nowrap;
}
.ds-wtm-table tr:hover td {
background: rgb(255, 255, 255, 0.02);
}
.ds-wtm-table td {
font: var(--ds-font-body-m);
transition: all 0.2s ease;
}
.ds-wtm-table td a {
display: block;
margin: -8px;
padding: 8px;
}
@media screen and (min-width: 768px) {
.ds-wtm-section {
padding: 40px 0;
}
.ds-wtm-section-card {
padding: 40px 64px;
}
.ds-wtm-section-card.small {
padding: 24px;
}
.ds-wtm-section-card.medium {
padding: 32px;
}
.ds-wtm-entities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ds-wtm-header {
display: grid;
grid-template-columns: 5fr 4fr;
align-items: center;
gap: 40px;
}
}
@media screen and (min-width: 992px) {
.ds-wtm-entities {
gap: 32px 16px;
grid-template-columns: repeat(3, 1fr);
}
.ds-wtm-header {
grid-template-columns: 2fr 3fr;
}
.ds-wtm-header-facts {
flex-flow: row;
}
.ds-wtm-header-facts > li {
display: flex;
flex-flow: column;
flex: 1;
text-align: center;
padding: 24px 16px;
}
}
@media screen and (min-width: 1280px) {
.ds-wtm-entities {
grid-template-columns: repeat(3, 1fr);
}
.ds-wtm-entities.cards {
grid-template-columns: repeat(4, 1fr);
}
.ds-wtm-header {
grid-template-columns: 1fr 1fr;
}
}
/* Home page */
.ds-wtm-home-product-grid {
position: relative;
z-index: 1;
margin-top: -180px;
}
.ds-wtm-home-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
}
.ds-wtm-home-categories > li {
display: inline-block;
}
.ds-wtm-home-facts {
display: grid;
grid: auto-flow / repeat(2, 1fr);
gap: 8px;
}
.ds-wtm-home-fact {
position: relative;
display: flex;
padding: 22px 14px;
border-radius: 16px;
border: 1px solid #3f4146;
background: var(--Gray800, #202225);
}
.ds-wtm-home-fact svg {
display: none;
}
.ds-wtm-home-fact-desc {
display: flex;
flex-flow: column;
gap: 8px;
}
.ds-wtm-home-fact-hover {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 24px;
overflow-y: auto;
visibility: hidden;
opacity: 0;
transform: scale(0.95);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.ds-wtm-home-fact > *:not(.ds-wtm-home-fact-hover) {
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.ds-wtm-home-fact:hover > *:not(.ds-wtm-home-fact-hover) {
visibility: hidden;
opacity: 0;
transform: scale(0.95);
}
.ds-wtm-home-fact:hover > .ds-wtm-home-fact-hover {
visibility: visible;
opacity: 1;
transform: scale(1);
}
@media screen and (min-width: 768px) {
.ds-wtm-home-product-grid {
margin-top: -200px;
flex-flow: row wrap;
}
.ds-wtm-home-product-grid > * {
flex-flow: column;
max-width: calc(50% - var(--ds-layout-spacing-m));
}
.ds-wtm-home-facts {
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
grid-auto-rows: 1fr;
}
.ds-wtm-home-fact {
align-items: center;
padding: 30px 40px;
}
.ds-wtm-home-fact svg {
display: block;
}
.ds-wtm-home-fact.wide {
justify-content: space-around;
grid-column: span 2;
gap: 40px;
}
.ds-wtm-home-fact.last {
grid-column: 2 / 4;
}
}
@media screen and (min-width: 992px) {
.ds-wtm-home-product-grid {
margin-top: -230px;
}
.ds-wtm-home-product-grid > * {
max-width: 100%;
}
.ds-wtm-home-facts {
grid-template-columns: repeat(4, 1fr);
}
.ds-wtm-home-fact.last {
grid-column: span 2;
}
}
/* Tracker details */
.ds-wtm-tracker-header {
margin: 20px 0;
display: grid;
grid: auto / 1fr 1fr;
gap: 20px;
}
.ds-wtm-tracker-header > div {
grid-column: span 2;
}
.ds-wtm-tracker-header .ds-wtm-tracker-header-rank,
.ds-wtm-tracker-header .ds-wtm-tracker-header-operates {
grid-column: span 1;
}
.ds-wtm-tracker-data {
display: flex;
flex-flow: column;
gap: 40px;
margin-bottom: 20px;
}
.ds-wtm-tracker-more {
position: relative;
z-index: 1000;
padding-bottom: 4px;
}
.ds-wtm-tracker-more-button {
cursor: pointer;
}
.ds-wtm-tracker-more-dropdown {
display: none;
position: absolute;
flex-flow: column;
width: 100%;
top: 100%;
max-height: 200px;
overflow-y: auto;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--ds-color-gray-600);
background: var(--ds-color-gray-700);
box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
}
.ds-wtm-tracker-more:hover .ds-wtm-tracker-more-dropdown,
.ds-wtm-tracker-more:focus-within .ds-wtm-tracker-more-dropdown {
display: flex;
}
.ds-wtm-tracker-type {
display: flex;
flex-flow: row nowrap;
gap: 8px;
}
.ds-wtm-tracker-type svg {
flex-shrink: 0;
}
.ds-wtm-tracker-site-types {
display: grid;
grid: auto / max-content 1fr;
gap: 8px;
align-items: center;
}
.ds-wtm-tracker-site-types-name {
position: relative;
padding: 0 4px;
}
.ds-wtm-tracker-site-types-name span {
position: relative;
z-index: 1;
}
.ds-wtm-tracker-site-types-progress {
position: absolute;
z-index: 0;
top: 0;
left: 0;
height: 100%;
background: var(--ds-color-gray-700);
border-radius: 4px;
}
.wtm-tracker-suggest-choice {
display: flex;
flex-flow: column;
padding: 16px;
background: var(--ds-color-gray-800);
border-radius: 8px;
}
.wtm-tracker-suggest-choice a {
margin-top: 16px;
}
@media screen and (max-width: 767px) {
.ds-wtm-tracker-reach {
padding: 0;
}
.ds-wtm-tracker-reach .ds-wtm-section-card {
border-radius: 0;
}
}
@media screen and (min-width: 768px) {
.ds-wtm-tracker-header {
margin: 40px 0;
gap: 40px;
}
.ds-wtm-tracker-header > div {
grid-column: span 1;
}
.ds-wtm-tracker-header .ds-wtm-tracker-suggest {
display: flex;
justify-content: flex-end;
align-items: flex-start;
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.ds-wtm-tracker-date-range {
text-align: right;
margin: 0 -20px -20px 0;
}
.ds-wtm-tracker-reach .ds-wtm-section-card {
margin-bottom: 40px;
}
.wtm-tracker-suggest-choice {
display: grid;
grid: auto / 1fr max-content;
}
.wtm-tracker-suggest-choice a {
margin: 0;
grid-area: 1 / 2 / 3 / 3;
}
}
@media screen and (min-width: 992px) {
.ds-wtm-tracker-header {
display: flex;
}
.ds-wtm-tracker-header > div:first-child {
flex: 1;
}
.ds-wtm-tracker-header > div {
min-width: 15%;
}
.ds-wtm-tracker-data {
display: grid;
grid: auto / 1fr 1fr;
gap: 64px 40px;
}
.ds-wtm-entities.ds-wtm-tracker-similar-trackers {
display: grid;
grid: auto / repeat(2, 1fr);
}
}
@media screen and (min-width: 1280px) {
.ds-wtm-entities.ds-wtm-tracker-similar-trackers {
display: grid;
grid: auto / repeat(2, 1fr);
}
}
/* Website details */
.ds-wtm-website-header {
display: flex;
flex-flow: column;
gap: 32px;
margin-top: 24px;
padding-bottom: 24px;
}
.ds-wtm-website-header-link {
background: white;
border-radius: 24px;
padding: 12px 8px 32px;
margin: 0 -16px;
color: var(--ds-color-gray-800);
display: flex;
flex-flow: column;
align-items: center;
gap: 24px;
text-align: center;
border-radius: 36px / 34px;
border: 1px solid var(--ds-color-gray-900);
box-shadow:
0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
0 40px 60px 0 rgba(0, 0, 0, 0.2);
background:
center center / 800px 800px no-repeat
url('data:image/svg+xml,'),
center top
linear-gradient(
180deg,
rgba(18, 19, 23, 0.5) 0%,
rgba(18, 19, 23, 0) 100%
),
center top
radial-gradient(
238.31% 138.8% at -0.03% -0.51%,
#ce26da 0%,
#880076 31.73%,
#39005d 100%
);
}
.ds-wtm-website-header-link img {
width: 64px;
height: 64px;
}
.ds-wtm-website-header-link p {
margin: 0;
}
.ds-wtm-website-header-link a {
background: #fef;
color: #4c016d;
border-color: #fef;
border-radius: 16px;
padding: 13px 16px;
font: var(--ds-font-display-s);
transition: background 0.2s ease;
}
.ds-wtm-website-header-link a:hover {
background: white;
border-color: white;
}
.ds-wtm-website-header-link a img {
display: none;
}
.ds-wtm-website-header-link-reviews {
display: flex;
flex-flow: column;
align-items: center;
gap: 12px;
text-align: center;
}
.ds-wtm-website-trackers {
padding-top: 0px;
padding-bottom: 40px;
}
.ds-wtm-show-all {
appearance: none;
border-radius: 24px;
border: 1px solid var(--ds-color-gray-600);
background: var(--ds-color-gray-700);
padding: 8px 16px;
font: var(--ds-font-button-s);
text-transform: uppercase;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
color: white;
cursor: pointer;
transition: background 0.2s;
}
.ds-wtm-show-all:hover {
background: var(--ds-color-gray-600);
}
.ds-wtm-website-info {
display: flex;
flex-flow: column;
gap: 20px;
padding-top: 30px;
padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
.ds-wtm-website-header {
padding-bottom: 64px;
}
.ds-wtm-website-header-link {
padding: 32px;
}
.ds-wtm-website-header-link img {
width: 120px;
height: 120px;
}
.ds-wtm-website-header-link a {
font: var(--ds-font-display-m);
padding: 14px 20px;
}
.ds-wtm-website-header-link a:after {
content: '';
display: block;
margin-right: -8px;
width: 32px;
height: 32px;
background: url('data:image/svg+xml,');
}
.ds-wtm-website-header-link-reviews {
gap: 8px;
}
.ds-wtm-website-header-link-reviews h4 {
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ds-wtm-website-info {
display: flex;
flex-flow: row;
gap: 40px;
padding-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (min-width: 1280px) {
.ds-wtm-website-header-link {
flex-flow: row;
place-items: start;
gap: 40px;
padding: 40px;
text-align: left;
margin: 0 -24px;
}
.ds-wtm-website-header-link img {
width: 150px;
height: 150px;
}
.ds-wtm-website-header-link > div {
place-items: start;
}
.ds-wtm-website-header-link a {
margin-top: 8px;
margin-bottom: 8px;
}
.ds-wtm-website-header-link-reviews {
flex-flow: row;
}
.ds-wtm-website-facts {
display: grid;
grid: auto / 1fr 1fr;
}
}
/* Search */
.ds-wtm-search-input {
padding-top: 8px;
padding-bottom: 8px;
}
.ds-wtm-search-input input {
border-width: 2px;
}
.ds-wtm-search-input input:focus,
.ds-wtm-search-input input:hover {
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border: double 2px transparent;
background-image:
linear-gradient(var(--ds-color-gray-800), var(--ds-color-gray-800)),
var(--ds-color-gradient-wtm);
background-origin: border-box;
background-clip: padding-box, border-box;
}
@media screen and (min-width: 1280px) {
.ds-wtm-search-input {
display: none;
}
}
/* Explorer */
.ds-wtm-explorer-header {
display: flex;
flex-flow: column;
gap: 20px;
padding-top: 20px;
align-items: center;
}
gh-wtm-explorer {
display: flex;
min-height: 800px;
}
@media screen and (min-width: 768px) {
.ds-wtm-explorer-header {
padding-top: 40px;
display: grid;
grid: auto / minmax(50%, 560px) 1fr;
justify-items: center;
}
}
.ds-privacy-reports-card {
max-width: 980px;
margin: 0 auto 32px;
display: flex;
flex-flow: column;
gap: 20px;
padding: 20px;
border-radius: 16px;
border: 1px solid var(--ds-color-gray-600);
background: var(--ds-color-gray-800);
box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
}
.ds-privacy-reports-card img {
overflow: hidden;
flex-shrink: 0;
width: 160px;
height: 160px;
border-radius: 7px;
}
@media screen and (min-width: 768px) {
.ds-privacy-reports-card {
padding: 40px;
gap: 40px;
flex-flow: row;
}
}
@media screen and (min-width: 992px) {
.ds-privacy-reports-card img {
width: 288px;
height: 288px;
}
}
.ds-privacy-link-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 1080px;
margin: 0 auto;
text-align: left;
}
.ds-privacy-link-group {
display: flex;
flex-direction: column;
}
.ds-privacy-link-group__title {
margin: 0 0 4px;
padding-bottom: 10px;
border-bottom: 2px solid var(--ds-color-primary-500);
color: var(--ds-color-gray-300);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ds-privacy-link-group__list {
list-style: none;
padding: 0;
margin: 0;
}
.ds-privacy-link-group__list li {
padding: 18px 0;
border-bottom: 1px solid var(--ds-color-gray-700);
}
.ds-privacy-link-group__list li:last-child {
border-bottom: 0;
}
.ds-privacy-link-group__list a {
display: inline-block;
color: var(--ds-color-white);
font-weight: 500;
font-size: 1.0625rem;
line-height: 1.4;
text-decoration: none;
transition: color 0.15s ease;
}
.ds-privacy-link-group__list a:hover {
color: var(--ds-color-primary-500);
}
.ds-privacy-link-group__list a span {
display: inline-block;
margin-left: 4px;
color: var(--ds-color-primary-500);
font-weight: 600;
transition: transform 0.15s ease;
}
.ds-privacy-link-group__list a:hover span {
transform: translateX(2px);
}
.ds-privacy-link-group__list p {
margin: 4px 0 0;
color: var(--ds-color-gray-400);
font-size: 0.875rem;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.ds-privacy-link-grid {
grid-template-columns: 1fr 1fr;
gap: 32px 64px;
}
}
.ds-release-header {
background: no-repeat center -280px url('data:image/svg+xml,'),
center top
radial-gradient(
238.31% 138.8% at -0.03% -0.51%,
#0092c3 0%,
#2d3f9b 31.73%,
#320065 100%
);
}
.ds-release-header .ds-section {
padding-top: 40px;
}
.ds-release-image {
max-width: 940px;
width: 100%;
border-radius: 24px;
overflow: hidden;
}
.ds-release-content {
max-width: 640px;
}
.ds-release-header-content {
max-width: 600px;
}
.ds-release-header-content h2 {
font: var(--ds-font-headline-l);
margin: 0;
}
.ds-release-header-content p {
font: var(--ds-font-body-l);
margin: 8px 0 24px;
}
.ds-release-content ul li {
font: var(--ds-font-body-l);
color: var(--ds-color-gray-300);
margin: 24px 0;
}
.ds-release-icon {
vertical-align: bottom;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--ds-color-gray-900);
margin-right: 8px;
}
.ds-release-contributors {
display: flex;
flex-flow: column;
gap: 16px;
}
@media screen and (min-width: 768px) {
.ds-release-header .ds-section {
padding-top: 80px;
}
.ds-release-embed {
margin-top: -40px;
}
.ds-release-contributors {
flex-flow: row;
}
}
.changelog-header {
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.changelog-header p {
margin-top: 12px;
}
.changelog-timeline {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.changelog-item {
display: flex;
gap: 16px;
align-items: stretch;
}
.changelog-date {
flex-shrink: 0;
width: 100px;
padding-top: 12px;
font: var(--ds-font-label-s);
color: var(--ds-color-gray-400);
text-align: right;
}
.changelog-marker {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 12px;
padding-top: 16px;
}
.changelog-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ds-color-primary-500);
flex-shrink: 0;
}
.changelog-line {
width: 2px;
flex-grow: 1;
background: var(--ds-color-gray-600);
}
.changelog-item:last-child .changelog-line {
background: linear-gradient(to bottom, var(--ds-color-gray-600), transparent);
}
.changelog-group {
flex: 1;
min-width: 0;
padding: 6px 0 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.changelog-entry h3 {
font: var(--ds-font-label-l);
color: var(--ds-color-white);
}
.changelog-entry p {
font: var(--ds-font-body-s);
color: var(--ds-color-gray-400);
margin-top: 2px;
}
.changelog-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.changelog-version {
font: var(--ds-font-label-xs);
color: var(--ds-color-gray-500);
text-decoration: none;
transition: color 150ms ease-in-out;
}
.changelog-version:hover {
color: var(--ds-color-primary-500);
}
.changelog-tag {
display: inline-block;
font: var(--ds-font-label-xs);
padding: 1px 8px;
border-radius: 24px;
}
.changelog-tag-panel { background: rgba(0, 174, 240, 0.1); color: var(--ds-color-primary-500); }
.changelog-tag-blocking { background: rgba(107, 211, 100, 0.1); color: var(--ds-color-success-400); }
.changelog-tag-privacy { background: rgba(146, 128, 255, 0.1); color: var(--ds-color-wtm-400); }
.changelog-tag-settings { background: rgba(255, 187, 0, 0.1); color: var(--ds-color-warning-500); }
.changelog-tag-ux { background: rgba(255, 126, 116, 0.1); color: var(--ds-color-error-400); }
.changelog-tag-enterprise { background: rgba(0, 174, 240, 0.15); color: var(--ds-color-primary-300); }
@media screen and (max-width: 767px) {
.changelog-date {
display: none;
}
.changelog-group .changelog-date-mobile {
display: block;
font: var(--ds-font-label-xs);
color: var(--ds-color-gray-500);
margin-bottom: 2px;
}
}
@media screen and (min-width: 768px) {
.changelog-date-mobile {
display: none;
}
}
/* ============================================================
/comeback-youtube — view-specific styles.
Layout, spacing, typography, colours and backgrounds come from
the design system (ds-* classes / tokens). Only the bespoke
"no escape" cycle illustration and the feature tiles live here,
namespaced ds-comeback-* to avoid clashing with global styles.
Mobile-first: the base rules describe the mobile layout; the
@media (min-width: 768px) block at the end applies the
tablet/desktop layout.
============================================================ */
/* ---------- "No escape" cycle ----------
Mobile: vertical stack with a left loop track and paired tiles. */
.ds-comeback-cycle-row {
display: flex;
gap: 12px;
}
.ds-comeback-cycle-track {
display: block;
width: 26px;
position: relative;
flex-shrink: 0;
}
.ds-comeback-cycle-track svg {
position: absolute;
inset: 0;
width: 26px;
height: 100%;
}
.ds-comeback-cycle-cards {
display: block;
flex: 1;
}
.ds-comeback-cycle-card {
background: var(--ds-color-gray-900);
border: 1px solid var(--ds-color-gray-600);
border-radius: 14px;
padding: 14px 12px 12px;
text-align: center;
position: relative;
z-index: 2;
}
.ds-comeback-cycle-card img {
width: 100%;
max-width: 104px;
height: auto;
}
.ds-comeback-cycle-label {
font: var(--ds-font-display-2xs);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ds-color-white);
margin: 8px 0 0;
}
.ds-comeback-cycle-connector {
display: block;
text-align: center;
margin: 8px 0;
color: var(--ds-color-primary-500);
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.ds-comeback-cycle-connector::before { content: "\2193"; }
.ds-comeback-cycle-loop {
display: none;
position: relative;
height: 56px;
margin-top: 4px;
}
.ds-comeback-cycle-loop svg {
position: absolute;
inset: 0;
width: 100%;
height: 56px;
}
.ds-comeback-loop-label {
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-50%);
margin: 0;
letter-spacing: 0.08em;
color: var(--ds-color-primary-500);
white-space: nowrap;
}
.ds-comeback-loop-base {
fill: none;
stroke: var(--ds-color-primary-500);
stroke-linecap: round;
}
.ds-comeback-loop-head { fill: var(--ds-color-primary-500); }
.ds-comeback-loop-pulse {
fill: none;
stroke: var(--ds-color-primary-500);
stroke-linecap: round;
stroke-dasharray: 16 100;
stroke-dashoffset: 16;
opacity: 0;
}
.ds-comeback-cycle-repeat {
display: block;
margin: 14px 0 0;
letter-spacing: 0.08em;
text-align: center;
color: var(--ds-color-primary-500);
}
.ds-comeback-cycle-caption {
margin: 10px 0 0;
text-align: center;
}
.ds-comeback-caption-d { display: none; }
.ds-comeback-caption-m { display: inline; }
/* ----- Cycle animation — only applied once .ds-comeback-anim is
set by script, and never under prefers-reduced-motion ----- */
.ds-comeback-anim .ds-comeback-cycle-card {
transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.ds-comeback-anim .ds-comeback-cycle-card.is-on {
border-color: var(--ds-color-primary-500);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--ds-color-primary-500) 55%, transparent),
0 10px 30px color-mix(in srgb, var(--ds-color-primary-500) 16%, transparent);
transform: translateY(-3px);
}
.ds-comeback-anim .ds-comeback-loop-base { opacity: 0.35; transition: opacity 0.4s ease; }
.ds-comeback-anim .ds-comeback-loop-head { opacity: 0.35; }
.ds-comeback-anim .ds-comeback-loop-label,
.ds-comeback-anim .ds-comeback-cycle-repeat { opacity: 0.55; }
@keyframes ds-comeback-pulse-travel {
from { stroke-dashoffset: 16; opacity: 1; }
to { stroke-dashoffset: -100; opacity: 1; }
}
@keyframes ds-comeback-head-arrive { to { opacity: 1; } }
@keyframes ds-comeback-label-flash {
0% { opacity: 0.55; }
45% { opacity: 1; }
100% { opacity: 0.55; }
}
.ds-comeback-anim.is-running .ds-comeback-loop-pulse--a { animation: ds-comeback-pulse-travel 1.05s linear forwards; }
.ds-comeback-anim.is-running .ds-comeback-loop-pulse--b { animation: ds-comeback-pulse-travel 1.05s linear 1s forwards; }
.ds-comeback-anim.is-running .ds-comeback-loop-pulse--m { animation: ds-comeback-pulse-travel 2.05s linear forwards; }
.ds-comeback-anim.is-running .ds-comeback-loop-head { animation: ds-comeback-head-arrive 0.45s ease-out 2s forwards; }
.ds-comeback-anim.is-running .ds-comeback-loop-label,
.ds-comeback-anim.is-running .ds-comeback-cycle-repeat { animation: ds-comeback-label-flash 1.4s ease 0.7s; }
@media (prefers-reduced-motion: reduce) {
.ds-comeback-anim .ds-comeback-cycle-card,
.ds-comeback-anim .ds-comeback-loop-base { transition: none; }
.ds-comeback-anim .ds-comeback-cycle-card.is-on {
border-color: var(--ds-color-gray-600);
box-shadow: none;
transform: none;
}
.ds-comeback-anim .ds-comeback-loop-base,
.ds-comeback-anim .ds-comeback-loop-head { opacity: 1; }
.ds-comeback-anim .ds-comeback-loop-label,
.ds-comeback-anim .ds-comeback-cycle-repeat { opacity: 1; }
.ds-comeback-loop-pulse { animation: none !important; opacity: 0 !important; }
}
/* ---------- Feature tiles ---------- */
.ds-comeback-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
max-width: 860px;
margin: 0 auto;
}
.ds-comeback-feature {
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-600);
border-radius: 12px;
padding: 13px 12px;
}
.ds-comeback-feature-label {
display: flex;
align-items: center;
gap: 7px;
font: var(--ds-font-display-2xs);
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ds-color-primary-500);
margin: 0 0 5px;
}
.ds-comeback-feature-label svg { flex-shrink: 0; width: 15px; height: 15px; }
.ds-comeback-feature-body {
font: var(--ds-font-body-s);
color: var(--ds-color-gray-200);
margin: 0;
}
/* ============================================================
Tablet / desktop — horizontal cycle, three-up feature grid
============================================================ */
@media (min-width: 768px) {
.ds-comeback-cycle-row { display: block; }
.ds-comeback-cycle-track { display: none; }
.ds-comeback-cycle-cards { display: flex; align-items: stretch; gap: 10px; }
.ds-comeback-cycle-card { flex: 1; padding: 13px 10px 12px; }
.ds-comeback-cycle-card img { max-width: 112px; }
.ds-comeback-cycle-label { margin: 9px 0 0; }
.ds-comeback-cycle-connector { align-self: center; flex-shrink: 0; margin: 0; }
.ds-comeback-cycle-connector::before { content: "\2192"; }
.ds-comeback-cycle-loop { display: block; }
.ds-comeback-cycle-repeat { display: none; }
.ds-comeback-cycle-caption { margin: 18px 0 0; }
.ds-comeback-caption-d { display: inline; }
.ds-comeback-caption-m { display: none; }
.ds-comeback-features { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ds-comeback-feature { padding: 16px 14px; }
.ds-comeback-feature-label { gap: 8px; font-size: 13px; margin: 0 0 6px; }
.ds-comeback-feature-label svg { width: 16px; height: 16px; }
}
.ds-fork-headline { text-transform: uppercase; }
.ds-fork-nowrap { white-space: nowrap; }
.ds-fork-subline {
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.ds-fork-section { padding-top: 0; }
.ds-fork {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
max-width: 460px;
margin: 0 auto;
}
.ds-fork-panel {
display: flex;
flex-direction: column;
border-radius: 16px;
padding: 28px 22px;
}
.ds-fork-panel--yt {
/* elevated surface, just above gray-800 */
background: #2a2d33;
border: 1.5px solid var(--ds-color-primary-500);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 174, 240, 0.15);
}
.ds-fork-panel--survey {
background: var(--ds-color-gray-800);
border: 1px solid var(--ds-color-gray-700);
}
.ds-fork-pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
margin: 0 0 22px;
padding: 8px 14px;
border-radius: 8px;
font: var(--ds-font-display-2xs);
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.ds-fork-pill svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.ds-fork-pill--yt { background: rgba(0, 174, 240, 0.15); color: var(--ds-color-primary-500); }
.ds-fork-pill--survey { background: rgba(255, 255, 255, 0.06); color: var(--ds-color-gray-300); }
.ds-fork-bullets {
list-style: none;
margin: 0 0 24px;
padding: 0;
flex: 1;
}
.ds-fork-bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 13px;
font: var(--ds-font-body-m);
color: var(--ds-color-gray-200);
}
.ds-fork-bullets li:last-child { margin-bottom: 0; }
.ds-fork-dot {
width: 7px;
height: 7px;
margin-top: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ds-fork-dot--yt { background: var(--ds-color-primary-500); }
.ds-fork-dot--survey { background: var(--ds-color-gray-400); }
/* The partial wraps the button in .ds-margin-v-m, so stretch it to make the button full-width. */
.ds-fork-panel .ds-button-large { width: 100%; }
.ds-fork-panel .ds-margin-v-m { align-self: stretch; }
/* The design system only caps icon max-height, so pin the size or the browser logo makes the Reinstall button taller than the survey one. */
.ds-fork-panel .ds-button-large svg { width: 20px; height: 20px; }
.ds-fork-panel .ds-button-large img { height: 20px; width: auto; }
/* Transparent outline instead of the design system's grey fill, so it reads as a secondary button. */
.ds-fork-panel--survey .ds-button-outline {
background: transparent;
border: 1.5px solid var(--ds-color-gray-500);
box-shadow: none;
}
.ds-fork-panel--survey .ds-button-outline:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--ds-color-gray-300);
}
.ds-fork-rally,
.ds-fork-closing {
margin: 4px 0 0;
font: var(--ds-font-display-2xs);
font-size: 15px;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
}
.ds-fork-rally { color: var(--ds-color-primary-500); }
.ds-fork-closing { color: var(--ds-color-gray-300); }
@media (min-width: 768px) {
.ds-fork {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
max-width: 920px;
align-items: stretch;
}
.ds-fork-panel { padding: 38px 34px; }
.ds-fork-rally,
.ds-fork-closing { text-align: left; }
}