:root { --color-primary:#C305ED; --color-secondary:#36BFD3; --color-tertiary:#27E997; --black:#040C24; --grey900:#161E33; --grey800:#31384D; --grey600:#606B8A; --grey400:#B8C3E6; --grey200:#CED7F2; --grey100:#F0F3FC; --white:#FFFFFF; --color-primary-rgb: 195, 5, 237; --color-secondary-rgb: 54, 191, 211; --color-tertiary-rgb: 39, 233, 151; --black-rgb: 4, 12, 36; --white-rgb: 255, 255, 255; /* --black:#040C24; --grey900:#161E33; --grey800:#31384D; --grey600:#606B8A; --grey400:#B8C3E6; --grey200:#CED7F2; --grey100:#F0F3FC; --white:#FFFFFF; */ --color-darker-primary: #5c0086; --color-darker-secondary: #003f53; --bg-gradient-primary:linear-gradient(to right, var(--black), var(--color-darker-primary)); --bg-gradient-secondary:linear-gradient(to right, var(--black), var(--color-darker-secondary)); --text-gradient-primary:linear-gradient(to right, var(--color-primary), var(--color-secondary)); --text-gradient-secondary:linear-gradient(to right, var(--color-secondary), var(--color-tertiary)); --body-bg-color: var(--white); --body-color: var(--grey800); --heading-color: var(--black); } :root{ --font-family-base: "Lufga" ; --font-family-headings: "Lufga" ; --line-height-base: 1.7; --heading-line-height: 1; --heading-font-weight: 900; --heading-letter-spacing: -0.04em; --caption-opacity: 0.6; /* ====== font size generator ====== */ --font-size-subtitle: 1.125rem; ; --font-size-lead-text: 1.125rem; ; --font-size-h1: 2.75rem; ; --font-size-caption: 0.75rem; ; --font-size-h2: 2.5rem; ; --font-size-text-body-2: 0.875rem; ; --font-size-h3: 2rem; ; --font-size-text-body: 1rem; ; --font-size-h4: 1.75rem; ; --font-size-h5: 1.25rem; ; --font-size-h6: 0.875rem; ; } @media screen and (min-width: 60rem) { :root{ /*TODO : voir si on peut pas automatiser ça */ --font-size-subtitle: 1.5rem; ; --font-size-lead-text: 1.375rem; ; --font-size-h1: 5rem; ; --font-size-caption: 0.875rem; ; --font-size-h2: 4rem; ; --font-size-text-body-2: 0.875rem; ; --font-size-h3: 3.25rem; ; --font-size-text-body: 1rem; ; --font-size-h4: 2rem; ; --font-size-h5: 1.5rem; ; --font-size-h6: 1rem; ; } } @media screen and (min-width: 85rem) { :root{ /*TODO : voir si on peut pas automatiser ça */ --font-size-subtitle: 2rem; ; --font-size-lead-text: 1.5rem; ; --font-size-h1: 6.5rem; ; --font-size-caption: 0.875rem; ; --font-size-h2: 5.5rem; ; --font-size-text-body-2: 1rem; ; --font-size-h3: 3.75rem; ; --font-size-text-body: 1.25rem; ; --font-size-h4: 2.625rem; ; --font-size-h5: 1.75rem; ; --font-size-h6: 1.25rem; ; } } :root { --page-padding-x: 0px; --container-max-width: 48rem; --container-small-max-width: var(--container-max-width); --container-padding-x: 1rem; --spacer1: 1rem; --spacer1-half: calc(var(--spacer1) * 1.5); --spacer2: calc(var(--spacer1) * 2); --spacer3: calc(var(--spacer1) * 3); --spacer4: calc(var(--spacer1) * 4); --spacer5: calc(var(--spacer1) * 5); --spacer6: calc(var(--spacer1) * 6); --spacer7: calc(var(--spacer1) * 7); --spacer8: calc(var(--spacer1) * 8); --spacer10: calc(var(--spacer1) * 10); --spacer-half: calc(var(--spacer1) * 1/2); --header-z: 10; --menu-mobile-z: 100; --modal-z: 1000; --header-height: 4rem; --header-padding-x: 1rem; --header-sticky-bg: var(--white); --header-sticky-height: 4.5rem; --header-sticky-shadow: 0 0 0.5rem 0 rgba(var(--black-rgb), 0.2); --menu-hamburger-size: 3rem; --menu-hamburger-padding: 0.5rem; --menu-hamburger-color: var(--color-primary); --menu-mobile-width: 25rem; --menu-mobile-padding-x: 2rem; --menu-item-padding-x: 0; --menu-item-padding-y: 0; --menu-item-font-size: 1.75rem; --menu-item-color: var(--black); --menu-panel-padding-y: 4rem; --bordered-group-padding-x: 2rem; --bordered-group-gradient: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); --double-border-radius: var(--border-radius-base); --double-border-color: var(--border-color-base); --double-border-color-hover: rgba(var(--color-secondary-rgb), 0.5); --double-border-width: var(--border-width-base); --double-border-offset-hover: 0.25rem; --content-header-margin-top: var(--spacer5); --content-header-margin-bottom: var(--spacer3); --content-intro-image-height: 20rem; --section-padding-y: var(--spacer5); --grid-gutter: 3rem; /* V rythm variants */ --dnd-vertical-rythm-base: var(--spacer3); --dnd-vertical-rythm-contained: var(--spacer2); --dnd-vertical-rythm-sm: var(--spacer1); /* Actual variable to use and redefine in stylesheets */ --dnd-vertical-rythm: var(--dnd-vertical-rythm-base); } @media screen and (min-width: 60rem) { :root { --page-padding-x: 1rem; --container-max-width: 60rem; --container-small-max-width: 50rem; --header-height: 7.5rem; --header-padding-x: 2rem; --menu-item-padding-x: 1rem; --menu-item-padding-y: 0.5rem; --menu-item-font-size: 0.875rem; --menu-panel-padding-y: 7rem; --bordered-group-padding-x: 2.5rem; --content-header-margin-top: var(--spacer4); --content-intro-image-height: 28rem; --section-padding-y: var(--spacer10); /* V rythm variants */ --dnd-vertical-rythm-base: var(--spacer4); --dnd-vertical-rythm-contained: var(--spacer3); --dnd-vertical-rythm-sm: var(--spacer1); } } @media screen and (min-width: 85rem) { :root { --container-max-width: 75rem; --container-small-max-width: 50rem; --content-intro-image-height: 35rem; } } :root{ --border-width-base: 1px; --border-width-lg: 2px; --border-width-xl: 3px; --border-color-base: var(--grey400); --border-color-light: var(--grey200); --border-radius-base: 1rem; --border-radius-sm: 0.5rem; --border-radius-lg: 1.5rem; --border-radius-xl: 2.5rem; --custom-scrollbar-width: 8px; --custom-scrollbar-thumb-color: rgba(var(--black-rgb), 0.2); --custom-scrollbar-rail-color: rgba(var(--black-rgb), 0.1); --btn-height: 4rem; --btn-height-sm: 3rem; --btn-height-lg: 5rem; --btn-padding-x: 2em; --btn-bg: transparent; --btn-color: var(--color-primary); --btn-border-color: var(--grey400); --btn-line-height: var(--heading-line-height); --btn-font-family: var(--font-family-headings); --btn-font-size: 0.875rem; --btn-font-weight: 700; --input-height : var(--btn-height); --input-height-sm : var(--btn-height-sm); --input-height-lg : var(--btn-height-lg); --input-padding-x : 1rem; --input-padding-x-sm : 0.5rem; --input-padding-x-lg : 1.5rem; --input-bg : rgba(var(--black-rgb), 0.1); --input-bg-focus : var(--input-bg); --input-bg-disabled : rgba(var(--black-rgb), 0.02); --input-border-width : var(--border-width-base); --input-border-color : var(--border-color-base); --input-border-color-focus : var(--color-secondary); --input-border-color-disabled : var(--input-border-color); --input-border-color-valid : var(--color-tertiary); --input-border-color-invalid : var(--color-primary); --input-color : var(--body-color); --input-color-disabled : var(--grey600); --input-placeholder-color : var(--grey600); --input-placeholder-font-style: italic; --input-border-radius : var(--border-radius-sm); --input-border-radius-sm : calc(var(--border-radius-sm) / 2); --input-border-radius-lg : var(--input-border-radius); --input-font-size : 1rem; --input-font-size-sm : 0.875rem; --input-font-size-lg : 1.125rem; --input-font-family : var(--font-family-base); --input-font-weight : 400; --input-text-transform : none; --input-letter-spacing : normal; --label-margin-bottom : 0.25rem; --label-color : currentColor; --label-line-height : 1; --label-font-family : var(--font-family-base); --label-font-size : var(--font-size-caption); --label-font-weight : 500; --label-text-transform : none; --label-letter-spacing : normal; --form-group-margin-y : var(--spacer1); --textarea-padding-y : var(--spacer1); --select-bg-size : 8px 12px; /*In pixels because image dimensions*/ --select-indicator : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606B8A' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); --input-file-button-bg : var(--grey300); --input-file-button-border-color: var(--input-file-button-bg); --input-file-button-color : var(--grey800); --input-togglable-label-line-height : var(--line-height-base); --input-togglable-label-font-size : var(--input-font-size); --input-togglable-label-margin-y : 0.25rem; --input-togglable-indicator-size : 1.25rem; --input-togglable-indicator-margin-x : 0.5rem; --input-togglable-indicator-icon-size : 60%; --input-togglable-indicator-border-width : var(--input-border-width); --input-togglable-indicator-bg : var(--input-bg); --input-togglable-indicator-border-color : var(--input-border-color); --input-togglable-indicator-color : var(--input-color); --input-togglable-indicator-bg-checked : var(--color-secondary); --input-togglable-indicator-border-color-checked : var(--input-togglable-indicator-bg-checked); --input-checkbox-indicator-border-radius : 0.25rem; --input-checkbox-indicator-icon-checked : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); --input-checkbox-indicator-bg-indeterminate : var(--color-primary); --input-checkbox-indicator-border-color-indeterminate: var(--input-checkbox-indicator-bg-indeterminate); --input-checkbox-indicator-color-indeterminate : var(--white); --input-checkbox-indicator-icon-indeterminate : url("data: image/svg+xml;charset = utf8,%3Csvg xmlns = 'http: //www.w3.org/2000/svg' viewBox = '0 0 4 4'%3E%3Cpath stroke='%23C305ED' d = 'M0 2h4'/%3E%3C/svg%3E"); --input-checkbox-indicator-indeterminate-box-shadow : none; --input-radio-indicator-border-radius : 50%; --input-radio-indicator-icon-checked : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E"); --form-help-color : var(--grey600); --form-help-font-size : 0.875rem; --form-help-error-color: var(--color-primary); --form-legal-color : var(--grey600); --form-legal-font-size: 0.875rem; --step-form-outer-height: 15rem; --step-form-progress-height: 0.25rem; --step-form-theme-color: var(--color-tertiary); --image-filter-grayscale: 1; --image-filter-contrast: 60%; --image-filter-brightness: 130%; --image-highlighter-bg: var(--color-secondary); --tag-bg: var(--color-primary); --tag-color: var(--white); --tag-togglable-shadow-color: var(--black-rgb); --tag-font-size: 0.875rem; --tag-font-size-sm: 0.75rem; --tag-font-size-lg: 1rem; --badge-bg: var(--color-primary); --badge-color: var(--white); --badge-font-size: 0.625rem; --author-avatar-size-base: 3rem; --author-avatar-size-sm: 1.5rem; --author-avatar-size-lg: 5rem; --likes-font-size: var(--font-size-text-body-2); --likes-icon-size: 2rem; --likes-color-base: var(--grey600); --likes-color-hover: var(--color-primary); --likes-color-focus: var(--body-color); --likes-color-active: var(--color-secondary); --listing-vertical-rythm: var(--spacer3); --listing-item-border-gradient: linear-gradient(to bottom, var(--color-secondary), var(--color-tertiary)); --listing-item-image-size: 6rem; --listing-item-image-size-sm: var(--listing-item-image-size); --listing-item-image-size-xs: 4rem; --listing-item-image-size-lg: 13rem; --listing-item-image-radius: var(--border-radius-base); --listing-item-gutter: var(--spacer2); --listing-item-vertical-rythm: 0.75rem; --listing-item-hover-color: var(--color-tertiary); --card-image-height: 15rem; --card-image-overlay-height: 100%; --card-image-overlay-opacity: 0.7; --card-padding-x: var(--spacer1-half); --card-padding-y: var(--spacer1-half); --card-footer-padding-y: var(--spacer-half); --card-bg: var(--body-bg-color); --card-border-width: var(--border-width-base); --card-border-color: var(--border-color-base); --card-border-radius: var(--border-radius-base); --card-content-vertical-rythm: 0.5rem; --card-color: var(--body-color); --card-font-size: var(--font-size-text-body-2); --modal-overlay-background : rgba(var(--black-rgb), 0.6); --modal-container-width-base: 90%; --modal-container-width-md: 80%; --modal-container-width-lg: 80%; --modal-container-max-width: 40rem; --modal-body-padding-base : 2.5rem; --modal-body-padding-lg : 4rem; --logos-list-image-size: 3rem; --logos-list-spacer: var(--spacer-half); } :root { --transition-duration-base: 400ms; --transition-easing-base: ease-in-out; --menu-delay: 200ms; --ease-out-strong: cubic-bezier(0,.57,.1,1); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } ul[role='list'], ol[role='list'] { padding-left: 0; list-style: none; } html:focus-within { scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; } a:not([class]) { text-decoration-skip-ink: auto; } img, picture, video, canvas, svg { display: block; max-width: 100%; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } input, button, textarea, select { font: inherit; } fieldset{ width: 100%; } button{ background-color: transparent; border: none; box-shadow: none; cursor: pointer; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaRegular.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaRegular.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaRegular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaLight.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaLight.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaLight.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaMedium.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaMedium.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaMedium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaSemiBold.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaSemiBold.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaSemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBold.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBold.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lufga"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBlack.woff2") format("woff2"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBlack.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/lufga/LufgaBlack.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "iconfont"; src:url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/iconfont/iconfont.woff") format("woff"), url("https://22288365.fs1.hubspotusercontent-na1.net/hubfs/22288365/fonts/iconfont/iconfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } [class^="icon-"], [class*=" icon-"]{ display: block; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]::before, [class*=" icon-"]::before, .icon-before::before, .icon-after::after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "iconfont" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .icon-caret-down:before { content: "\ea0a"; } .icon-caret-up:before { content: "\ea0b"; } .icon-caret-y:before { content: "\ea0c"; } .icon-code:before { content: "\ea0d"; } .icon-facebook:before { content: "\ea0e"; } .icon-game:before { content: "\ea0f"; } .icon-hubspot:before { content: "\ea10"; } .icon-integration:before { content: "\ea11"; } .icon-linkedin:before { content: "\ea12"; } .icon-metal:before { content: "\ea13"; } .icon-package:before { content: "\ea14"; } .icon-twitch:before { content: "\ea15"; } .icon-twitter:before { content: "\ea16"; } .icon-activity:before { content: "\e900"; } .icon-airplay:before { content: "\e901"; } .icon-alert-circle:before { content: "\e902"; } .icon-alert-octagon:before { content: "\e903"; } .icon-alert-triangle:before { content: "\e904"; } .icon-align-center:before { content: "\e905"; } .icon-align-justify:before { content: "\e906"; } .icon-align-left:before { content: "\e907"; } .icon-align-right:before { content: "\e908"; } .icon-anchor:before { content: "\e909"; } .icon-aperture:before { content: "\e90a"; } .icon-archive:before { content: "\e90b"; } .icon-arrow-up-circle:before { content: "\e90c"; } .icon-arrow-down-circle:before { content: "\e90d"; } .icon-arrow-left-circle:before { content: "\e90e"; } .icon-arrow-right-circle:before { content: "\e90f"; } .icon-arrow-up:before { content: "\e910"; } .icon-arrow-down:before { content: "\e911"; } .icon-arrow-left:before { content: "\e912"; } .icon-arrow-right:before { content: "\e913"; } .icon-arrow-up-left:before { content: "\e914"; } .icon-arrow-down-left:before { content: "\e915"; } .icon-arrow-up-right:before { content: "\e916"; } .icon-arrow-down-right:before { content: "\e917"; } .icon-at-sign:before { content: "\e918"; } .icon-award:before { content: "\e919"; } .icon-bar-chart-2:before { content: "\e91a"; } .icon-bar-chart:before { content: "\e91b"; } .icon-battery-charging:before { content: "\e91c"; } .icon-battery:before { content: "\e91d"; } .icon-bell-off:before { content: "\e91e"; } .icon-bell:before { content: "\e91f"; } .icon-bluetooth:before { content: "\e920"; } .icon-bold:before { content: "\e921"; } .icon-book-open:before { content: "\e922"; } .icon-book:before { content: "\e923"; } .icon-bookmark:before { content: "\e924"; } .icon-box:before { content: "\e925"; } .icon-briefcase:before { content: "\e926"; } .icon-calendar:before { content: "\e927"; } .icon-camera-off:before { content: "\e928"; } .icon-camera:before { content: "\e929"; } .icon-cast:before { content: "\e92a"; } .icon-check-circle:before { content: "\e92b"; } .icon-check-square:before { content: "\e92c"; } .icon-check:before { content: "\e92d"; } .icon-chevron-up:before { content: "\e92e"; } .icon-chevron-down:before { content: "\e92f"; } .icon-chevron-left:before { content: "\e930"; } .icon-chevron-right:before { content: "\e931"; } .icon-chevrons-up:before { content: "\e932"; } .icon-chevrons-down:before { content: "\e933"; } .icon-chevrons-left:before { content: "\e934"; } .icon-chevrons-right:before { content: "\e935"; } .icon-chrome:before { content: "\e936"; } .icon-circle:before { content: "\e937"; } .icon-clipboard:before { content: "\e938"; } .icon-clock:before { content: "\e939"; } .icon-cloud-drizzle:before { content: "\e93a"; } .icon-cloud-lightning:before { content: "\e93b"; } .icon-cloud-off:before { content: "\e93c"; } .icon-cloud-rain:before { content: "\e93d"; } .icon-cloud-snow:before { content: "\e93e"; } .icon-cloud:before { content: "\e93f"; } .icon-code1:before { content: "\e940"; } .icon-codepen:before { content: "\e941"; } .icon-command:before { content: "\e942"; } .icon-compass:before { content: "\e943"; } .icon-copy:before { content: "\e944"; } .icon-corner-down-left:before { content: "\e945"; } .icon-corner-down-right:before { content: "\e946"; } .icon-corner-left-down:before { content: "\e947"; } .icon-corner-left-up:before { content: "\e948"; } .icon-corner-right-down:before { content: "\e949"; } .icon-corner-right-up:before { content: "\e94a"; } .icon-corner-up-left:before { content: "\e94b"; } .icon-corner-up-right:before { content: "\e94c"; } .icon-cpu:before { content: "\e94d"; } .icon-credit-card:before { content: "\e94e"; } .icon-crop:before { content: "\e94f"; } .icon-crosshair:before { content: "\e950"; } .icon-database:before { content: "\e951"; } .icon-delete:before { content: "\e952"; } .icon-disc:before { content: "\e953"; } .icon-dollar-sign:before { content: "\e954"; } .icon-download-cloud:before { content: "\e955"; } .icon-download:before { content: "\e956"; } .icon-droplet:before { content: "\e957"; } .icon-edit-2:before { content: "\e958"; } .icon-edit-3:before { content: "\e959"; } .icon-edit:before { content: "\e95a"; } .icon-external-link:before { content: "\e95b"; } .icon-eye-off:before { content: "\e95c"; } .icon-eye:before { content: "\e95d"; } .icon-facebook1:before { content: "\e95e"; } .icon-fast-forward:before { content: "\e95f"; } .icon-feather:before { content: "\e960"; } .icon-file-minus:before { content: "\e961"; } .icon-file-plus:before { content: "\e962"; } .icon-file-text:before { content: "\e963"; } .icon-file:before { content: "\e964"; } .icon-film:before { content: "\e965"; } .icon-filter:before { content: "\e966"; } .icon-flag:before { content: "\e967"; } .icon-folder-minus:before { content: "\e968"; } .icon-folder-plus:before { content: "\e969"; } .icon-folder:before { content: "\e96a"; } .icon-gift:before { content: "\e96b"; } .icon-git-branch:before { content: "\e96c"; } .icon-git-commit:before { content: "\e96d"; } .icon-git-merge:before { content: "\e96e"; } .icon-git-pull-request:before { content: "\e96f"; } .icon-github:before { content: "\e970"; } .icon-gitlab:before { content: "\e971"; } .icon-globe:before { content: "\e972"; } .icon-grid:before { content: "\e973"; } .icon-hard-drive:before { content: "\e974"; } .icon-hash:before { content: "\e975"; } .icon-headphones:before { content: "\e976"; } .icon-heart:before { content: "\e977"; } .icon-help-circle:before { content: "\e978"; } .icon-home:before { content: "\e979"; } .icon-image:before { content: "\e97a"; } .icon-inbox:before { content: "\e97b"; } .icon-info:before { content: "\e97c"; } .icon-instagram:before { content: "\e97d"; } .icon-italic:before { content: "\e97e"; } .icon-layers:before { content: "\e97f"; } .icon-layout:before { content: "\e980"; } .icon-life-buoy:before { content: "\e981"; } .icon-link-2:before { content: "\e982"; } .icon-link:before { content: "\e983"; } .icon-linkedin1:before { content: "\e984"; } .icon-list:before { content: "\e985"; } .icon-loader:before { content: "\e986"; } .icon-lock:before { content: "\e987"; } .icon-log-in:before { content: "\e988"; } .icon-log-out:before { content: "\e989"; } .icon-mail:before { content: "\e98a"; } .icon-map-pin:before { content: "\e98b"; } .icon-map:before { content: "\e98c"; } .icon-maximize-2:before { content: "\e98d"; } .icon-maximize:before { content: "\e98e"; } .icon-menu:before { content: "\e98f"; } .icon-message-circle:before { content: "\e990"; } .icon-message-square:before { content: "\e991"; } .icon-mic-off:before { content: "\e992"; } .icon-mic:before { content: "\e993"; } .icon-minimize-2:before { content: "\e994"; } .icon-minimize:before { content: "\e995"; } .icon-minus-circle:before { content: "\e996"; } .icon-minus-square:before { content: "\e997"; } .icon-minus:before { content: "\e998"; } .icon-monitor:before { content: "\e999"; } .icon-moon:before { content: "\e99a"; } .icon-more-horizontal:before { content: "\e99b"; } .icon-more-vertical:before { content: "\e99c"; } .icon-move:before { content: "\e99d"; } .icon-music:before { content: "\e99e"; } .icon-navigation-2:before { content: "\e99f"; } .icon-navigation:before { content: "\e9a0"; } .icon-octagon:before { content: "\e9a1"; } .icon-package1:before { content: "\e9a2"; } .icon-paperclip:before { content: "\e9a3"; } .icon-pause-circle:before { content: "\e9a4"; } .icon-pause:before { content: "\e9a5"; } .icon-percent:before { content: "\e9a6"; } .icon-phone-call:before { content: "\e9a7"; } .icon-phone-forwarded:before { content: "\e9a8"; } .icon-phone-incoming:before { content: "\e9a9"; } .icon-phone-missed:before { content: "\e9aa"; } .icon-phone-off:before { content: "\e9ab"; } .icon-phone-outgoing:before { content: "\e9ac"; } .icon-phone:before { content: "\e9ad"; } .icon-pie-chart:before { content: "\e9ae"; } .icon-play-circle:before { content: "\e9af"; } .icon-play:before { content: "\e9b0"; } .icon-plus-circle:before { content: "\e9b1"; } .icon-plus-square:before { content: "\e9b2"; } .icon-plus:before { content: "\e9b3"; } .icon-pocket:before { content: "\e9b4"; } .icon-power:before { content: "\e9b5"; } .icon-printer:before { content: "\e9b6"; } .icon-radio:before { content: "\e9b7"; } .icon-refresh-ccw:before { content: "\e9b8"; } .icon-refresh-cw:before { content: "\e9b9"; } .icon-repeat:before { content: "\e9ba"; } .icon-rewind:before { content: "\e9bb"; } .icon-rotate-ccw:before { content: "\e9bc"; } .icon-rotate-cw:before { content: "\e9bd"; } .icon-rss:before { content: "\e9be"; } .icon-save:before { content: "\e9bf"; } .icon-scissors:before { content: "\e9c0"; } .icon-search:before { content: "\e9c1"; } .icon-send:before { content: "\e9c2"; } .icon-server:before { content: "\e9c3"; } .icon-settings:before { content: "\e9c4"; } .icon-share-2:before { content: "\e9c5"; } .icon-share:before { content: "\e9c6"; } .icon-shield-off:before { content: "\e9c7"; } .icon-shield:before { content: "\e9c8"; } .icon-shopping-bag:before { content: "\e9c9"; } .icon-shopping-cart:before { content: "\e9ca"; } .icon-shuffle:before { content: "\e9cb"; } .icon-sidebar:before { content: "\e9cc"; } .icon-skip-back:before { content: "\e9cd"; } .icon-skip-forward:before { content: "\e9ce"; } .icon-slack:before { content: "\e9cf"; } .icon-slash:before { content: "\e9d0"; } .icon-sliders:before { content: "\e9d1"; } .icon-smartphone:before { content: "\e9d2"; } .icon-speaker:before { content: "\e9d3"; } .icon-square:before { content: "\e9d4"; } .icon-star:before { content: "\e9d5"; } .icon-stop-circle:before { content: "\e9d6"; } .icon-sun:before { content: "\e9d7"; } .icon-sunrise:before { content: "\e9d8"; } .icon-sunset:before { content: "\e9d9"; } .icon-tablet:before { content: "\e9da"; } .icon-tag:before { content: "\e9db"; } .icon-target:before { content: "\e9dc"; } .icon-terminal:before { content: "\e9dd"; } .icon-thermometer:before { content: "\e9de"; } .icon-thumbs-down:before { content: "\e9df"; } .icon-thumbs-up:before { content: "\e9e0"; } .icon-toggle-left:before { content: "\e9e1"; } .icon-toggle-right:before { content: "\e9e2"; } .icon-trash-2:before { content: "\e9e3"; } .icon-trash:before { content: "\e9e4"; } .icon-trending-down:before { content: "\e9e5"; } .icon-trending-up:before { content: "\e9e6"; } .icon-triangle:before { content: "\e9e7"; } .icon-truck:before { content: "\e9e8"; } .icon-tv:before { content: "\e9e9"; } .icon-twitter1:before { content: "\e9ea"; } .icon-type:before { content: "\e9eb"; } .icon-umbrella:before { content: "\e9ec"; } .icon-underline:before { content: "\e9ed"; } .icon-unlock:before { content: "\e9ee"; } .icon-upload-cloud:before { content: "\e9ef"; } .icon-upload:before { content: "\e9f0"; } .icon-user-check:before { content: "\e9f1"; } .icon-user-minus:before { content: "\e9f2"; } .icon-user-plus:before { content: "\e9f3"; } .icon-user-x:before { content: "\e9f4"; } .icon-user:before { content: "\e9f5"; } .icon-users:before { content: "\e9f6"; } .icon-video-off:before { content: "\e9f7"; } .icon-video:before { content: "\e9f8"; } .icon-voicemail:before { content: "\e9f9"; } .icon-volume-1:before { content: "\e9fa"; } .icon-volume-2:before { content: "\e9fb"; } .icon-volume-x:before { content: "\e9fc"; } .icon-volume:before { content: "\e9fd"; } .icon-watch:before { content: "\e9fe"; } .icon-wifi-off:before { content: "\e9ff"; } .icon-wifi:before { content: "\ea00"; } .icon-wind:before { content: "\ea01"; } .icon-x-circle:before { content: "\ea02"; } .icon-x-square:before { content: "\ea03"; } .icon-x:before { content: "\ea04"; } .icon-youtube:before { content: "\ea05"; } .icon-zap-off:before { content: "\ea06"; } .icon-zap:before { content: "\ea07"; } .icon-zoom-in:before { content: "\ea08"; } .icon-zoom-out:before { content: "\ea09"; } .subtitle { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 300; text-transform:none; subtitle; font-size: var(--font-size-subtitle); ; } .lead-text { ; font-family: var(--font-family-base); font-weight: 400; text-transform:none; lead_text; font-size: var(--font-size-lead-text); ; } h1, .h1 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h1); ; } .caption { ; font-family: var(--font-family-base); font-weight: 400; text-transform:none; caption; font-size: var(--font-size-caption); ; } h2, .h2 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h2); ; } .text-body-2 { ; font-family: var(--font-family-base); font-weight: 400; text-transform:none; text_body_; font-size: var(--font-size-text-body-2); ; } h3, .h3 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h3); ; } body, .text-body { ; font-family: var(--font-family-base); font-weight: 400; text-transform:none; text_body; font-size: var(--font-size-text-body); ; } h4, .h4 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h4); ; } h5, .h5 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h5); ; } h6, .h6 { ; line-height: var(--heading-line-height); color: var(--heading-color); font-family: var(--font-family-headings); font-weight: 900; text-transform:none; h; letter-spacing: -0.04em; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: var(--font-size-h6); ; } @media screen and (min-width: 60rem){ .caption--sm{ font-size: calc(var(--font-size-caption) * 0.875); } } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .text-uppercase { text-transform: uppercase; } .text-blur { filter: blur(0.2rem); } .text-code{ text-transform: uppercase; } .text-code::before { content: '<'; } .text-code::after { content: '>'; } .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-tertiary { color: var(--color-tertiary); } .text-black { color: var(--black); } .text-grey { color: var(--grey600); } .text-grey-light { color: var(--grey400); } .text-white { color: var(--white); } .text-gradient-primary{ display: inline-block; background:var(--text-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .text-gradient-secondary{ display: inline-block; background:var(--text-gradient-secondary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-tertiary { background-color: var(--color-tertiary); } .bg-black { background-color: var(--black); } .bg-grey { background-color: var(--grey600); } .bg-white { background-color: var(--white); } .bg-gradient-primary{ background: var(--bg-gradient-primary); } .bg-gradient-secondary{ background: var(--bg-gradient-secondary); } .bg-gradient-primary, .bg-gradient-secondary{ --heading-color: var(--white); --body-color: var(--grey200); } .invisible{ display: none !important; } .mt-0{ margin-top: 0 !important; } .mb-0{ margin-bottom: 0 !important; } .ml-0{ margin-left: 0 !important; } .mr-0{ margin-right: 0 !important; } .pt-0{ padding-top: 0 !important; } .pb-0{ padding-bottom: 0 !important; } .pl-0{ padding-left: 0 !important; } .pr-0{ padding-right: 0 !important; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @media screen and (min-width: 48rem){ .sr-only-md{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } } @media screen and (min-width: 60rem){ .sr-only-lg{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } } .btn, .hs-submit input[type="submit"]{ position: relative; z-index: 0; display: inline-flex; justify-content: center; align-items: center; text-align: center; max-width: 100%; height: var(--btn-height); padding: 0 var(--btn-padding-x); line-height: var(--btn-line-height); background-color: transparent; border: none; color: var(--btn-color); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); text-transform: uppercase; cursor: pointer; transition: color var(--transition-duration-base) var(--transition-easing-base); } .btn::before, .btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; height: 100%; border: var(--border-width-base, 1px) solid var(--btn-border-color); will-change: width, height; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base), border-color var(--transition-duration-base) var(--transition-easing-base), opacity var(--transition-duration-base) var(--transition-easing-base); } .btn::before { border-radius: 50rem; background-color: var(--btn-bg); } .btn:hover::before, .btn:hover::after, a:hover .btn::before, a:hover .btn::after { --btn-border-color: currentColor; } .btn:hover::before, a:hover .btn::before { width: calc(100% - 0.375rem); height: calc(100% - 0.375rem); } .btn:hover::after, a:hover .btn::after { width: calc(100% + 0.375rem); height: calc(100% + 0.375rem); opacity: 0.3; } .btn [class*="icon-"], .readmore [class*="icon-"]{ margin-right: 0.375em; font-size: 1.75em; } .btn--icon{ width: var(--btn-height); padding: 0; } .btn--icon [class*="icon-"]{ margin: 0; } .btn--primary{ --btn-color: var(--color-primary); } .btn--secondary{ --btn-color: var(--color-secondary); } .btn--tertiary{ --btn-color: var(--color-tertiary); } .btn--small, .btn--sm{ --btn-height: var(--btn-height-sm); } .btn--large, .btn--lg{ --btn-height: var(--btn-height-lg); } .btn--fullwidth{ display: flex; width: 100%; } @media screen and (max-width: 48rem){ .btn--mobile-fullwidth { display: flex; width: 100%; } } .btn--link{ color: var(--black); } .btn--link:hover, a:hover .btn--link{ color: var(--color-primary); } .btn--link::before, .btn--link::after{ content: none; } @media screen and (max-width: calc(60rem - 1px)){ .btn--back span{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } } .hs-submit input[type="submit"]{ color: var(--color-tertiary); border: var(--border-width-base, 1px) solid var(--btn-border-color); border-radius: 50rem; transition: color var(--transition-duration-base) var(--transition-easing-base), border-color var(--transition-duration-base) var(--transition-easing-base); } .hs-submit input[type="submit"]:hover{ border-color: var(--color-tertiary); } .readmore{ display: flex; align-items: center; color: var(--black); line-height: var(--btn-line-height); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); text-transform: uppercase; transition: color var(--transition-duration-base) var(--transition-easing-base); } .readmore:hover, a:hover .readmore{ color: var(--btn-color); } .readmore [class*="icon-"]{ color: var(--btn-color); transition: color var(--transition-duration-base) var(--transition-easing-base); } .readmore--primary{ --btn-color: var(--color-primary); } .readmore--secondary{ --btn-color: var(--color-secondary); } .readmore--tertiary{ --btn-color: var(--color-tertiary); } .readmore--white{ --btn-color: var(--white); } .readmore--black{ --btn-color: var(--black); } @media screen and (min-width: 60rem){ .readmore--icon [class*="icon-"]{ font-size: 2.5em; } } .social-buttons{ display: flex; flex-wrap: wrap; align-items: center; } .social-buttons > li{ margin-right: var(--spacer1); margin-top: var(--spacer1); } .social-buttons--center{ justify-content: center; } .social-buttons--center > li{ margin-right: calc(var(--spacer1) / 2); margin-left: calc(var(--spacer1) / 2); } input:focus, textarea:focus, select:focus{ outline: none; box-shadow: none; } .form-control, .hs-input{ display: block; width: 100%; height: var(--input-height); line-height: calc(var(--input-height) - var(--input-border-width)); padding: 0 var(--input-padding-x); border: none; border-bottom: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius) var(--input-border-radius) 0 0; background-color: var(--input-bg); color: var(--input-color); font-family: var(--input-font-family); font-size: var(--input-font-size); font-weight: var(--input-font-weight); transition: background-color var(--transition-duration-base) var(--transition-easing-base), border-color var(--transition-duration-base) var(--transition-easing-base), color var(--transition-duration-base) var(--transition-easing-base), box-shadow var(--transition-duration-base) var(--transition-easing-base); } .form-control::placeholder, .hs-input::placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-font-style); opacity: 1; } .form-control:focus, .form-control:focus-within, .form-control.is-focus, .hs-input:focus, .hs-input:focus-within{ border-color: var(--input-border-color-focus); background-color: var(--input-bg-focus); } .form-control:disabled, .form-control.is-disabled, .form-control[readonly], .hs-input:disabled, .hs-input[readonly]{ border-color: var(--input-border-color-disabled); background-color: var(--input-bg-disabled); color: var(--input-color-disabled); } .hs-input.error, .hs-input.invalid{ box-shadow: inset 0 0 0 var(--border-width-lg) rgba(var(--color-primary-rgb), 0.5); } .form-control--sm{ --input-height: var(--input-height-sm); --input-padding-x: var(--input-padding-x-sm); --input-border-radius: var(--input-border-radius-sm); --input-font-size: var(--input-font-size-sm); } .form-control--lg{ --input-height: var(--input-height-lg); --input-padding-x: var(--input-padding-x-lg); --input-border-radius: var(--input-border-radius-lg); --input-font-size: var(--input-font-size-lg); } select.form-control, select.hs-input{ padding-right: calc(var(--input-padding-x) + 1rem); background-color: var(--input-bg); background-image: var(--select-indicator); background-repeat: no-repeat; background-position: right var(--input-padding-x) center; background-size: var(--select-bg-size); appearance: none; } select.form-control option, select.hs-input option{ color: theme-color('black'); } textarea.form-control, textarea.hs-input{ height: auto; min-height: 8rem; line-height: var(--line-height-base); padding-top: var(--textarea-padding-y); padding-bottom: var(--textarea-padding-y); } .form-control[type="file"], .hs-input[type="file"]{ padding: 0 var(--input-padding-x) 0 0; } .form-control[type="file"]::file-selector-button, .form-control[type="file"]::-webkit-file-upload-button, .hs-input[type="file"]::file-selector-button, .hs-input[type="file"]::-webkit-file-upload-button{ position: relative; margin-right: 1rem; height: var(--input-height); line-height: var(--input-height); padding: 0 var(--spacer1); border: none; border-radius: inherit; background: var(--input-file-button-bg); color: var(--input-file-button-color); } .form-control[type="file"]::file-selector-button:hover, .form-control[type="file"]::file-selector-button:focus, .form-control[type="file"]::-webkit-file-upload-button:hover, .form-control[type="file"]::-webkit-file-upload-button:focus, .hs-input[type="file"]::file-selector-button:hover, .hs-input[type="file"]::file-selector-button:focus, .hs-input[type="file"]::-webkit-file-upload-button:hover, .hs-input[type="file"]::-webkit-file-upload-button:focus{ outline: none !important; box-shadow: none !important; cursor: pointer; } label:not([class]), .form-label, .hs-form-field label{ margin-bottom: var(--label-margin-bottom); display: block; line-height: var(--label-line-height); color: var(--label-color); font-family: var(--label-font-family); font-size: var(--label-font-size); font-weight: var(--label-font-weight); text-transform: var(--label-text-transform); letter-spacing: var(--label-letter-spacing); } label:not([class]) sup, .form-label sup, label .hs-form-required{ vertical-align: super; color: var(--color-primary); } .form-group{ margin-bottom: var(--form-group-margin-y); } .form-actions, .hs-submit{ margin-top: var(--form-group-margin-y); } .form-row{ --grid-gutter: 1px; display: flex; } .form-row > [class*="col-"]:where(:not(:first-child)) .form-control{ border-radius: 0; } @media screen and (min-width: 48rem){ .form-row > [class*="col-md-"] .form-control{ border-radius: 0; } .form-row > [class*="col-md-"]:first-child .form-control{ border-top-left-radius: var(--input-border-radius); } .form-row > [class*="col-md-"]:last-child .form-control{ border-top-right-radius: var(--input-border-radius); } } @media screen and (min-width: 60rem){ .form-row > [class*="col-lg-"] .form-control{ border-radius: 0; } .form-row > [class*="col-lg-"]:first-child .form-control{ border-top-left-radius: var(--input-border-radius); } .form-row > [class*="col-lg-"]:last-child .form-control{ border-top-right-radius: var(--input-border-radius); } } .hs-form-field + .hs-form-field { margin-top: var(--form-group-margin-y); } .hs-form-field .inputs-list{ padding-left: 0; list-style: none; } .form-togglable{ display: block; } .form-togglable--inline{ display: inline-block; margin-right: 1rem; } .form-togglable + .form-togglable{ margin-top: var(--input-togglable-label-margin-y); } .hs-form-booleancheckbox{ margin-top: var(--form-group-margin-y); } .form-togglable input[type="checkbox"], .form-togglable input[type="radio"], .hs-form-checkbox-display input[type="checkbox"], .hs-form-booleancheckbox-display input[type="checkbox"], .hs-form-radio-display input[type="radio"]{ position: absolute; margin:-1px; height:1px; width:1px; padding:0; border:0; overflow: hidden; clip: rect(0 0 0 0); } .form-togglable label, .hs-form-checkbox-display span, .hs-form-booleancheckbox-display span, .hs-form-radio-display span{ position: relative; padding-left: calc(var(--input-togglable-indicator-size) + var(--input-togglable-indicator-margin-x)); line-height: var(--input-togglable-label-line-height); font-family: var(--input-font-family); font-size: var(--input-togglable-label-font-size); font-weight: var(--input-font-weight); text-transform: var(--input-text-transform); letter-spacing: var(--input-letter-spacing); user-select: none; } .hs-form .legal-consent-container .hs-form-booleancheckbox-display span{ margin-left: 0; } .form-togglable label::before, .form-togglable label::after, .hs-form-checkbox-display span::before, .hs-form-checkbox-display span::after, .hs-form-booleancheckbox-display span::before, .hs-form-booleancheckbox-display span::after, .hs-form-radio-display span::before, .hs-form-radio-display span::after{ position: absolute; top: calc((var(--input-togglable-label-line-height) * var(--input-togglable-label-font-size)) - var(--input-togglable-indicator-size)); left: 0; transform: translateY(calc(-50% + 0.2em)); width: var(--input-togglable-indicator-size); height: var(--input-togglable-indicator-size); } .form-togglable label::before, .hs-form-checkbox-display span::before, .hs-form-booleancheckbox-display span::before, .hs-form-radio-display span::before{ content: ''; border: var(--input-togglable-indicator-border-width) solid var(--input-togglable-indicator-border-color); background-color: var(--input-togglable-indicator-bg); } .form-togglable label::after, .hs-form-checkbox-display span::after, .hs-form-booleancheckbox-display span::after, .hs-form-radio-display span::after{ background-repeat: no-repeat; background-position: center center; background-size: var(--input-togglable-indicator-icon-size); } .form-togglable input[type="checkbox"]:checked ~ label::before, .form-togglable input[type="radio"]:checked ~ label::before, .hs-form-checkbox-display input[type="checkbox"]:checked ~ span::before, .hs-form-booleancheckbox-display input[type="checkbox"]:checked ~ span::before, .hs-form-radio-display input[type="radio"]:checked ~ span::before{ background-color: var(--input-togglable-indicator-bg-checked); border-color: var(--input-togglable-indicator-border-color-checked); } .form-togglable input[type="checkbox"]:checked ~ label::after, .form-togglable input[type="radio"]:checked ~ label::after, .hs-form-checkbox-display input[type="checkbox"]:checked ~ span::after, .hs-form-booleancheckbox-display input[type="checkbox"]:checked ~ span::after, .hs-form-radio-display input[type="radio"]:checked ~ span::after{ content: ''; color: var(--input-togglable-indicator-color-checked); } .form-togglable input[type="checkbox"] ~ label::before, .hs-form-checkbox-display input[type="checkbox"] ~ span::before, .hs-form-booleancheckbox-display input[type="checkbox"] ~ span::before{ border-radius: var(--input-checkbox-indicator-border-radius); } .form-togglable input[type="checkbox"]:checked ~ label::after, .hs-form-checkbox-display input[type="checkbox"]:checked ~ span::after, .hs-form-booleancheckbox-display input[type="checkbox"]:checked ~ span::after{ background-image: var(--input-checkbox-indicator-icon-checked); } .form-togglable input[type="checkbox"]:indeterminate ~ label::before, .hs-form-checkbox-display input[type="checkbox"]:indeterminate ~ span::before, .hs-form-booleancheckbox-display input[type="checkbox"]:indeterminate ~ span::before{ background-color: var(--input-checkbox-indicator-bg-indeterminate); border-color: var(--input-checkbox-indicator-border-color-indeterminate); } .form-togglable input[type="checkbox"]:indeterminate ~ label::after, .hs-form-checkbox-display input[type="checkbox"]:indeterminate ~ span::after, .hs-form-booleancheckbox-display input[type="checkbox"]:indeterminate ~ span::after{ background-image: var(--input-checkbox-indicator-icon-indeterminate); } .form-togglable input[type="radio"] ~ label::before, .form-togglable input[type="radio"] ~ label::after, .hs-form-radio-display input[type="radio"] ~ span::before, .hs-form-radio-display input[type="radio"] ~ span::after{ border-radius: var(--input-radio-indicator-border-radius); } .form-togglable input[type="radio"]:checked ~ label::after, .hs-form-radio-display input[type="radio"]:checked ~ span::after{ background-image: var(--input-radio-indicator-icon-checked); } .form-togglable--legal label{ font-size: var(--form-legal-font-size); } .form-togglable--legal label::before, .form-togglable--legal label::after{ position: absolute; top: calc(((var(--input-togglable-label-line-height) * var(--form-legal-font-size)) - var(--input-togglable-indicator-size)) / 2); } .form-title{ margin-bottom: var(--form-group-margin-y); } .form-help, .hs-error-msg{ display: block; color: var(--form-help-color); font-size: var(--form-help-font-size); } .form-help--error, .hs-error-msg{ color: var(--form-help-error-color); } .form-legal, .legal-consent-container{ color: var(--form-legal-color); font-size: var(--form-legal-font-size); } .legal-consent-container{ margin-top: var(--spacer1); } .legal-consent-container .hs-form-booleancheckbox-display{ color: var(--input-color); } .hs-error-msgs{ padding: 0.25rem 0; list-style: none; } @keyframes fade-in { from{ opacity: 0; } to{ opacity: 1; } } .step-form{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; animation: fade-in var(--transition-duration-base) 500ms 1; animation-fill-mode: backwards; } .js-enabled .step-form{ height: var(--step-form-outer-height); } .step-form .hs-form fieldset{ max-width: 100%; } .step-form-outer{ flex: 0 0 auto; width: 100%; padding-left: var(--bordered-group-padding-x); border-left: var(--border-width-base) solid; border-image: var(--bordered-group-gradient) 1; } .js-enabled .step-form-container{ position: relative; height: var(--current-step-height, calc(var(--input-height) + (var(--label-font-size) * var(--label-line-height)))); overflow: clip; will-change: height; transition: height var(--transition-duration-base) var(--transition-easing-base); } .step-form-inner{ position: relative; transform: translate3d(0, var(--current-step-y-position), 0); transition: transform var(--transition-duration-base) var(--transition-easing-base); } .step-form-step + .step-form-step{ margin-top: var(--spacer1); } .js-enabled .step-form-step + .step-form-step{ margin-top: 0; } .js-enabled .step-form-step{ opacity: 0; transition: opacity var(--transition-duration-base) var(--transition-easing-base); } .js-enabled .step-form-step.is-current{ opacity: 1; } .step-form-step .form-group, .step-form-step .input{ position: relative; z-index: 0; } .js-enabled .step-form .form-group{ margin-bottom: 0; } .step-form-step .form-control, .step-form-step .hs-input{ padding-right: var(--input-height); } .step-form textarea{ resize: none; } .step-form select.form-control, .step-form select.hs-input{ background-position: right calc(var(--input-padding-x) + var(--input-height)) center; } .step-form-tools{ position: relative; display: flex; justify-content: flex-end; align-items: center; padding-top: 0.25rem; } .step-form-progress { width: 100%; height: var(--step-form-progress-height); background-color: var(--input-border-color); } .step-form-progress span { display: block; width: var(--current-progress, 0); height: 100%; background-color: var(--step-form-theme-color); will-change: width; transition: width var(--transition-duration-base) var(--transition-easing-base); } .step-form-counter{ display: inline-block; color: var(--body-color); font-size: var(--font-size-caption); opacity: var(--caption-opacity); } .step-form-prev{ margin-right: auto; display: inline-flex; align-items: center; color: var(--body-color); font-size: var(--font-size-caption); opacity: var(--caption-opacity); cursor: pointer; transition: opacity var(--transition-duration-base) var(--transition-easing-base), color var(--transition-duration-base) var(--transition-easing-base); } .step-form-prev [class*="icon"] { margin-right: 0.5em; font-size: 1.5em; } .step-form-prev:hover{ color: var(--white); opacity: 1; } .step-form-next, .step-form-submit{ position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: var(--input-height); height: var(--input-height); color: var(--step-form-theme-color); font-size: 2rem; cursor: pointer; transition: color var(--transition-duration-base) var(--transition-easing-base); } .step-form-next:hover, .step-form-submit:hover{ color: var(--white); } .copyurl .form-group{ display: flex; align-items: center; } .copyurl .form-group .copyurl-input{ flex: 1 1 0; } figure{ position: relative; z-index: 0; } .image-cover{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: -2; width: 100%; height: 100%; object-fit: cover; } .image-filter { will-change: filter; filter: grayscale(var(--image-filter-grayscale)) contrast(var(--image-filter-contrast)) brightness(var(--image-filter-brightness));; transition: filter var(--transition-duration-base) var(--transition-easing-base); } .image-highlighter{ position: absolute; top: 0; right: 0; width: 40%; aspect-ratio: 1 / 1; max-height: 90%; border-radius: 0 var(--double-border-radius) 0 var(--double-border-radius); background-color: var(--image-highlighter-bg); opacity: 0; transform: scale(0.5); transform-origin: right top; mix-blend-mode: color-burn; transition: opacity var(--transition-duration-base) var(--transition-easing-base), transform var(--transition-duration-base) var(--transition-easing-base); } .double-border > .image-highlighter{ top: var(--double-border-offset-hover); right: var(--double-border-offset-hover); } a:hover .image-highlighter{ opacity: 1; transform: scale(1); } .tag{ display: inline-flex; justify-content: center; align-items: center; text-align: center; padding: 0.25em 0.75em; border-radius: 50rem; background: var(--tag-bg); color: var(--tag-color); font-size: var(--tag-font-size); font-weight: 500; line-height: 1.2; } .tag--primary{ --tag-bg: var(--color-primary); --tag-color: var(--white); } .tag--secondary{ --tag-bg: var(--color-secondary); --tag-color: var(--white); } .tag--tertiary{ --tag-bg: var(--color-tertiary); --tag-color: rgba(var(--black-rgb), 0.8); } .tag--neutral{ --tag-bg: var(--grey200); --tag-color: var(--grey800); } .tag--sm{ --tag-font-size: var(--tag-font-size-sm); } .tag--lg{ --tag-font-size: var(--tag-font-size-lg); } .taglist { display: flex; flex-wrap: wrap; align-items: center; line-height: 1; } .taglist li{ margin-top: 0.25rem; margin-right: 0.5rem; margin-bottom: 0.25rem; } .taglist--colorloop li:nth-child(3n+1){ --tag-bg: var(--color-primary); --tag-color: var(--white); } .taglist--colorloop li:nth-child(3n+2){ --tag-bg: var(--color-secondary); --tag-color: var(--white); } .taglist--colorloop li:nth-child(3n+3){ --tag-bg: var(--color-tertiary); --tag-color: rgba(var(--black-rgb), 0.8); } .togglable-tag .tag{ --tag-bg: var(--grey200); --tag-color: var(--grey800); box-shadow: 0 0 0 var(--border-width-xl) transparent; cursor: pointer; transition: background-color var(--transition-duration-base) var(--transition-easing-base), color var(--transition-duration-base) var(--transition-easing-base), box-shadow var(--transition-duration-base) var(--transition-easing-base); } .togglable-tag:hover .tag, .togglable-tag input:focus ~ .tag{ --tag-bg: var(--grey400); --tag-color: var(--black); } .togglable-tag input:focus ~ .tag{ box-shadow: 0 0 0 var(--border-width-xl) rgba(var(--tag-togglable-shadow-color), 0.2); } .togglable-tag input:checked ~ .tag{ --tag-bg: var(--color-primary); --tag-color: var(--white); --tag-togglable-shadow-color: var(--color-primary-rgb); } .togglable-tag input:checked ~ .tag-secondary{ --tag-bg: var(--color-secondary); --tag-color: var(--white); --tag-togglable-shadow-color: var(--color-secondary-rgb); } .togglable-tag input:checked ~ .tag--tertiary{ --tag-bg: var(--color-tertiary); --tag-color: rgba(var(--black-rgb), 0.8); --tag-togglable-shadow-color: var(--color-tertiary-rgb); } .badge{ position: absolute; top: 0; right: 0; transform: translate(50%, -50%); display: inline-flex; justify-content: center; align-items: center; height: 1rem; min-width: 1rem; padding: 0 0.25em; border-radius: 50rem; background: var(--badge-bg); color: var(--badge-color); line-height: 1; font-size: var(--badge-font-size); font-weight: 500; } .badge--primary{ --badge-bg: var(--color-primary); --badge-color: var(--white); } .badge--secondary{ --badge-bg: var(--color-secondary); --badge-color: var(--white); } .badge--tertiary{ --badge-bg: var(--color-tertiary); --badge-color: var(--black); } .badge--small{ --badge-font-size: calc(var(--badge-font-size) * 0.875); } .badge--large{ --badge-font-size: calc(var(--badge-font-size) * 1.25); } .lang-switcher{ display: flex; } .lang-switcher a{ display: block; padding: var(--spacer-half); color: var(--body-color); font-family: var(--font-family-headings); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; transition: color var(--transition-duration-base) var(--transition-easing-base); } .lang-switcher a:hover{ color: var(--color-secondary); } .lang-switcher .is-active a{ color: var(--color-primary); } .pagination{ --btn-height: var(--btn-height-sm); --btn-color: var(--color-secondary); margin-top: var(--spacer3); display: flex; align-items: center; justify-content: space-between; } .pagination ul{ position: relative; z-index: 0; flex: 0 0 auto; display: flex; align-items: center; padding-left: 0; list-style: none; } .pagination ul li{ margin-right: calc(var(--border-width-base) * -1); } .pagination-item { position: relative; z-index: 0; display: inline-flex; justify-content: center; align-items: center; text-align: center; width: var(--btn-height); height: var(--btn-height); background-color: transparent; border: none; color: var(--btn-color); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); text-transform: uppercase; cursor: pointer; transition: color var(--transition-duration-base) var(--transition-easing-base); } .pagination li.active .pagination-item{ --btn-bg: var(--btn-color); color: var(--white); } .pagination-item::before, .pagination-item::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; height: 100%; border: var(--border-width-base, 1px) solid var(--btn-border-color); will-change: width, height; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base), border-color var(--transition-duration-base) var(--transition-easing-base), opacity var(--transition-duration-base) var(--transition-easing-base); } .pagination-item::before { border-radius: 50rem; background-color: var(--btn-bg); } .pagination-item:hover{ z-index: 1; } .pagination li:where(:not(.active)) .pagination-item:hover::before, .pagination li:where(:not(.active)) .pagination-item:hover::after{ --btn-border-color: currentColor; } .pagination li:where(:not(.active)) .pagination-item:hover::before{ width: calc(100% - 0.375rem); height: calc(100% - 0.375rem); } .pagination-next{ flex: 0 0 auto; } @media screen and (max-width: calc(48rem - 1px)){ .pagination-next{ display: none !important; } } @media screen and (min-width: 60rem){ .details--col{ display: flex; align-items: flex-start; } } .details-group + .details-group { margin-top: var(--spacer2); } @media screen and (min-width: 60rem){ .details--col .details-group{ flex: 1 1 0; margin-top: 0; } .details--col .details-group + .details-group{ margin-left: var(--grid-gutter); } } .details dt { margin-bottom: var(--spacer-half); display: block; line-height: var(--heading-line-height); color: var(--heading-color); font-size: var(--font-size-caption); font-weight: var(--heading-font-weight); text-transform: uppercase; } .details dd + dt { margin-top: var(--spacer2); } .details dd{ display: block; padding: var(--spacer-half) 0; line-height: 1.2; font-size: var(--font-size-caption); color: var(--body-color); } @media screen and (min-width: 60rem){ .filters--col{ display: flex; align-items: flex-start; } } .filters-title{ margin-bottom: var(--spacer1); display: block; } @media screen and (min-width: 60rem){ .filters--col .filters-title{ flex: 0 0 auto; } } .filters-group + .filters-group { margin-top: var(--spacer2); } @media screen and (min-width: 60rem){ .filters--col .filters-group{ flex: 1 1 0; margin-top: 0; margin-left: var(--grid-gutter); } } .filters-group-label { margin-bottom: var(--spacer1); display: block; line-height: var(--heading-line-height); color: var(--heading-color); font-size: var(--font-size-caption); font-weight: var(--heading-font-weight); text-transform: uppercase; } @media screen and (min-width: 60rem){ .filters-group--2col .filters-list{ margin-left: calc(var(--grid-gutter) / -2); margin-right: calc(var(--grid-gutter) / -2); display: flex; flex-wrap: wrap; justify-content: flex-start; } .filters-group--2col .filters-list > li{ flex: 0 0 50%; max-width: 50%; padding-left: calc(var(--grid-gutter) / 2); padding-right: calc(var(--grid-gutter) / 2); } } .filters-list a, .filters-check span{ display: flex; align-items: center; padding: var(--spacer-half) 0; line-height: 1.2; font-size: var(--font-size-caption); color: var(--body-color); cursor: pointer; transition: color var(--transition-duration-base) var(--transition-easing-base); } .filters-list a:hover, .filters-check:hover span{ color: var(--color-secondary); } .filters-list .is-active a, .filters-check input:checked ~ span{ color: var(--color-primary); } .filters-list .is-active a::after, .filters-check input:checked ~ span::after{ content: "\ea04"; margin-left: 0.5em; display: block; font-family: "iconfont" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--grey400); font-size: 1.1em; transition: color var(--transition-duration-base) var(--transition-easing-base), transform var(--transition-duration-base) var(--transition-easing-base); } .filters-list .is-active a:hover::after, .filters-check:hover input:checked ~ span::after{ color: var(--black); transform: rotate(90deg); } .show-hide-filters{ margin-bottom: var(--spacer1); } .filters-wrapper{ display: none; } @media screen and (min-width: 60rem){ .show-hide-filters{ display: none; } .filters-wrapper{ display: block; } } .author{ --author-avatar-size: var(--author-avatar-size-base); display: flex; align-items: center; color: var(--body-color); line-height: var(--line-height-base); } .author--sm{ --author-avatar-size: var(--author-avatar-size-sm); } .author--column{ flex-direction: column; align-items: flex-start; } .author-avatar{ margin-right: var(--spacer1); position: relative; z-index: 0; flex: 0 0 auto; width: var(--author-avatar-size); height: var(--author-avatar-size); border-radius: 50%; } .author--sm .author-avatar{ margin-right: var(--spacer-half); } .author--column .author-avatar{ --author-avatar-size: var(--author-avatar-size-lg); margin-bottom: var(--spacer1); } .author-avatar::before, .author-avatar::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: -1; width: 100%; height: 100%; box-shadow: 0 0 0 var(--double-border-width) var(--double-border-color); } .author-avatar::before{ border-radius: inherit; } .author-avatar img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; font-size: 1px; } .author-infos{ flex: 1 1 0; line-height: var(--heading-line-height); } .author--sm .author-infos{ display: flex; flex-wrap: wrap; align-items: center; } .author-name.caption{ color: var(--heading-color); font-weight: 500; } .author-name.caption.text-uppercase{ font-weight: var(--heading-font-weight); } .author--column .author-bio{ margin-top: var(--spacer1); } .author-article{ margin-top: 0.25rem; display: flex; align-items: center; opacity: var(--caption-opacity); } .author-article span, .author-article time{ display: flex; align-items: center; } .author-article span::after, .author-article time::after, .author--sm .author-article::before{ content: ''; margin: 0 0.5em; display: block; width: 0.25em; height: 0.25em; border-radius: 50%; background-color: currentColor; opacity: 0.5; } .author-article span:last-child::after, .author-article time:last-child::after{ content: none; } .likes-button{ --likes-color: var(--likes-color-base); display: flex; align-items: center; height: var(--btn-height); color: var(--likes-color); font-size: var(--likes-font-size); cursor: pointer; transition: color var(--transition-duration-base) var(--transition-easing-base); } .likes-button > * + *{ margin-left: var(--spacer-half); } .likes-button [class*="icon"]{ font-size: var(--likes-icon-size); } .likes-button:hover{ --likes-color: var(--likes-color-hover); } button.likes-button:where(:not(:hover)):focus, .likes-check input:where(:not(:hover)):focus ~ .likes-button{ --likes-color: var(--likes-color-focus); } button.likes-button.is-active, .likes-check input:checked ~ .likes-button{ --likes-color: var(--likes-color-active); } .card { --double-border-radius: var(--card-border-radius); position: relative; z-index: 0; display: flex; flex-direction: column; border-radius: var(--card-border-radius); background-color: var(--card-bg); color: var(--card-color); font-size: var(--card-font-size); } .card-image{ position: relative; z-index: -1; width: 100%; height: var(--card-image-height); } .card-image:where(:not(.double-border)){ border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; } .card-image img{ border-radius: inherit; } .card-body{ padding: var(--card-padding-y) var(--card-padding-x); border-radius: inherit; } .card-body > * + *{ margin-top: var(--card-content-vertical-rythm); } .card-heading{ display: flex; justify-content: space-between; } .card-heading > *:where(:not(:last-child)){ margin-right: var(--spacer-half); } @media screen and (min-width: 60rem){ .card-title.h5{ font-size: var(--font-size-h6); } } .card-description.caption{ font-size: inherit; } @media screen and (min-width: 60rem){ .card-description.caption{ font-size: var(--font-size-caption); } } .card-footer{ display: flex; flex-wrap: wrap; justify-content: space-between; border-top: var(--border-width-base) solid var(--border-color-light); padding: var(--card-footer-padding-y) var(--card-padding-x); } .card-footer > *:where(:not(:last-child)){ margin-right: var(--spacer-half); } .card-footer .taglist > li{ margin: 2px; } .card:hover{ --image-filter-contrast: 100%; --image-filter-brightness: 100%; } .card--border-radius-sm { --card-border-radius: var(--border-radius-sm); } .card--border-radius-lg { --card-border-radius: var(--border-radius-lg); } .card--border-radius-xl { --card-border-radius: var(--border-radius-xl); } .card--flat{ --card-bg: transparent; --card-padding-x: 0; } .card--flat .card-body{ padding-bottom: 0; } .card--bgimage{ --card-image-height: 100%; --card-padding-y: var(--card-padding-x); position: relative; z-index: 0; justify-content: flex-end; } .card--bgimage .card-image{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: -2; border-radius: var(--card-border-radius); } .card--bgimage .card-body::before{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0); z-index: -2; width: 100%; height: var(--card-image-overlay-height); background-image: linear-gradient(to top, rgba(255,255,255, 1), rgba(255,255,255, 0)); border-radius: inherit; opacity: var(--card-image-overlay-opacity); will-change: width, height; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base), transform var(--transition-duration-base) var(--transition-easing-base); } .card--bgimage:hover .card-body::before{ transform: translate3d(-50%, calc(var(--double-border-offset-hover) * -1), 0); width: calc(100% - (var(--double-border-offset-hover) * 2)); height: calc(var(--card-image-overlay-height) - (var(--double-border-offset-hover) * 2)); } .card--square{ aspect-ratio: 1 / 1; } .card-image--square, .card-image--2by1, .card-image--16by9, .card-image--4by3 { --card-image-height: auto; } .card-image--square{ aspect-ratio: 1 / 1; } .card-image--2by1{ aspect-ratio: 2 / 1; } .card-image--16by9{ aspect-ratio: 16 / 9; } .card-image--4by3{ aspect-ratio: 4 / 3; } .listing{ --double-border-radius: var(--listing-item-image-radius); --image-highlighter-bg: var(--listing-item-hover-color); padding-left: 0; list-style: none; } .listing--xs{ --listing-item-image-size: var(--listing-item-image-size-xs); --listing-item-image-radius: var(--border-radius-sm); } .listing--sm{ --listing-item-image-size: var(--listing-item-image-size-sm); } @media screen and (min-width: 60rem){ .listing{ --listing-item-image-size: var(--listing-item-image-size-lg); } .listing--xs{ --listing-item-image-size: var(--listing-item-image-size-xs); } .listing--sm{ --listing-item-image-size: var(--listing-item-image-size-sm); } } .listing > li + li{ margin-top: var(--listing-vertical-rythm, 2rem); } .listing-item, .listing-item > a{ display: flex; align-items: stretch; color: var(--body-color); } .listing-item:where(:not(.listing-item--noborder)){ padding-left: var(--bordered-group-padding-x); border-left: var(--border-width-base) solid; border-image: var(--listing-item-border-gradient) 1; } .listing-item-image{ margin-right: var(--listing-item-gutter); position: relative; z-index: 0; flex: 0 0 auto; width: var(--listing-item-image-size); height: var(--listing-item-image-size); } .listing-item:hover .listing-item-image{ --double-border-color: rgba(var(--color-tertiary-rgb), 0.5); } .listing-item-body { flex: 1 1 0; display: flex; flex-direction: column; } .listing-item-body > * + *{ margin-top: var(--listing-item-vertical-rythm); } .listing-item-title.has-hover{ transition: color var(--transition-duration-base) var(--transition-easing-base); } a:hover .listing-item-title.has-hover{ color: var(--listing-item-hover-color); } .listing-item-infos{ display: flex; align-items: center; opacity: var(--caption-opacity); } .listing-item-infos > span{ display: flex; align-items: center; } .listing-item-infos > span::after{ content: ''; margin: 0 0.5em; display: block; width: 0.25em; height: 0.25em; border-radius: 50%; background-color: currentColor; opacity: 0.5; } .listing-item-infos > span:last-child::after{ content: none; } .listing--sm .author, .listing--xs .author{ margin-top: var(--spacer-half); } .listing-item-footer{ flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; } .listing-item .readmore{ display: none; } .listing-item-end{ margin-left: var(--spacer1); align-self: center; } @media screen and (min-width: 48rem){ .listing-item .readmore{ display: inline-flex; } } @media screen and (min-width: 60rem){ .listing-item-end{ margin-left: var(--spacer2); } } .modal{ --modal-body-padding: var(--modal-body-padding-base); --modal-container-width: var(--modal-container-width--base); position: fixed; top: 0; right: -9999rem; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: var(--modal-z); opacity: 0; transition: right 0s var(--transition-duration-base), opacity var(--transition-duration-base) var(--transition-easing-base); } @media screen and (min-width: 48rem){ .modal{ --modal-container-width: var(--modal-container-width-md); } } @media screen and (min-width: 60rem){ .modal{ --modal-body-padding: var(--modal-body-padding-lg); --modal-container-width: var(--modal-container-width-lg); } } /* The overlay between site content and modal */ .modal::before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--modal-overlay-background); } .modal-container{ position: relative; display: flex; flex: 0 0 auto; width: var(--modal-container-width); max-width: var(--modal-container-max-width); max-height: 90%; background-color: var(--body-bg-color); transform: translate3d(0,-100%,0); transition: transform var(--transition-duration-base) var(--transition-easing-base); } .modal-close{ position: absolute; top: 0; right: 0; z-index: 1; opacity: 0; transition: color var(--transition-duration-base) var(--transition-easing-base), opacity var(--transition-duration-base) var(--transition-easing-base); } /* Modal OPEN */ .modal.is-open{ right: 0; opacity: 1; transition: right 0s, opacity var(--transition-duration-base) var(--transition-easing-base); } .modal.is-open .modal-close{ opacity: 1; } .modal.is-open .modal-container{ transform: translate3d(0,0,0); transition: transform var(--transition-duration-base) var(--transition-easing-base) calc(var(--transition-duration-base) / 4); } /* Scroll in the modal if content is too long */ .modal-scroll{ position: relative; flex: 0 0 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 0; /* Firefox scrollbar */ scrollbar-width: thin; scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-rail-color); } /* Webkit scrollbar */ .modal-scroll::-webkit-scrollbar{ width: var(--custom-scrollbar-width); } .modal-scroll::-webkit-scrollbar-track{ background: var(--custom-scrollbar-rail-color); } .modal-scroll::-webkit-scrollbar-thumb{ background-color: var(--custom-scrollbar-thumb-color); border-radius: 20px; border: none; } .modal-inner{ position: relative; z-index: 1; padding: var(--modal-body-padding); overflow: hidden; } .modal-body{ max-height: 100%; } .logos-list{ display: flex; flex-wrap: wrap; align-items: center; } .logos-list li{ margin-right: var(--logos-list-spacer); margin-top: var(--logos-list-spacer); flex: 1 1 0; min-width: 2.5rem; max-width: var(--logos-list-image-size); text-align: center; } .logos-list img{ max-height: var(--logos-list-image-size); } body { background-color: var(--body-bg-color); color: var(--body-color); line-height: var(--line-height-base); } .page-wrapper { padding: 0 var(--page-padding-x); } .page-content-wrapper{ margin-top: var(--header-height); } a { text-decoration: none; } a:where(:not([class])) { color: var(--color-secondary); } /* CSS variables */ :root { /* --gap: 2.127659574%; */ --gap: var(--grid-gutter); } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid > [class*='span'] { min-height: 1px; width: 100%; } .row-fluid > [class*='span'] + [class*='span']{ margin-top: var(--gap); } /* Desktop layout */ @media (min-width: 48rem) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid > [class*='span'] + [class*='span']{ margin-top: 0; } .row-fluid > .span11 { width: calc(91.66% - (var(--gap) * (1 / 12))); } .row-fluid > .span10 { width: calc(83.33% - (var(--gap) * (2 / 12))); } .row-fluid > .span9 { width: calc(75% - (var(--gap) * (3 / 12))); } .row-fluid > .span8 { width: calc(66.66% - (var(--gap) * (4 / 12))); } .row-fluid > .span7 { width: calc(58.33% - (var(--gap) * (5 / 12))); } .row-fluid > .span6 { width: calc(50% - (var(--gap) * (6 / 12))); } .row-fluid > .span5 { width: calc(41.66% - (var(--gap) * (7 / 12))); } .row-fluid > .span4 { width: calc(33.33% - (var(--gap) * (8 / 12))); } .row-fluid > .span3 { width: calc(25% - (var(--gap) * (9 / 12))); } .row-fluid > .span2 { width: calc(16.66% - (var(--gap) * (10 / 12))); } .row-fluid > .span1 { width: calc(8.33% - (var(--gap) * (11 / 12))); } } .row{ display: flex; flex-wrap: wrap; align-items: stretch; margin-left: calc((var(--grid-gutter) * -1) / 2); margin-right: calc((var(--grid-gutter) * -1) / 2); } .row--reverse{ flex-direction: row-reverse; } .row > [class*="col"]{ flex: 1 1 0; padding-left: calc(var(--grid-gutter) / 2); padding-right: calc(var(--grid-gutter) / 2); padding-bottom: var(--grid-gutter); } .row--single-line > [class*="col-"]{ padding-bottom: 0; } .row > .col-auto { flex: 0 0 auto; } .row > .col-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); } .row > .col-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); } .row > .col-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); } .row > .col-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); } .row > .col-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); } .row > .col-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); } .row > .col-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); } .row > .col-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); } .row > .col-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); } .row > .col-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); } .row > .col-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); } .row > .col-12 { flex-basis: 100%; max-width: 100%; } @media screen and (min-width: 48rem){ .row--reverse-md{ flex-direction: row-reverse; } .row--single-line-md > [class*="col-"]{ padding-bottom: 0; } .row > .col-md { flex: 1 1 0; } .row > .col-md-auto { flex: 0 0 auto; } .row > .col-md-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); } .row > .col-md-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); } .row > .col-md-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); } .row > .col-md-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); } .row > .col-md-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); } .row > .col-md-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); } .row > .col-md-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); } .row > .col-md-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); } .row > .col-md-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); } .row > .col-md-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); } .row > .col-md-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); } .row > .col-md-12 { flex-basis: 100%; max-width: 100%; } } @media screen and (min-width: 60rem){ .row--reverse-lg{ flex-direction: row-reverse; } .row--single-line-lg > [class*="col-"]{ padding-bottom: 0; } .row > .col-lg { flex: 1 1 0; } .row > .col-lg-auto { flex: 0 0 auto; } .row > .col-lg-1 { flex: 0 0 calc(100% * 1 / 12); max-width: calc(100% * 1 / 12); } .row > .col-lg-2 { flex: 0 0 calc(100% * 2 / 12); max-width: calc(100% * 2 / 12); } .row > .col-lg-3 { flex: 0 0 calc(100% * 3 / 12); max-width: calc(100% * 3 / 12); } .row > .col-lg-4 { flex: 0 0 calc(100% * 4 / 12); max-width: calc(100% * 4 / 12); } .row > .col-lg-5 { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); } .row > .col-lg-6 { flex: 0 0 calc(100% * 6 / 12); max-width: calc(100% * 6 / 12); } .row > .col-lg-7 { flex: 0 0 calc(100% * 7 / 12); max-width: calc(100% * 7 / 12); } .row > .col-lg-8 { flex: 0 0 calc(100% * 8 / 12); max-width: calc(100% * 8 / 12); } .row > .col-lg-9 { flex: 0 0 calc(100% * 9 / 12); max-width: calc(100% * 9 / 12); } .row > .col-lg-10 { flex: 0 0 calc(100% * 10 / 12); max-width: calc(100% * 10 / 12); } .row > .col-lg-11 { flex: 0 0 calc(100% * 11 / 12); max-width: calc(100% * 11 / 12); } .row > .col-lg-12 { flex-basis: 100%; max-width: 100%; } } .container{ margin-left: auto; margin-right: auto; width: 100%; max-width: var(--container-max-width); padding-left: var(--container-padding-x); padding-right: var(--container-padding-x); } .container--small{ max-width: var(--container-small-max-width); } .container--left, .container--left-contained{ padding-right: 0; overflow-x: clip; } .container--left{ margin-right: calc(var(--page-padding-x) * -1); max-width: calc(var(--container-max-width) + ((100vw - var(--container-max-width)) / 2)); } .container--left-contained{ margin-right: 0; max-width: calc(var(--container-max-width) + ((100vw - var(--container-max-width)) / 2) - (var(--page-padding-x) * 2)); } @media screen and (min-width: 60rem){ .container-lg{ margin-left: auto; margin-right: auto; width: 100%; max-width: var(--container-max-width); padding-left: var(--container-padding-x); padding-right: var(--container-padding-x); } .container--small-lg{ max-width: var(--container-small-max-width); } .container--left-lg, .container--left-contained-lg{ padding-right: 0; overflow-x: clip; } .container--left-lg{ margin-right: calc(var(--page-padding-x) * -1); max-width: calc(var(--container-max-width) - var(--container-padding-x) + ((100vw - var(--container-max-width)) / 2)); } .container--left-contained-lg{ margin-right: 0; max-width: calc(var(--container-max-width) - var(--container-padding-x) + ((100vw - var(--container-max-width)) / 2) - (var(--page-padding-x) * 2)); } } .section{ padding: var(--section-padding-y) 0; color: var(--body-color); } .section--no-padding-top{ padding-top: 0; } .section--no-padding-bottom{ padding-bottom: 0; } .section-header > * + * { margin-top: var(--spacer1); } .section-header .section-intro{ margin-top: var(--spacer2); } .section-header .lead-text > * + *{ margin-top: var(--spacer1); } .bordered-group{ padding-left: var(--bordered-group-padding-x); border-left: var(--border-width-base) solid; border-image: var(--bordered-group-gradient) 1; } .bordered-group--secondary { --bordered-group-gradient: linear-gradient(to bottom, var(--color-secondary), var(--color-tertiary)); } .double-border{ position: relative; z-index: 0; border-radius: var(--double-border-radius); } .double-border::before, .double-border::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: -1; width: 100%; height: 100%; box-shadow: 0 0 0 var(--double-border-width) var(--double-border-color); } .double-border::before{ border-radius: inherit; } .double-border > img{ border-radius: inherit; } a.double-border::before, a.double-border::after, a .double-border::before, a .double-border::after{ will-change: width, height; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base), box-shadow var(--transition-duration-base) var(--transition-easing-base), opacity var(--transition-duration-base) var(--transition-easing-base); } a.double-border > img, a .double-border > img{ will-change: width, height, filter; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base), filter var(--transition-duration-base) var(--transition-easing-base); } a.double-border:hover, a:hover .double-border{ --double-border-color: var(--double-border-color-hover); } a.double-border:where(:not(.double-border--no-inner-hover)):hover::before, a:hover .double-border:where(:not(.double-border--no-inner-hover))::before{ width: calc(100% - (var(--double-border-offset-hover) * 2)); height: calc(100% - (var(--double-border-offset-hover) * 2)); } a.double-border:hover::before, a:hover .double-border::before{ opacity: 0.6; } a.double-border:hover::after, a:hover .double-border::after{ width: calc(100% + (var(--double-border-offset-hover) * 2)); height: calc(100% + (var(--double-border-offset-hover) * 2)); } a.double-border:hover > img, a:hover .double-border > img{ width: calc(100% - (var(--double-border-offset-hover) * 2)); height: calc(100% - (var(--double-border-offset-hover) * 2)); } .page-header{ position: absolute; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: var(--header-height); padding: var(--header-padding-y, 0) var(--header-padding-x, 1rem); } @keyframes header-sticky-entrance { from { transform: translate3d(0,-100%,0); } to { transform: translate3d(0,0,0); } } @media screen and (min-width: 60rem){ .page-header{ z-index: var(--header-z); } .page-header.is-sticky{ --header-height: var(--header-sticky-height); position: fixed; background-color: var(--header-sticky-bg); box-shadow: var(--header-sticky-shadow); animation: header-sticky-entrance var(--transition-duration-base) var(--transition-easing-base) 1; } } .page-header-logo{ flex: 0 0 auto; margin-right: 1rem; } @media screen and (min-width: 60rem){ .page-header-logo{ margin-right: 2rem; } } .page-header-menu{ flex: 1 1 0; } .page-header-menu > .hs_cos_wrapper_type_module{ display: flex; justify-content: flex-end; } .page-header .lang-switcher{ padding-top: 1rem; align-self: center; } @media screen and (min-width: 60rem){ .page-header .lang-switcher{ position: absolute; top: 0; right: 0; padding-top: 0; } } /* .page-footer .section{ display:flex; flex-direction:column: justify-content: space-between; color: var(--grey200); } .page-footer .section .container > * + *{ margin-top: var(--spacer3); } .page-footer .section-header > * + *{ margin-top: var(--spacer2); } .page-footer .section-footer > *+*{ margin-top: var(--spacer2) } .page-footer .section-footer .location > *+*{ margin-top: var(--spacer1); } .page-footer .section-footer .contact{ color:var(--white) } @media screen and (min-width: 60rem){ .page-footer .section .container > * + * { margin-top: var(--spacer7); } .page-footer .section-footer{ display:flex; justify-content:space-between; align-items:flex-end; } .page-footer .section-footer > *+*{ margin-top: 0px; } .page-footer .section-footer .location, .contact{ width:fit-content; } } */ .content-header{ --heading-line-height: 1.1; margin-top: calc(var(--header-height) + var(--content-header-margin-top)); margin-bottom: var(--content-header-margin-bottom); } .dnd-content .content-header{ margin-top: var(--content-header-margin-top); } .content-header-row{ position: relative; } * + .content-header-title, .content-header-title + *{ margin-top: var(--spacer-half); } .content-header-actions{ display: flex; align-items: center; } .content-header-actions > *{ margin-right: var(--spacer1); } @media screen and (min-width: 60rem){ .content-header-row{ display: flex; } .content-header-row .content-header-main{ flex: 1 1 0; } .content-header-actions{ margin-left: var(--grid-gutter); flex: 0 0 auto; align-self: flex-end; } .content-header-actions > *{ margin-right: 0; margin-left: var(--spacer1-half); } } .content-header-back-button{ position: absolute; bottom: 100%; left: calc(var(--btn-padding-x) * -1); margin-bottom: var(--spacer-half); } .content-header .author{ margin-top: var(--spacer2); } .dnd-content { --dnd-container-max-width: var(--container-max-width); } .dnd-content--contained { --dnd-vertical-rythm: var(--dnd-vertical-rythm-contained); --section-padding-y: var(--dnd-vertical-rythm-contained); } .dnd-content .dnd-section{ padding: var(--section-padding-y) 0; color: var(--body-color); } .dnd-content .dnd-section[class*="background-gradient"]{ --body-color: var(--grey200); --heading-color: var(--white); } .dnd-content [class*="max-width-section-centering"] > .row-fluid{ margin-left: auto; margin-right: auto; width: 100%; max-width: var(--dnd-container-max-width) !important; padding-left: var(--container-padding-x); padding-right: var(--container-padding-x); } .dnd-content .dnd-section-md > .row-fluid{ --dnd-container-max-width: calc(var(--container-max-width) * 10 / 12); } .dnd-content .dnd-section-sm > .row-fluid{ --dnd-container-max-width: calc(var(--container-max-width) * 8 / 12); } .dnd-content .dnd-row + .dnd-row > .row-fluid > .dnd-module > .hs_cos_wrapper, .dnd-content .dnd-row + .dnd-row > .row-fluid > .dnd-column{ margin-top: var(--dnd-vertical-rythm); } .hs_cos_wrapper_type_rich_text{ --bordered-group-padding-x: var(--spacer1-half); } /*.hs_cos_wrapper_type_rich_text > * + *, .hs_cos_wrapper_type_rich_text li > * + *, .hs_cos_wrapper_type_rich_text blockquote > * + *{ margin-top: var(--dnd-vertical-rythm); }*/ .hs_cos_wrapper_type_rich_text > * + *{ margin-top: var(--dnd-vertical-rythm); } .hs_cos_wrapper_type_rich_text :where(h6, .h6, div:not([class])) + :where(h1, h2, h3, h4, h5, h6), .hs_cos_wrapper_type_rich_text :where(h1, h2, h3, h4, h5, h6) + :where(h6, .h6, div:not([class])) { --dnd-vertical-rythm: var(--dnd-vertical-rythm-sm); } .hs_cos_wrapper_type_rich_text *:where(h1, h2, h3, h4, h5, h6, p) + p{ --dnd-vertical-rythm: var(--dnd-vertical-rythm-sm); } /* Give every rich text H6 the text-code look */ .hs_cos_wrapper_type_rich_text > h6{ --text-gradient: var(--text-gradient-primary); display: inline-block; line-height: var(--heading-line-height); background: var(--text-gradient); font-family: var(--font-family-headings); font-size: var(--font-size-h6); font-weight: var(--heading-font-weight); text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .hs_cos_wrapper_type_rich_text > h6.secondary{ --text-gradient: var(--text-gradient-secondary); } .hs_cos_wrapper_type_rich_text img{ --dnd-vertical-rythm: var(--dnd-vertical-rythm-contained); margin-top: var(--dnd-vertical-rythm); } .hs_cos_wrapper_type_rich_text blockquote{ padding-left: var(--bordered-group-padding-x); border-left: var(--border-width-base) solid; border-image: var(--bordered-group-gradient) 1; } .hs_cos_wrapper_type_rich_text ul{ --bordered-group-gradient: linear-gradient(to bottom, var(--color-secondary), var(--color-tertiary)); padding-left: 0; list-style: none; } .hs_cos_wrapper_type_rich_text ul li{ padding-left: var(--bordered-group-padding-x); border-left: var(--border-width-base) solid; border-image: var(--bordered-group-gradient) 1; } .hs_cos_wrapper_type_rich_text ul li + li{ margin-top: var(--spacer1-half); } .hs_cos_wrapper_type_rich_text ul li strong{ color: var(--heading-color); font-weight: var(--heading-font-weight); } .hs_cos_wrapper_type_rich_text > pre{ --body-background-color: var(--grey800); --body-color: var(--white); display: block; padding: var(--spacer1); line-height: var(--line-height-base); background: var(--bg-gradient-secondary); border-radius: var(--border-radius-sm); color: var(--body-color); font-family: monospace; font-size: var(--font-size-text-body-2); font-weight: normal; text-transform: none; } .dnd-content .widget-type-linked_image{ text-align: center; } .dnd-content .hs_cos_wrapper_type_linked_image, .dnd-content .oembed_container .iframe_wrapper{ /* --double-border-radius: var(--border-radius-lg); */ position: relative; z-index: 0; display: block; border-radius: var(--double-border-radius); } .dnd-content .hs_cos_wrapper_type_linked_image{ --double-border-radius: var(--border-radius-lg); display: inline-flex; justify-content: center; } .dnd-content .hs_cos_wrapper_type_linked_image::before, .dnd-content .hs_cos_wrapper_type_linked_image::after, .dnd-content .oembed_container .iframe_wrapper::before, .dnd-content .oembed_container .iframe_wrapper::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: -1; width: 100%; height: 100%; box-shadow: 0 0 0 var(--double-border-width) var(--double-border-color); } .dnd-content .hs_cos_wrapper_type_linked_image::before, .dnd-content .oembed_container .iframe_wrapper::before{ border-radius: inherit; } .dnd-content .oembed_container .iframe_wrapper::after{ will-change: width, height; transition: width var(--transition-duration-base) var(--transition-easing-base), height var(--transition-duration-base) var(--transition-easing-base); } .dnd-content .oembed_container .iframe_wrapper:hover::after{ width: calc(100% + (var(--double-border-offset-hover) * 2)); height: calc(100% + (var(--double-border-offset-hover) * 2)); } .dnd-content .hs_cos_wrapper_type_linked_image img, .dnd-content .oembed_container .iframe_wrapper iframe{ border-radius: inherit; } .dnd-content .hs_cos_wrapper_type_linked_image img{ max-height: 70vh; } @media screen and (min-width: 60rem){ .dnd-content .hs_cos_wrapper_type_linked_image img{ max-height: initial; } }