/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --color-white: #ffffff; --color-black: #000000; --color-stone-100: #6b6b6b; --color-deep-sea-green-100: #2b5f51; --color-turquoise-100: #0bbab4; --color-poppy-100: #f78f28; --color-header-surface: #dbeded; --color-hero-gradient-start: #041826; --color-hero-gradient-end: #2a5853; --color-accent-turquoise: #14b3b9; --color-cta-gradient-start: #5feda5; --color-cta-gradient-end: #11929a; --color-cta-inner-highlight: #b5fdf7; --color-cta-inner-shadow: #1cedee; --color-bg-primary: var(--color-white); --color-text-primary: var(--color-black); --color-text-muted: var(--color-stone-100); --color-text-brand: var(--color-deep-sea-green-100); --color-text-inverse: var(--color-white); --color-focus-ring: var(--color-hero-gradient-start); --color-focus-ring-contrast: var(--color-white); --gradient-hero: linear-gradient( 180deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end) ); --gradient-cta: linear-gradient( 180deg, var(--color-cta-gradient-start) 0.576%, var(--color-cta-gradient-end) 99.424% ); --shadow-cta-inset: inset 0 3px 2px 0 var(--color-cta-inner-highlight), inset 0 -3px 2px 0 var(--color-cta-inner-shadow); --shadow-modal: 0 10px 32px -4px rgba(165, 165, 165, 0.25); } :root { --font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-h4: 20px; --line-height-h4: 24px; --letter-spacing-h4: -1px; --font-size-body: 16px; --line-height-body: 26px; --font-size-xs: 12px; --line-height-xs: 22px; --font-size-hero-eyebrow: clamp(24px, round(up, 21.8873px + 0.5634vw, 1px), 30px); --font-size-hero-wordmark: clamp(32px, round(up, 22.1408px + 2.6291vw, 1px), 60px); --font-size-hero-wordmark-tm: 0.645em; --font-size-hero-body: 24px; --font-size-hero-footnote: clamp(24px, round(up, 26.7042px - 0.1878vw, 1px), 26px); --font-size-cta: 35px; } .header { background: var(--color-header-surface); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .nav__list { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0 auto; padding: 8px clamp(7px, -32.7887px + 10.6103vw, 120px); } @media (width >= 1200px) { .nav__list { max-width: 1440px; } } .nav__link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 8px; color: var(--color-text-brand); font-family: var(--font-family-heading); font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); text-decoration: underline; } .nav__link:hover { text-decoration: none; } .icon { flex: none; } @media (width >= 700px) { .nav__list { flex-direction: row; align-items: center; justify-content: flex-end; } .nav__link { white-space: nowrap; } } .footer { background: var(--color-white); border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__inner { display: flex; flex-direction: column; gap: 30px; margin: 0 auto; padding: clamp(23px, 20.5352px + 0.6573vw, 30px) clamp(17px, 12.4225px + 1.2207vw, 30px); } @media (width >= 1200px) { .footer__inner { max-width: 1440px; } } .footer__logo-link { align-self: flex-start; } .footer__logo { display: block; width: auto; max-width: 200px; height: auto; } .footer__meta { display: flex; flex-direction: column; gap: 30px; } .footer__copyright { color: var(--color-text-brand); font-size: var(--font-size-body); line-height: var(--line-height-body); } .footer__links { display: flex; flex-wrap: wrap; gap: 6px 8px; } .footer__links li { display: flex; align-items: center; } .footer__links li:not(:last-child)::after { content: ""; width: 2px; height: 20px; margin-left: 8px; background: var(--color-poppy-100); } .footer__links a { color: var(--color-text-brand); font-size: var(--font-size-body); line-height: var(--line-height-body); text-decoration: underline; } .footer__links a:hover { text-decoration: none; } .footer__links .ot-sdk-show-settings { display: inline-flex; align-items: center; gap: 8px; } .footer__links .ot-sdk-show-settings::after { content: ""; flex: none; width: 30px; height: 16px; background: url("/static/img/privacy-choices-toggle.979a4ca39824.svg") no-repeat center/30px 16px; } .footer__legal { color: var(--color-text-brand); font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .footer__legal .rich-text p { margin: 4px 0 0; } @media (width >= 1275px) { .footer__meta { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } .footer__copyright { white-space: nowrap; } .footer__links { flex-wrap: nowrap; justify-content: flex-end; } } .exit-popup { position: fixed; inset: 0; display: grid; place-items: center; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 16px; overflow: auto; border: 0; background: rgba(4, 24, 38, 0.6); overscroll-behavior: contain; } .exit-popup:not([open]) { display: none; } .exit-popup::backdrop { background: transparent; } .exit-popup__card { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 948px; padding: 24px 22px 40px; background: var(--color-white); border-radius: 16px; box-shadow: var(--shadow-modal); } @media (width >= 700px) { .exit-popup__card { padding: 24px 24px 80px; } } .exit-popup__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; max-width: 100%; } @media (width >= 700px) { .exit-popup__content { align-items: center; } } .exit-popup__close { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 24px; height: 24px; padding: 0; color: var(--color-text-primary); background: transparent; border: 0; border-radius: 4px; cursor: pointer; } .exit-popup__close svg { display: block; width: 24px; height: 24px; } .exit-popup__close:hover { opacity: 0.7; } .exit-popup__title { width: 240px; max-width: 100%; margin: 0; color: var(--color-text-primary); font-family: var(--font-family-body); font-weight: 700; font-size: 18px; line-height: 22px; letter-spacing: -1px; overflow-wrap: break-word; } @media (width >= 700px) { .exit-popup__title { width: 100%; line-height: 30px; text-align: center; } } .exit-popup__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } @media (width >= 700px) { .exit-popup__actions { flex-direction: row; justify-content: center; gap: 32px; } } .exit-popup__continue, .exit-popup__stay { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: var(--font-family-body); text-decoration: none; cursor: pointer; } .exit-popup__continue svg, .exit-popup__stay svg { display: block; flex: none; } @media (width >= 700px) { .exit-popup__continue, .exit-popup__stay { width: auto; } } .exit-popup__continue { padding: 10px 20px; color: var(--color-text-inverse); background: var(--color-deep-sea-green-100); border: 0; border-radius: 30px; font-weight: 600; font-size: clamp(16px, round(up, 14.5915px + 0.3756vw, 1px), 20px); line-height: normal; text-align: center; } .exit-popup__continue .exit-popup__tm { font-weight: 400; font-size: 0.9em; letter-spacing: normal; vertical-align: 0.2em; } .exit-popup__continue:hover { filter: brightness(1.08); } .exit-popup__stay { min-height: 52px; padding: 12px 40px; color: var(--color-text-primary); background: transparent; border: 2px solid var(--color-black); border-radius: 32px; font-weight: 400; font-size: clamp(18px, round(up, 17.2958px + 0.1878vw, 1px), 20px); line-height: 24px; letter-spacing: -0.5px; } .exit-popup__stay svg { width: 15px; height: 15px; } .exit-popup__stay:hover { color: var(--color-text-inverse); background: var(--color-black); } @media (width >= 700px) { .exit-popup__stay { min-height: 0; color: var(--color-text-muted); border-color: var(--color-stone-100); border-radius: 30px; font-weight: 600; letter-spacing: normal; } .exit-popup__stay svg { width: 16px; height: 16px; } .exit-popup__stay:hover { color: var(--color-text-inverse); background: var(--color-stone-100); } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; margin: 0; padding: 8px 16px; overflow: visible; clip: auto; white-space: normal; color: #fff; background: #000; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-focus-ring-contrast); }