@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; -webkit-tap-highlight-color: transparent; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; overflow-wrap: break-word; word-wrap: break-word; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* hide arrow in details on safari and ios */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-EL.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-EL.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-L.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-L.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-R.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-R.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-M.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-M.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-D.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-D.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-EB.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-EB.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Kreadon"; src: url("../fonts/kreadon/Kreadon-B.woff2") format("woff2"), url("../fonts/kreadon/Kreadon-B.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "icomoon"; src: url("../fonts/icomoon/talentimmo_icomoon.ttf?j2y4pv") format("truetype"), url("../fonts/icomoon/talentimmo_icomoon.woff?j2y4pv") format("woff"), url("../fonts/icomoon/talentimmo_icomoon.svg?j2y4pv#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } :root { --grid-columns: 12; --grid-margin: 0.8rem; --grid-gap: 1.6rem; --grid-space: 2.4rem; --layout-max-width: 156rem; --columns: 12; --container-columns: 12; --minus-gap: 1; --cta-height: 4rem; --header-offset: 2.4rem; --header-height: 9.6rem; --block-padding-block: 4.8rem; --radius--md: 1.2rem; --radius--default: 0.6rem; --radius--sm: 0.4rem; --white: #ffffff; --black: #000000; --grey: #F3F5F7; --grey--100: #ddd; --grey--200: #CCC; --grey--300: #AAA; --grey--500: #555; --grey--600: #2b4545; --green--bright: #dbf0e8; --green: #003434; --green--dark: #002B2C; --green--darker: #001c1d; --green--go: #266E6A; --green--plus: #00403E; --green--maxi: #042E2C; --yellow: #D5DD34; --yellow--dark: #9F9A1C; --orange: #C77100; --error: #EE3137; --warning: gold; --succeed: #2ca546; --title-font: Kreadon, sans-serif; --text-font: Inter, sans-serif; --text-color--dark: var(--green); --text-color--bright: var(--white); --text-color--light: var(--grey--300); --text-color--accent: var(--yellow); --text-color--inactive: var(--grey--500); --text-color: var(--text-color--dark); --title-color--bright: var(--white); --title-color--dark: var(--green); --title-color--accent: var(--yellow); --title-color: var(--title-color--dark); --stroke-color: var(--grey--200); --stroke-color--bright: var(--white); --stroke-color--dark: var(--green); --stroke-color--accent: var(--yellow); --background-color: var(--white); --background-color--invert: var(--black); --background-color--light: var(--grey); --background-color--dark: var(--green--dark); --background-color--darker: var(--green--darker); --background-color--accent: var(--yellow); --form-border-color: var(--stroke-color); --form-background: var(--background-color); --form-radius: var(--radius--default); --form-shadow: var(--green--bright); --form-required: var(--text-color--inactive); --testimonial-background: var(--background-color--light); --transition-easing: cubic-bezier(0.45, 0, 0.15, 1); --transition-easing--in-out: cubic-bezier(0.4, 0, 0.1, 1); --transition-duration: 0.32s; --transition: all 0.32s cubic-bezier(0.45, 0, 0.15, 1); --z-index-curtain: 50; --z-index-nav: 100; --z-index-header-nav: 150; --z-index-header-logo: 200; --z-index-header: 250; --z-index-search: 300; --z-index-header-button: 350; --z-index-dialog: 400; --z-index-alert: 450; --z-index-guid: 500; } @media screen and ( min-width: 40em ) { :root { --grid-margin: 3.2rem; --grid-gap: 1.6rem; --grid-space: 4.8rem; } } @media screen and ( min-width: 48em ) { :root { --grid-gap: 2.4rem; --grid-space: 5.6rem; --block-padding-block: 7.2rem; } } @media screen and ( min-width: 64em ) { :root { --grid-margin: 5.6rem; --grid-space: 8rem; --block-padding-block: 10rem; } } @media screen and ( min-width: 80em ) { :root { --grid-margin: 7.2rem; --grid-space: 9.6rem; --header-height: 14rem; --block-padding-block: 12rem; } } html, body { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-wrapper { font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.01em; } * { color: var(--text-color); } strong { font-weight: 600; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { background: var(--selection-background, var(--green--bright)); } ::selection { background: var(--selection-background, var(--green--bright)); } .dialog__column--dark, .hero--green { --title-color: var(--title-color--bright); --text-color: var(--text-color--bright); --stroke-color: rgba(255, 255, 255, 0.15); --selection-background: #004e4e; } .dialog__column--dark .button--default, .hero--green .button--default { --button-primary: var(--white); --button-secondary: var(--text-color--dark); --button-tertiary: rgba(255, 255, 255, 0.2); } .dialog__column--dark .button--grey, .hero--green .button--grey { --button-tertiary: rgba(255, 255, 255, 0.2); } .dialog__column--dark .button--outline, .hero--green .button--outline { color: var(--text-color--bright); } .flex, .accordion__list { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row { gap: 1.6rem var(--grid-gap); } .flex > [class*=col-]:not(.col-auto, .col-grow), .accordion__list > [class*=col-]:not(.col-auto, .col-grow) { flex: 0 0 calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + 0%); min-width: calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + 0%); } .flex .col-auto, .accordion__list .col-auto { flex: 0 0 auto; } .flex--auto > *:not([class*=col-]) { flex: 0 0 100%; min-width: 100%; } .flex--v-top { align-items: flex-start; } .flex--v-center { align-items: center; } .flex--h-center { justify-content: center; } .grid { display: grid; gap: 0 var(--grid-gap); grid-template-columns: repeat(var(--grid-columns, var(--container-columns)), 1fr); grid-auto-flow: column; } .grid > [class*=col-] { grid-column-end: span clamp(1, var(--column-size), var(--container-columns)); } .grid > *:not([class*=col-]) { grid-column: 1/-1; } *:not(.flex, .accordion__list, .grid) > [class*=col-] { width: calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + 0%); } [class*=ml-] { margin-left: calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-left-size) + var(--grid-gap) * (var(--offset-left-size) - 0) + 0%); } .start-1 { grid-column-start: 1; } .col-4 { --column-size: 4; } .col-4 > *, .col-4::before, .col-4::after { --container-columns: 4; } .col-4.grid { --grid-columns: 4; } .col-7 { --column-size: 7; } .col-7 > *, .col-7::before, .col-7::after { --container-columns: 7; } .col-7.grid { --grid-columns: 7; } .col-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } @media screen and ( min-width: 40em ) { .col-6--xs-mid { --column-size: 6; } .col-6--xs-mid > *, .col-6--xs-mid::before, .col-6--xs-mid::after { --container-columns: 6; } .col-6--xs-mid.grid { --grid-columns: 6; } } @media screen and ( min-width: 48em ) { .col-3--sm { --column-size: 3; } .col-3--sm > *, .col-3--sm::before, .col-3--sm::after { --container-columns: 3; } .col-3--sm.grid { --grid-columns: 3; } .col-4--sm { --column-size: 4; } .col-4--sm > *, .col-4--sm::before, .col-4--sm::after { --container-columns: 4; } .col-4--sm.grid { --grid-columns: 4; } .col-5--sm { --column-size: 5; } .col-5--sm > *, .col-5--sm::before, .col-5--sm::after { --container-columns: 5; } .col-5--sm.grid { --grid-columns: 5; } .col-6--sm { --column-size: 6; } .col-6--sm > *, .col-6--sm::before, .col-6--sm::after { --container-columns: 6; } .col-6--sm.grid { --grid-columns: 6; } .col-7--sm { --column-size: 7; } .col-7--sm > *, .col-7--sm::before, .col-7--sm::after { --container-columns: 7; } .col-7--sm.grid { --grid-columns: 7; } .col-8--sm { --column-size: 8; } .col-8--sm > *, .col-8--sm::before, .col-8--sm::after { --container-columns: 8; } .col-8--sm.grid { --grid-columns: 8; } .col-10--sm { --column-size: 10; } .col-10--sm > *, .col-10--sm::before, .col-10--sm::after { --container-columns: 10; } .col-10--sm.grid { --grid-columns: 10; } .ml-1--sm { --offset-left-size: 1; } .ml-2--sm { --offset-left-size: 2; } } @media screen and ( min-width: 64em ) { .col-3--md { --column-size: 3; } .col-3--md > *, .col-3--md::before, .col-3--md::after { --container-columns: 3; } .col-3--md.grid { --grid-columns: 3; } .col-4--md { --column-size: 4; } .col-4--md > *, .col-4--md::before, .col-4--md::after { --container-columns: 4; } .col-4--md.grid { --grid-columns: 4; } .col-5--md { --column-size: 5; } .col-5--md > *, .col-5--md::before, .col-5--md::after { --container-columns: 5; } .col-5--md.grid { --grid-columns: 5; } .col-6--md { --column-size: 6; } .col-6--md > *, .col-6--md::before, .col-6--md::after { --container-columns: 6; } .col-6--md.grid { --grid-columns: 6; } .col-7--md { --column-size: 7; } .col-7--md > *, .col-7--md::before, .col-7--md::after { --container-columns: 7; } .col-7--md.grid { --grid-columns: 7; } .col-8--md { --column-size: 8; } .col-8--md > *, .col-8--md::before, .col-8--md::after { --container-columns: 8; } .col-8--md.grid { --grid-columns: 8; } .col-10--md { --column-size: 10; } .col-10--md > *, .col-10--md::before, .col-10--md::after { --container-columns: 10; } .col-10--md.grid { --grid-columns: 10; } .ml-0--md { --offset-left-size: 0; } .ml-1--md { --offset-left-size: 1; } .ml-2--md { --offset-left-size: 2; } .ml-3--md { --offset-left-size: 3; } } @media screen and ( min-width: 80em ) { .col-3--md-mid { --column-size: 3; } .col-3--md-mid > *, .col-3--md-mid::before, .col-3--md-mid::after { --container-columns: 3; } .col-3--md-mid.grid { --grid-columns: 3; } .col-4--md-mid { --column-size: 4; } .col-4--md-mid > *, .col-4--md-mid::before, .col-4--md-mid::after { --container-columns: 4; } .col-4--md-mid.grid { --grid-columns: 4; } .col-5--md-mid { --column-size: 5; } .col-5--md-mid > *, .col-5--md-mid::before, .col-5--md-mid::after { --container-columns: 5; } .col-5--md-mid.grid { --grid-columns: 5; } .col-6--md-mid { --column-size: 6; } .col-6--md-mid > *, .col-6--md-mid::before, .col-6--md-mid::after { --container-columns: 6; } .col-6--md-mid.grid { --grid-columns: 6; } .col-8--md-mid { --column-size: 8; } .col-8--md-mid > *, .col-8--md-mid::before, .col-8--md-mid::after { --container-columns: 8; } .col-8--md-mid.grid { --grid-columns: 8; } } @media screen and ( min-width: 85.375em ) { .col-5--lg { --column-size: 5; } .col-5--lg > *, .col-5--lg::before, .col-5--lg::after { --container-columns: 5; } .col-5--lg.grid { --grid-columns: 5; } .col-6--lg { --column-size: 6; } .col-6--lg > *, .col-6--lg::before, .col-6--lg::after { --container-columns: 6; } .col-6--lg.grid { --grid-columns: 6; } .ml-3--lg { --offset-left-size: 3; } } html, body { overflow-x: hidden; } .main-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; } .header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; max-width: 100vw; max-width: 100dvw; } .main-content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .hero--hexagon > .main-content { -ms-grid-row: 2; -ms-grid-column: 1; } .hero--hexagon--top > .main-content { -ms-grid-row: 3; -ms-grid-column: 1; } .main-content, .main-content__wrapper { display: grid; grid-template-columns: var(--grid-space) minmax(0, 1fr) var(--grid-space); max-width: var(--layout-max-width); margin: 0 auto; position: relative; } .main-content > *, .main-content__wrapper > * { grid-column: 2/span 1; } .main-content__wrapper { grid-column: 1/-1; } .footer { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: footer; padding: 0 calc(var(--grid-gap) + var(--grid-margin)); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; } img { display: block; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .svg-defs, .svg-defs * { width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none; } [data-flag=scroller] { display: block; height: 0.1rem; position: absolute; top: 100vh; top: 100dvh; transform: translate(0, 0.1rem); } #hexagonRight, #hexagonLeft { transform: scale(1, 1.5); } .logo { --logo-talent: var(--green); --logo-immo: var(--yellow); } .logo__talent { fill: var(--logo-talent); transition: var(--transition); } .logo__immo { fill: var(--logo-immo); transition: var(--transition); } .title, .block--rte h1, .dialog__rte h1, .block--rte h2, .dialog__rte h2, .block--rte h3, .dialog__rte h3, .block--rte h4, .dialog__rte h4, .block--rte h5, .dialog__rte h5, .block--rte h6, .dialog__rte h6 { font-family: var(--title-font); font-weight: 800; line-height: 1em; color: var(--title-color); } .title mark, .block--rte h1 mark, .dialog__rte h1 mark, .block--rte h2 mark, .dialog__rte h2 mark, .block--rte h3 mark, .dialog__rte h3 mark, .block--rte h4 mark, .dialog__rte h4 mark, .block--rte h5 mark, .dialog__rte h5 mark, .block--rte h6 mark, .dialog__rte h6 mark { color: var(--title-color--accent); } .title--xl { font-size: 3.2rem; } .title--lg, .block--rte h1, .dialog__rte h1 { font-size: 2.4rem; } .title--md, .block--rte h2, .dialog__rte h2 { font-size: 2.1rem; } .title--sm, .block--rte h3, .dialog__rte h3 { font-size: 1.8rem; } .title--xs, .block--rte h4, .dialog__rte h4, .title--xxs, .block--rte h5, .dialog__rte h5 { font-size: 1.6rem; } .title--center { text-align: center; } .title--thin { font-weight: 600; } .title--accent { color: var(--title-color--accent); } @media screen and ( min-width: 48em ) { .title--xl { font-size: 4rem; } .title--lg, .block--rte h1, .dialog__rte h1 { font-size: 3.2rem; } .title--md, .block--rte h2, .dialog__rte h2 { font-size: 2.4rem; } .title--sm, .block--rte h3, .dialog__rte h3 { font-size: 2.1rem; } .title--xs, .block--rte h4, .dialog__rte h4 { font-size: 1.8rem; } } @media screen and ( min-width: 80em ) { .title--xl { font-size: 4.8rem; } .title--lg, .block--rte h1, .dialog__rte h1 { font-size: 4rem; } .title--md, .block--rte h2, .dialog__rte h2 { font-size: 3.2rem; } .title--sm, .block--rte h3, .dialog__rte h3 { font-size: 2.4rem; } .title--xs, .block--rte h4, .dialog__rte h4 { font-size: 2.1rem; } .title--xxs, .block--rte h5, .dialog__rte h5 { font-size: 1.8rem; } } @media screen and ( min-width: 85.375em ) { .title--xl { font-size: 5.6rem; } .title--lg, .block--rte h1, .dialog__rte h1 { font-size: 4.8rem; } .title--md, .block--rte h2, .dialog__rte h2 { font-size: 4rem; } .title--sm, .block--rte h3, .dialog__rte h3 { font-size: 3.2rem; } .title--xs, .block--rte h4, .dialog__rte h4 { font-size: 2.4rem; } .title--xxs, .block--rte h5, .dialog__rte h5 { font-size: 2.1rem; } } .text-link, .block__content a:not(.button):not(.form__submit) { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition); } @media (hover: hover) { .text-link:hover, .block__content a:hover:not(.button):not(.form__submit) { color: var(--text-color--accent); } } .button, .form__submit { --button-height: 4.4rem; --button-height-look: 4rem; --button-radius: var(--radius--default); --button-primary: var(--green--dark); --button-secondary: var(--white); --button-tertiary: rgba(0, 43, 44, 0.25); --button-background: var(--button-primary); --button-border-color: var(--button-primary); --button-color: var(--button-secondary); display: flex; align-items: center; justify-content: center; min-height: var(--button-height); padding: 0.8rem 2.4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--button-color); text-align: center; white-space: pre; position: relative; z-index: 2; transition: var(--transition); } @media screen and ( max-width: 47.9375em ) { .button, .form__submit { --button-height: 4rem; --button-height-look: 4rem; padding: 1.2rem 2.4rem; font-size: 1.2rem; } .button::before, .form__submit::before { box-shadow: 0 0 0 0.4rem var(--button-tertiary); } } .button strong, .form__submit strong { color: var(--button-color); font-weight: 800; } .button::after, .form__submit::after { content: ""; display: block; width: 100%; height: var(--button-height-look); border: 0.1rem solid var(--button-border-color); border-radius: var(--button-radius); background: var(--button-background); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); transition: var(--transition); } .button::before, .form__submit::before { content: ""; display: block; width: 100%; height: var(--button-height-look); box-sizing: content-box; background: var(--button-background); border-radius: var(--button-radius); box-shadow: 0 0 0 0.6rem var(--button-tertiary); opacity: 0; pointer-events: none; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0.98, 0.8); transition: var(--transition); } .button:hover::before, .form__submit:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .button--auto { display: inline-flex; } .button--outline { --button-background: transparent; --button-color: var(--button-secondary); --button-border-color: var(--button-primary); } .button--outline.button--default { --button-secondary: var(--text-color--dark); } .button--yellow, .form__field.form__field--search .form__submit { --button-primary: var(--yellow); --button-secondary: var(--text-color--dark); --button-tertiary: rgba(213, 221, 52, 0.4); } .button--orange { --button-primary: var(--orange); --button-secondary: var(--text-color--bright); --button-tertiary: rgba(199, 113, 0, 0.4); } .button--green--go { --button-primary: var(--green--go); } .button--grey { --button-primary: var(--grey--300); --button-secondary: var(--text-color--bright); --button-tertiary: var(--grey--100); } .button--sm { --button-height: 4.4rem; --button-height-look: 3.2rem; font-size: 1.2rem; } .button--sm::before { box-shadow: 0 0 0 0.4rem var(--button-tertiary); } .button-list, .form__field--submit { display: flex; flex-wrap: wrap; gap: 1.2rem; } .button-list--auto > * { flex: 1; } .button-list--spaced, .form__field--submit { justify-content: space-between; } .button-switch { display: inline-grid; grid-template-columns: auto auto auto; grid-template-rows: auto; grid-template-areas: "textLeft switch textRight"; align-items: center; gap: 1.6rem; cursor: pointer; } .button-switch > * { pointer-events: none; } .button-switch::before { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: switch; content: ""; display: block; width: 6.4rem; height: 3.2rem; border-radius: 100rem; background: var(--background-color--dark); } .button-switch::after { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: switch; content: ""; display: block; width: 2.4rem; height: 2.4rem; border-radius: 100rem; background: var(--background-color); transform: translate(0.4rem, 0); transition: var(--transition); } .button-switch .button__text { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; transition: var(--transition); } .button-switch .button__text--left { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: textLeft; } .button-switch .button__text--right { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: textRight; opacity: 0.5; } .button-switch.on::after { transform: translate(3.6rem, 0); } .button-switch.on .button__text--left { opacity: 0.5; } .button-switch.on .button__text--right { opacity: 1; } .icon, .plan__ribbon::before, .plan__ribbon::after, .workflow::before, .list li::before, .plan__list li::before { --icon-color: var(--text-color--accent); --icon-background: var(--background-color--dark); display: inline-grid; align-content: center; justify-content: center; font-family: "icomoon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; z-index: 2; } .icon::before, .plan__ribbon::before, .workflow::before, .list li::before, .plan__list li::before, .icon::after, .plan__ribbon::after { width: 1em; height: 1em; aspect-ratio: 1/1; grid-column: 1/-1; grid-row: 1/-1; } .icon::after, .plan__ribbon::after { color: var(--icon-background); position: relative; z-index: -1; } .icon--double::before { font-size: 0.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon--information:before { content: "\e910"; } .icon--mask:before { content: "\e90f"; } .icon--pin:before { content: "\e911"; } .icon--phone:before { content: "\e912"; } .icon--mail-2:before { content: "\e913"; } .icon--user:before { content: "\e90e"; } .icon--wind:before { content: "\e902"; } .icon--building-2:before { content: "\e90b"; } .icon--building-1:before { content: "\e90c"; } .icon--house:before { content: "\e90d"; } .icon--edit:before { content: "\e907"; } .icon--mail:before { content: "\e908"; } .icon--plus:before { content: "\e909"; } .icon--send:before { content: "\e90a"; } .icon--bulb:before { content: "\e900"; } .icon--check:before { content: "\e901"; } .icon--shield:before { content: "\e903"; } .icon--file:before { content: "\e904"; } .icon--search:before { content: "\e905"; } .icon--hexagon:after { content: "\e906"; } input, button, select, label { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 2rem var(--grid-gap); } .form__wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 1.6rem var(--grid-gap); } .form__field { flex: 0 0 100%; } .form__field:hover { --form-border-color: var(--stroke-color--dark); } .form__field--50 { flex: 0 0 calc(50% - var(--grid-gap) * 0.5); } .form__field:not(.form__field--checkbox, .form__field--submit) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "label" "input"; gap: 0.4rem 0; position: relative; z-index: 2; } .form__field:not(.form__field--checkbox, .form__field--submit)::before { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: input; content: ""; display: block; width: 100%; height: 100%; align-self: center; justify-self: center; box-shadow: 0 0 0 0.6rem var(--form-shadow); border-radius: var(--form-radius); opacity: 0; pointer-events: none; position: relative; z-index: -1; transform: scale(0.98, 0.8); transition: var(--transition); } .form__field.form__field--search > .form__field:not(.form__field--checkbox, .form__field--submit)::before { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--checkbox > .form__field:not(.form__field--checkbox, .form__field--submit)::before { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field:not(.form__field--checkbox, .form__field--submit)::after { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: input; content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--form-border-color); border-radius: var(--form-radius); pointer-events: none; position: relative; z-index: 2; transition: var(--transition); } .form__field.form__field--search > .form__field:not(.form__field--checkbox, .form__field--submit)::after { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--checkbox > .form__field:not(.form__field--checkbox, .form__field--submit)::after { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field.form__field--search { grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "input submit"; } .form__field.form__field--search::before, .form__field.form__field--search::after { grid-column: 1/-1; grid-row: 1/-1; } .form__field.form__field--search .form__input { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .form__field.form__field--search .form__submit { margin-right: 0.4rem; } @media screen and ( max-width: 47.9375em ) { .form__field.form__field--search .form__submit { padding-inline: 1.2rem; } } .form__field.form__field--search .form__submit::before { display: none; } .form__field.form__field--search .form__submit::after { height: calc(100% - 0.8rem); } .form__field--select i { grid-row: input; display: block; width: 0.8rem; height: 0.8rem; border: 0.2rem solid var(--form-border-color); border-top: 0; border-left: 0; position: absolute; right: 2.8rem; top: 50%; transform: translate(50%, -75%) rotate(45deg); } .form__field--checkbox { display: grid; grid-template-columns: 4.4rem 1fr; grid-template-rows: auto; grid-template-areas: "input label"; align-items: center; } .form__field--checkbox .form__checkbox { width: 100%; height: 100%; } .form__field--checkbox .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: input; } .form__field--checkbox .form__label { font-weight: 400; } .form__field--submit { align-items: center; } .form__input { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: input; width: 100%; min-height: 4rem; padding: 0.8rem 1.6rem; border-radius: var(--form-radius); background: var(--form-background); font-size: 1.4rem; line-height: 2.4rem; transition: var(--transition); } .form__field.form__field--search > .form__input { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--checkbox > .form__input { -ms-grid-row: 1; -ms-grid-column: 1; } .form__input::-moz-placeholder { color: var(--text-color--light); } .form__input::placeholder { color: var(--text-color--light); } .form__input--select { padding-inline-end: 5.6rem; cursor: pointer; } @media screen and ( min-width: 48em ) { .form__input { min-height: 4.8rem; padding: 1.2rem 1.6rem; font-size: 1.6rem; } } .form__checkbox { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: input; cursor: pointer; } .form__field.form__field--search > .form__checkbox { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--checkbox > .form__checkbox { -ms-grid-row: 1; -ms-grid-column: 1; } .form__checkbox:checked ~ .form__checkmark::before { transform: scale(0.75); } .form__label { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: label; display: flex; align-items: baseline; justify-content: space-between; font-size: 1.4rem; font-weight: 600; cursor: pointer; } .form__field--checkbox > .form__label { -ms-grid-row: 1; -ms-grid-column: 2; } .form__label small { font-size: 1.3rem; font-weight: 500; color: var(--form-required); transition: var(--transition); } .form__label--sm { text-transform: uppercase; font-size: 1.2rem; font-weight: 600; color: var(--text-color--light); } .form__checkmark { display: block; width: 2.4rem; height: 2.4rem; border: 0.1rem solid var(--form-border-color); pointer-events: none; border-radius: var(--form-radius); position: relative; transition: var(--transition); } .form__checkmark::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--background-color--dark); transform: scale(0); transition: var(--transition); } .form__checkmark--radio { border-radius: 100rem; } .form__submit { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: submit; } .block--rte a:not(.button):not(.form__submit), .dialog__rte a:not(.button):not(.form__submit) { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition); } @media (hover: hover) { .block--rte a:hover:not(.button):not(.form__submit), .dialog__rte a:hover:not(.button):not(.form__submit) { color: var(--text-color--accent); } } .list, .plan__list { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 1.6rem; } .list li, .plan__list li { flex: 0 0 100%; padding-inline-start: 1.6rem; position: relative; } .list li::before, .plan__list li::before { content: "\e906"; aspect-ratio: auto; width: auto; height: auto; line-height: 2.4rem; font-size: 0.4rem; color: currentColor; position: absolute; left: 0; } .block--rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .dialog__rte > * + *:not(li, h1, h2, h3, h4, h5, h6) { margin-block-start: 0.75em; } .block--rte > * + img, .dialog__rte > * + img { margin-block-start: 1em; } .block--rte > * + h1, .dialog__rte > * + h1, .block--rte > * + h2, .dialog__rte > * + h2, .block--rte > * + h3, .dialog__rte > * + h3, .block--rte > * + h4, .dialog__rte > * + h4, .block--rte > * + h5, .dialog__rte > * + h5, .block--rte > * + h6, .dialog__rte > * + h6 { margin-block-start: 1em; } @media screen and ( min-width: 48em ) { .block--rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .dialog__rte > * + *:not(li, h1, h2, h3, h4, h5, h6) { margin-block-start: 1em; } .block--rte > * + img, .dialog__rte > * + img { margin-block-start: 3em; } } .block--rte, .dialog__rte { --rte-mark-color: var(--text-color--accent); line-height: 1.5; } .block--rte h4, .dialog__rte h4, .block--rte h5, .dialog__rte h5, .block--rte h6, .dialog__rte h6 { color: var(--title-color--medium); } .block--rte small, .dialog__rte small { display: inline-block; } .block--rte ul:not(.block__list), .dialog__rte ul:not(.block__list), .block--rte ol:not(.block__list), .dialog__rte ol:not(.block__list) { display: flex; flex-wrap: wrap; gap: 0.4rem 2em; } .block--rte ul ul, .dialog__rte ul ul, .block--rte ul ol, .dialog__rte ul ol, .block--rte ol ul, .dialog__rte ol ul, .block--rte ol ol, .dialog__rte ol ol { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: list; } .block--rte ul ul, .dialog__rte ul ul, .block--rte ol ul, .dialog__rte ol ul { padding-inline-start: 1.5em; } @media screen and ( min-width: 48em ) { .block--rte ul ul, .dialog__rte ul ul, .block--rte ol ul, .dialog__rte ol ul { padding-inline-start: 2em; } } .block--rte ul ol, .dialog__rte ul ol, .block--rte ol ol, .dialog__rte ol ol { padding-inline-start: 1.5em; } @media screen and ( min-width: 48em ) { .block--rte ul ol, .dialog__rte ul ol, .block--rte ol ol, .dialog__rte ol ol { padding-inline-start: 2em; } } .block--rte ul li, .dialog__rte ul li, .block--rte ol li, .dialog__rte ol li { width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "mark text" "list list"; gap: 0.4rem 1em; } .block--rte ul li::before, .dialog__rte ul li::before, .block--rte ol li::before, .dialog__rte ol li::before { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: mark; color: var(--rte-mark-color); font-weight: 600; } .block--rte ul:not(.block__list) > li::before, .dialog__rte ul:not(.block__list) > li::before { content: "•"; -webkit-text-stroke: 0.1rem var(--rte-mark-color); } .block--rte ul:not(.block__list) > li li::before, .dialog__rte ul:not(.block__list) > li li::before { color: transparent; } .block--rte ol:not(.block__list), .dialog__rte ol:not(.block__list) { counter-reset: index; } .block--rte ol:not(.block__list) > li, .dialog__rte ol:not(.block__list) > li { counter-increment: index; } .block--rte ol:not(.block__list) > li:before, .dialog__rte ol:not(.block__list) > li:before { content: counters(index, ".", decimal) "."; } .header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 0 1fr; grid-template-areas: "space wrapper" "logo wrapper"; width: 100%; max-width: var(--layout-max-width); height: var(--header-height); padding: 0 var(--grid-space); padding-block: var(--header-offset); position: fixed; left: 50%; transform: translate(-50%, 0); z-index: var(--z-index-header); } @media screen and ( min-width: 80em ) { .header { grid-template-rows: 1fr auto; } } .header::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background: var(--background-color--darker); position: absolute; top: 0; left: 50%; } .header__wrapper { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; grid-area: wrapper; display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr; grid-template-areas: "actions" "nav"; } @media screen and ( max-width: 79.9375em ) { .header__wrapper { grid-column: 1/-1; grid-row: 1/-1; grid-template-areas: "nav" "actions"; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; padding-inline: var(--grid-space); padding-block-start: calc(var(--header-height) + var(--header-offset) * 1.5); background: var(--background-color--darker); overflow-y: scroll; position: absolute; top: calc(var(--header-offset) * -1); left: 50%; transform: translate(-50%, 0); } } @media screen and ( min-width: 80em ) { .header__wrapper { justify-items: end; } } .header__logo { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: logo; justify-self: start; display: flex; justify-content: flex-start; min-height: 100%; position: relative; z-index: var(--z-index-header-logo); } @media screen and ( max-width: 79.9375em ) { .header__logo { align-items: center; } } .header__logo svg { width: auto; height: 4.8rem; transform-origin: left center; } @media screen and ( max-width: 79.9375em ) { .header__logo svg { height: 3.2rem; } } @media screen and ( max-width: 39.9375em ) { .header__logo svg { height: 2.4rem; } } .header__nav { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: var(--z-index-header-nav); } .dialog > .header__nav { -ms-grid-row: 1; -ms-grid-column: 1; } .header__nav .header__list { display: flex; flex-wrap: wrap; } @media screen and ( max-width: 79.9375em ) { .header__nav .header__list { width: 100%; gap: 1.6rem; } } @media screen and ( min-width: 80em ) { .header__nav .header__list { gap: 3.2rem; } } @media screen and ( max-width: 79.9375em ) { .header__nav .header__item { flex: 0 0 100%; } } .header__nav .header__item a { display: flex; min-height: 4.4rem; align-items: center; font-size: 1.4rem; font-weight: 600; } @media screen and ( max-width: 79.9375em ) { .header__nav .header__item a { font-family: var(--title-font); min-height: 3.2rem; font-size: 2.4rem; } } @media screen and ( max-width: 47.9375em ) { .header__nav .header__item a { font-size: 1.8rem; min-height: auto; } } @media screen and ( min-width: 80em ) { .header__nav .header__item a { text-transform: uppercase; } } .header__nav .header__item span { color: var(--text-color); position: relative; transition: var(--transition); } .header__nav .header__item span::after { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color); position: absolute; bottom: -0.2rem; left: 0; transform: scale(0, 1); transition: var(--transition); } .header__nav .header__item.active span::after { width: 100%; background: var(--stroke-color--accent); transform: scale(1, 1); } .header__nav .header__item:hover span::after { transform: scale(1, 1); } .header__actions { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: actions; gap: 0.8rem; text-transform: uppercase; z-index: var(--z-index-header-nav); position: relative; } @media screen and ( max-width: 79.9375em ) { .header__actions { padding-block: 3.2rem; } } @media screen and ( max-width: 39.9375em ) { .header__actions .button, .header__actions .form__submit { flex: 1; } } .header__actions .header__list { display: flex; flex-wrap: wrap; transform: translate(1.5rem, 0); } @media screen and ( max-width: 79.9375em ) { .header__actions .header__list { margin-inline-start: auto; } } @media screen and ( max-width: 39.9375em ) { .header__actions .header__list { order: -1; flex: 0 0 100%; transform: translate(-0.8rem, 0); } } .header__actions .header__item a { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; font-size: 1.4rem; line-height: 4.4rem; font-weight: 600; opacity: 0.5; transition: var(--transition); } .header__actions .header__item:hover a { color: var(--text-color); opacity: 1; } .header__actions .header__item.active a { color: var(--text-color); opacity: 1; position: relative; } .header__actions .header__item.active a::after { content: ""; display: block; width: 2.4rem; height: 0.1rem; background-color: currentColor; pointer-events: none; position: absolute; bottom: 0.6rem; } .header__switch { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; grid-area: wrapper; display: none; grid-template-columns: auto auto; grid-template-rows: auto; grid-template-areas: "text icon"; align-self: end; align-items: center; gap: 0.8rem; min-height: 4.4rem; margin-inline-start: auto; cursor: pointer; position: relative; z-index: 2; } .header__switch > * { pointer-events: none; } .header__switch span { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: text; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.0714285714em; color: var(--text-color); } .header__switch i { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: icon; display: block; width: 1.6rem; height: 0.1rem; background: var(--text-color); position: relative; } .header__switch i::before, .header__switch i::after { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--text-color); position: absolute; top: 0; left: 0; } .header__switch i::before { transform: translate(0, -0.4rem); } .header__switch i::after { transform: translate(0, 0.4rem); } @media screen and ( max-width: 79.9375em ) { .header__switch { display: grid; } } .hero { --hero-background: transparent; padding-block: calc(var(--header-height) + 4.8rem) var(--block-padding-block); position: relative; z-index: 2; } .hero::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--hero-background); position: absolute; bottom: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .hero--wide { grid-auto-flow: row; align-items: center; grid-column: 1/-1; padding-block: calc(var(--header-height) + 4.8rem) calc(var(--block-padding-block) * 0.5); padding-inline: var(--grid-space); } @media screen and ( max-width: 79.9375em ) { .hero--full { min-height: 100vh; min-height: 100dvh; } } .hero--center { text-align: center; } .hero--hexagon { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "title" "content" "image"; padding-block: calc(var(--header-height) + 4.8rem) calc(var(--block-padding-block)); justify-items: center; text-align: center; } .hero--hexagon .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .hero--hexagon .hero__content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .hero--hexagon .hero__image { -ms-grid-row: 3; -ms-grid-column: 1; justify-self: start; grid-area: image; } .hero--hexagon--top { padding-block-start: 0; grid-template-areas: "image" "title" "content"; } .hero--hexagon--top .hero__image { filter: brightness(60%); margin-block-end: var(--block-padding-block); } .hero--hexagon--top .hero__image img { -webkit-clip-path: url("#hexagonTop"); clip-path: url("#hexagonTop"); } .hero--hexagon--bottom { padding-block-end: 0; } .hero--hexagon--bottom .hero__image { align-self: end; margin-block-start: 4.8rem; } .hero--hexagon--bottom .hero__image img { -webkit-clip-path: url("#hexagonBottom"); clip-path: url("#hexagonBottom"); } .hero--green { --hero-background: var(--background-color--dark); } .hero__title + * { margin-top: 1.6rem; } @media screen and ( min-width: 64em ) { .hero__content { font-size: 1.8rem; } } @media screen and ( min-width: 85.375em ) { .hero__content { font-size: 2.1rem; } } .hero__content > * + * { margin-block-start: 2.4rem; } .hero__image:not(.hero__image--square) { flex: 0 0 calc(100% + var(--grid-space) * 2); width: calc(100% + var(--grid-space) * 2); aspect-ratio: 4/1; position: relative; left: 50%; transform: translate(-50%, 0); } .hero__image--square { order: -1; aspect-ratio: 1/1; -webkit-clip-path: url("#hexagon"); clip-path: url("#hexagon"); transform-origin: right 50%; filter: brightness(75%); } @media screen and ( max-width: 47.9375em ) { .hero__image--square { filter: brightness(60%); position: absolute; top: 0; right: 0; z-index: -1; transform: translate(var(--grid-space), -17%) scale(0.7); } } @media screen and ( min-width: 48em ) { .hero__image--square { transform: translate(0, 0) scale(2.4); } } @media screen and ( min-width: 64em ) { .hero__image--square { transform-origin: right 50%; transform: translate(0, 0) scale(2.3); } } @media screen and ( min-width: 80em ) { .hero__image--square { transform-origin: right 65%; transform: translate(-6%, 0) scale(1.7); } } @media screen and ( min-width: 48em ) { .hero__image--square img { transform: translate(17%, 0); } } @media screen and ( min-width: 80em ) { .hero__image--square img { transform: translate(10%, 0); } } @media screen and (min-width: 97.5625rem) { .hero__image--square img { transform: translate(0, 0); } } .hero__image img { width: 100%; height: 100%; } .hero__actions .button, .hero__actions .form__submit { width: 100%; } .dialog { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "nav" "content"; width: calc(100% - var(--grid-gap) * 2); max-width: 50rem; height: 80vh; max-height: 65rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-index-dialog); transition: var(--transition); } .dialog:not(.visible) { opacity: 0; pointer-events: none; } @media screen and ( max-width: 47.9375em ) { .dialog { height: calc(100vh - 5.6rem - 2.4rem); max-height: none; top: auto; bottom: 2.4rem; transform: translate(-50%, 0); } } .dialog::before { content: ""; display: block; width: 110vw; width: 110dvw; height: 110vh; height: 110dvh; background: var(--background-color--darker); opacity: 0.85; filter: grayscale(50%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .dialog__close { --text-color: var(--text-color--bright); display: flex; align-items: center; gap: 0.8rem; min-height: 4.4rem; cursor: pointer; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.0714285714em; position: absolute; top: 0; right: 0; transform: translate(0, -100%); } .dialog__close * { pointer-events: none; } .dialog__close i { display: block; width: 1.2rem; height: 1.2rem; position: relative; } .dialog__close i::before, .dialog__close i::after { content: ""; display: block; width: 100%; height: 0.1rem; background: currentColor; position: absolute; top: 50%; left: 50%; } .dialog__close i::before { transform: translate(-50%, 0) rotate(45deg); } .dialog__close i::after { transform: translate(-50%, 0) rotate(-45deg); } .dialog__nav { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: nav; position: relative; } .dialog > .dialog__nav { -ms-grid-row: 1; -ms-grid-column: 1; } @media screen and ( max-width: 79.9375em ){ .header__nav { -ms-grid-row: 1; -ms-grid-column: 1; } .header__actions { -ms-grid-row: 2; -ms-grid-column: 1; } .dialog__nav { -ms-grid-row: 1; -ms-grid-column: 1; } } .dialog__list { border-radius: var(--radius--default); border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; position: relative; } .dialog__list::after { content: ""; display: block; width: 100%; border-bottom: 0.1rem solid var(--stroke-color); position: absolute; bottom: 0; left: 0; } .dialog__item { flex: 0 0 50%; } .dialog__item button { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 4.4rem; background: var(--background-color--light); cursor: pointer; text-transform: uppercase; font-size: 1.3rem; font-weight: 600; position: relative; transition: var(--transition); } @media screen and ( min-width: 48em ) { .dialog__item button { min-height: 6.4rem; } } .dialog__item button:hover { background: var(--green--bright); } .dialog__item button.active { background: var(--background-color--dark); color: var(--text-color--bright); z-index: 2; } .dialog__content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; display: grid; height: 100%; background: var(--background-color); overflow: hidden; position: relative; } .hero--hexagon > .dialog__content { -ms-grid-row: 2; -ms-grid-column: 1; } .hero--hexagon--top > .dialog__content { -ms-grid-row: 3; -ms-grid-column: 1; } .dialog__content::before, .dialog__content::after { content: ""; display: block; width: 100%; height: 3.2rem; position: absolute; left: 0; z-index: 2; } .dialog__column { grid-column: 1/-1; grid-row: 1/-1; height: 100%; padding: 3.2rem; padding-block-end: 4.8rem; background: var(--background-color); opacity: 0; overflow-y: scroll; transition: var(--transition); } @media screen and ( max-width: 47.9375em ) { .dialog__column { padding-inline: 2.4rem; } .dialog__column .title, .dialog__column .block--rte h1, .dialog__column .dialog__rte h1, .block--rte .dialog__column h1, .dialog__rte .dialog__column h1, .dialog__column .block--rte h2, .dialog__column .dialog__rte h2, .block--rte .dialog__column h2, .dialog__rte .dialog__column h2, .dialog__column .block--rte h3, .dialog__column .dialog__rte h3, .block--rte .dialog__column h3, .dialog__rte .dialog__column h3, .dialog__column .block--rte h4, .dialog__column .dialog__rte h4, .block--rte .dialog__column h4, .dialog__rte .dialog__column h4, .dialog__column .block--rte h5, .dialog__column .dialog__rte h5, .block--rte .dialog__column h5, .dialog__rte .dialog__column h5, .dialog__column .block--rte h6, .dialog__column .dialog__rte h6, .block--rte .dialog__column h6, .dialog__rte .dialog__column h6 { font-size: 2.1rem; } } .dialog__column.visible { opacity: 1; } .dialog__column:not(.visible) { pointer-events: none; } .dialog__column hr { display: block; flex: 0 0 100%; height: 0.1rem; margin-block: 2.4rem; background: var(--stroke-color); } .dialog__column--dark { --form-background: var(--grey--600); background: var(--grey--600); } .dialog__page > * + * { margin-block-start: 1.6rem; } .dialog__sup { text-transform: uppercase; font-size: 1.2rem; font-weight: 600; color: var(--text-color--light); } .dialog__rte > * + * { margin-block-start: 1.6rem !important; } .dialog__rte--center *:not(.title--sup) { text-align: center; } .dialog__rte .icon, .dialog__rte .plan__ribbon::before, .dialog__rte .plan__ribbon::after, .dialog__rte .workflow::before, .dialog__rte .list li::before, .dialog__rte .plan__list li::before, .list .dialog__rte li::before, .plan__list .dialog__rte li::before { width: 100%; font-size: 12rem; } .dialog__rte .icon::before, .dialog__rte .plan__ribbon::before, .dialog__rte .workflow::before, .dialog__rte .list li::before, .dialog__rte .plan__list li::before, .list .dialog__rte li::before, .plan__list .dialog__rte li::before { color: var(--grey--600); } .dialog__rte .icon::after, .dialog__rte .plan__ribbon::after { color: var(--background-color); } .dialog__rte small { font-size: 1.3rem; font-weight: 600; color: var(--text-color--light); } .dialog__rte hr + * { margin-block-start: 0 !important; } .dialog__image { width: 12rem; height: auto; margin-inline: auto; } .dialog__profil { width: 12rem; margin-inline: auto; cursor: pointer; position: relative; } .dialog__profil img { aspect-ratio: 1/1; -webkit-clip-path: url("#hexagon"); clip-path: url("#hexagon"); } .dialog__profil input[type=file] { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; } .dialog__profil .icon, .dialog__profil .plan__ribbon::before, .dialog__profil .plan__ribbon::after, .dialog__profil .workflow::before, .dialog__profil .list li::before, .dialog__profil .plan__list li::before, .list .dialog__profil li::before, .plan__list .dialog__profil li::before { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; background: var(--background-color--accent); border-radius: 100rem; position: absolute; bottom: 0; right: 0; transform: translate(20%, -60%) scale(1.2); } .dialog__alert { --text-color: var(--text-color--dark); display: flex; gap: 1.6rem; padding: 1.6rem; border-radius: var(--radius--default); background: var(--background-color--accent); } .dialog__alert .icon, .dialog__alert .plan__ribbon::before, .dialog__alert .plan__ribbon::after, .dialog__alert .workflow::before, .dialog__alert .list li::before, .dialog__alert .plan__list li::before, .list .dialog__alert li::before, .plan__list .dialog__alert li::before { color: var(--text-color--dark); font-size: 1.5em; } .dialog__actions { margin-block-start: 2.4rem; } .dialog__actions + * { margin-block-start: 2.4rem; } .row { --row-background: var(--background-color); position: relative; z-index: 2; } .row--full { grid-column: 1/-1; padding-inline: var(--grid-space); } .row--contrast { --row-background: var(--background-color--light); --testimonial-background: var(--background-color); grid-column: 1/-1; padding-inline: var(--grid-space); } .row--contrast::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--row-background); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .row--green { --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); --row-background: var(--background-color--dark); --selection-background: #004e4e; } .row--yellow { --row-background: var(--background-color--accent); } .row--white { --row-background: var(--background-color); } .row--reduce { --block-padding-block: 7.2rem; } .block { padding-block: var(--block-padding-block); } .block + .block { padding-block-start: 0; } .block--hero { padding-block-start: calc(var(--header-height) + var(--block-padding-block) * 0.5); } .block--columns .block__list { gap: 3.2rem var(--grid-gap); } @media screen and ( min-width: 48em ) { .block--columns .block__list { gap: 4.8rem var(--grid-gap); } } @media screen and ( min-width: 64em ) { .block--columns .block__list { gap: 7.2rem var(--grid-gap); } } @media screen and ( min-width: 80em ) { .block--columns .block__list { gap: 9.6rem var(--grid-gap); } } .block--columns .block__item { justify-content: center; gap: 1.6rem 0; font-size: 1.8rem; text-align: center; } @media screen and ( min-width: 40em ) { .block--columns .block__item { padding-inline: 1.6rem; } } @media screen and ( min-width: 64em ) { .block--columns .block__item { padding-inline: 2.4rem; } } .block--columns .block__item > *:not(i) { flex: 0 0 100%; } .block--columns .block__item .icon, .block--columns .block__item .plan__ribbon::before, .block--columns .block__item .plan__ribbon::after, .block--columns .block__item .workflow::before, .block--columns .block__item .list li::before, .block--columns .block__item .plan__list li::before, .list .block--columns .block__item li::before, .plan__list .block--columns .block__item li::before { order: -1; font-size: 8rem; } @media screen and ( min-width: 48em ) { .block--columns .block__item .icon, .block--columns .block__item .plan__ribbon::before, .block--columns .block__item .plan__ribbon::after, .block--columns .block__item .workflow::before, .block--columns .block__item .list li::before, .block--columns .block__item .plan__list li::before, .list .block--columns .block__item li::before, .plan__list .block--columns .block__item li::before { font-size: 10rem; } } @media screen and ( min-width: 80em ) { .block--columns .block__item .icon, .block--columns .block__item .plan__ribbon::before, .block--columns .block__item .plan__ribbon::after, .block--columns .block__item .workflow::before, .block--columns .block__item .list li::before, .block--columns .block__item .plan__list li::before, .list .block--columns .block__item li::before, .plan__list .block--columns .block__item li::before { font-size: 12rem; } } @media screen and ( max-width: 47.9375em ) { .block--text-image .block__image { transform: translate(0, var(--block-padding-block)); } .block--text-image .block__image img { aspect-ratio: 5/2; -o-object-position: center top; object-position: center top; } } @media screen and ( min-width: 48em ) { .block--text-image { flex-wrap: nowrap; } } .block--image-text { --block-padding-block: 0; } @media screen and ( max-width: 63.9375em ) { .block--image-text { gap: 0 var(--grid-gap); } } .block--image-text .block__content { padding-block: 4rem; align-content: center; } .block--image-text .block__image { display: flex; justify-content: center; position: relative; order: -1; } @media screen and ( min-width: 64em ) { .block--image-text .block__image { justify-content: flex-end; } } .block--image-text .block__image img { aspect-ratio: 5/2; width: 100vw; max-width: none; } @media screen and ( min-width: 64em ) { .block--image-text .block__image img { aspect-ratio: 3/2; width: calc(100% + var(--grid-space)); -webkit-clip-path: url("#hexagonRight"); clip-path: url("#hexagonRight"); } } @media screen and ( min-width: 64em ) { .block--image-text.block--invert .block__image { order: 1; justify-content: flex-start; } } @media screen and ( min-width: 64em ) { .block--image-text.block--invert .block__image img { -webkit-clip-path: url("#hexagonLeft"); clip-path: url("#hexagonLeft"); } } .block--text-hexagon { grid-template-rows: 1fr auto auto 1fr; position: relative; z-index: 2; } .block--text-hexagon .block__title { grid-row: 2/span 1; } .block--text-hexagon .block__title + * { margin-block-start: 2.4rem; } .block--text-hexagon .block__content { grid-row: 3/span 1; } .block--text-hexagon .block__image { grid-row: 1/-1; } @media screen and ( max-width: 47.9375em ) { .block--text-hexagon .block__image { width: 50%; position: absolute; right: 0; top: 0; z-index: -1; opacity: 0.45; transform: translate(40%, -10%); } } .block--text-hexagon .block__image img { -webkit-clip-path: url("#hexagon"); clip-path: url("#hexagon"); transform-origin: right center; } @media screen and ( min-width: 48em ) { .block--text-hexagon .block__image img { transform: translate(50%, 0) scale(1.5); } } @media screen and ( min-width: 64em ) { .block--text-hexagon .block__image img { transform: translate(35%, 0) scale(1.2); } } .block--contrast { --block-background: var(--background-color--dark); position: relative; z-index: 2; } .block--contrast::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--block-background); position: absolute; bottom: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .block--center { text-align: center; justify-content: center; } .block--center .button-list, .block--center .form__field--submit { justify-content: center; } .block--center * + .button-list, .block--center * + .form__field--submit { margin-top: 3.2rem; } .block--center * + .block__image { margin-top: 4.8rem; } .block--banner { padding-block: 0; } .block--banner .block__content { padding-block: var(--block-padding-block); padding-inline: var(--grid-gap); } .block--banner .block__title + * { margin-top: 2.4rem; } .block--banner .block__image { width: 100vw; width: 100dvw; max-width: none; height: 100%; margin: 0; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } @media screen and ( max-width: 47.9375em ) { .block--banner .block__image { opacity: 0.5; } } .block--numbers { align-items: center; } @media screen and ( max-width: 79.9375em ) { .block--numbers { justify-content: center; text-align: center; } } @media screen and ( min-width: 80em ) { .block--numbers .block__list { margin-block-start: 0; } } .block--pricing .block__title, .block--pricing .block__content { text-align: center; } .block--pricing .block__list { margin-block-start: 11.2rem; } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .block--pricing .block__list { --grid-gap: 1.6rem; } } @media screen and ( max-width: 47.9375em ) { .block--pricing .block__list { gap: 7.2rem var(--grid-gap); } } .block--pricing .block__title + * { margin-block-start: 1.6rem; } .block--pricing .block__content { justify-content: center; } @media screen and ( min-width: 64em ) { .block--pricing .block__content { font-size: 2.1rem; } } @media screen and ( min-width: 64em ) { .block--pricing .block__content .button-switch { margin-inline-start: auto; } } .block--free-plan { align-items: center; } .block--free-plan .block__content .list, .block--free-plan .block__content .plan__list { font-size: 1.8rem; } .block--free-plan .plan { --plan-background: var(--grey--200); } @media screen and ( max-width: 47.9375em ) { .block--free-plan .plan { margin-block-start: 7.2rem; } } .block--free-plan .plan .icon::before, .block--free-plan .plan .plan__ribbon::before, .block--free-plan .plan .workflow::before, .block--free-plan .plan .list li::before, .block--free-plan .plan .plan__list li::before, .list .block--free-plan .plan li::before, .plan__list .block--free-plan .plan li::before { color: var(--text-color--inactive); } .block--free-plan .plan__price { --title-color: var(--title-color--dark); } @media screen and ( max-width: 47.9375em ) { .block--text-cta .block__content { text-align: center; } } .block--text-cta .block__actions { justify-content: center; } @media screen and ( min-width: 48em ) { .block--text-cta .block__actions { justify-content: flex-end; } } @media screen and ( max-width: 63.9375em ) { .block--contact { gap: 4.8rem var(--grid-gap); } } .block--contact .block__form { margin-block-start: 0 !important; } @media screen and ( max-width: 63.9375em ) { .block--contact .block__form { order: -1; } } .block__content { display: flex; flex-wrap: wrap; } .block__content > *:not(.button, .form__submit, .button-switch) { flex: 0 0 100%; } .block__content .title + *, .block__content .dialog__rte h1 + *, .dialog__rte .block__content h1 + *, .block__content .dialog__rte h2 + *, .dialog__rte .block__content h2 + *, .block__content .dialog__rte h3 + *, .dialog__rte .block__content h3 + *, .block__content .dialog__rte h4 + *, .dialog__rte .block__content h4 + *, .block__content .dialog__rte h5 + *, .dialog__rte .block__content h5 + *, .block__content .dialog__rte h6 + *, .dialog__rte .block__content h6 + *, .block__content .block--rte h1 + *, .block--rte .block__content h1 + *, .block__content .block--rte h2 + *, .block--rte .block__content h2 + *, .block__content .block--rte h3 + *, .block--rte .block__content h3 + *, .block__content .block--rte h4 + *, .block--rte .block__content h4 + *, .block__content .block--rte h5 + *, .block--rte .block__content h5 + *, .block__content .block--rte h6 + *, .block--rte .block__content h6 + * { margin-top: 1.8rem; } .block__content p + * { margin-top: 0.5em; } .block__content address { margin-block-start: 1.6rem; } .block__content address p { display: flex; align-items: center; } .block__content address a { display: block; padding: 0.8rem 0; } .block__content address .icon, .block__content address .plan__ribbon::before, .block__content address .plan__ribbon::after, .block__content address .workflow::before, .block__content address .list li::before, .block__content address .plan__list li::before, .list .block__content address li::before, .plan__list .block__content address li::before { font-size: 2.4rem; margin-inline-end: 1em; } .block__footer { display: block; } .block * + .block__footer { margin-block-start: 2.4rem; } .block * + .block__form { margin-block-start: 1.5em; } .block * + .block__actions { margin-block-start: 2.4rem; } .block__title + * { margin-block-start: 3.2rem; } @media screen and ( min-width: 64em ) { .block__title + * { margin-block-start: 4.8rem; } } @media screen and ( min-width: 64em ) { .block__title + * { margin-block-start: 5.6rem; } } @media screen and ( min-width: 80em ) { .block__title + * { margin-block-start: 7.2rem; } } .block * + .button:not(.form__submit), .block * + .form__submit:not(.form__submit), .block .button:not(.form__submit) + *, .block .form__submit:not(.form__submit) + * { margin-block-start: 1.8rem; } @keyframes marquee-right-to-left { from { transform: translate(0, 0); } to { transform: translate(-50%, 0); } } .marquee { display: flex; width: 100vw; width: 100dvw; max-width: var(--layout-max-width); padding-inline: var(--grid-space); overflow: hidden; position: relative; left: 50%; transform: translate(-50%, 0); } .marquee::before, .marquee::after { content: ""; display: block; width: calc(var(--grid-space) * 2); height: 100%; background: linear-gradient(to right, var(--background-color) 50%, transparent 100%); pointer-events: none; position: absolute; top: 0; z-index: 2; } .marquee::before { left: 0; } .marquee::after { right: 0; transform: translate(0.1rem, 0) scale(-1, 1); } .marquee__scroller { display: flex; animation: marquee-right-to-left 10s linear infinite; } @media screen and ( min-width: 48em ) { .marquee__scroller { animation-duration: 8s; } } @media screen and ( min-width: 80em ) { .marquee__scroller { animation-duration: 9s; } } .marquee__scroller:hover { animation-play-state: paused; } .marquee__list { display: flex; } .marquee__item { padding-inline: calc(var(--grid-gap)); } .marquee img { width: 35vw; max-width: 30rem; aspect-ratio: 2/1; } @media screen and ( min-width: 48em ) { .marquee img { width: 25vw; } } @media screen and ( min-width: 80em ) { .marquee img { width: 20vw; } } .workflow { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "icon" "content"; gap: 1.6rem; padding-inline: 1.6rem; } .workflow::before, .workflow::after { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: icon; justify-self: center; align-self: center; aspect-ratio: 1/1; font-size: 4rem; position: relative; z-index: 3; transform: translate(-4.2rem, -2.4rem); } .workflow::before { content: "\e906"; } .workflow::after { content: counter(index); width: 4rem; font-size: 2rem; line-height: 4rem; font-weight: 800; z-index: 4; } .workflow__list { counter-reset: index; } @media screen and ( max-width: 47.9375em ) { .workflow__list { gap: 3.2rem var(--grid-gap); } } .workflow__item { counter-increment: index; } .workflow__title { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .hero--hexagon > .workflow__title { -ms-grid-row: 2; -ms-grid-column: 1; } .hero--hexagon--top > .workflow__title { -ms-grid-row: 3; -ms-grid-column: 1; } @media screen and ( min-width: 80.0625em ) { .workflow__title { font-size: 1.8rem; } } .workflow__icon { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: icon; justify-self: center; font-size: 10rem; --icon-color: var(--text-color); } .workflow__icon::after { color: transparent; -webkit-text-stroke: 0.4rem var(--text-color); } .slideshow { position: relative; gap: 0 var(--grid-gap); } .slideshow__list { position: relative; } @media screen and ( max-width: 47.9375em ) { .slideshow__list { --grid-gap: .8rem; } } .slideshow__list::before, .slideshow__list::after { content: ""; display: block; width: calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1.01 + var(--grid-gap) * (1.01 - 0) + 0%); height: 100%; background: linear-gradient(to right, var(--row-background), transparent); position: absolute; z-index: 2; } .slideshow__list::before { left: 0; transform: translate(-100%, 0); } .slideshow__list::after { background: linear-gradient(to left, var(--row-background), transparent); right: 0; transform: translate(100%, 0); } .slideshow__item { height: 100%; grid-row: 1/-1; } .slideshow__action { width: 4.4rem; min-width: 4.4rem; height: 100%; cursor: pointer; position: absolute; top: 0; z-index: 2; transition: var(--transition); } @media screen and ( min-width: 64em ) { .slideshow__action { width: var(--grid-space); } } .slideshow__action::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; border: 0.2rem solid var(--stroke-color--dark); border-top: 0; border-right: 0; position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%) rotate(45deg); } @media screen and ( min-width: 64em ) { .slideshow__action { width: calc(((100%) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + 0%); } } .slideshow__action--previous { left: 0; } @media screen and ( max-width: 63.9375em ) { .slideshow__action--previous { transform: translate(calc(var(--grid-space) * -1), 0); } } .slideshow__action--next { right: 0; } @media screen and ( max-width: 63.9375em ) { .slideshow__action--next { transform: translate(var(--grid-space), 0); } } .slideshow__action--next::before { transform: translate(-75%, -50%) rotate(45deg) scale(-1); } .testimonial { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header" "content"; height: 100%; padding: 3.2rem; gap: 1.6rem; background: var(--testimonial-background); border-radius: var(--radius--default); position: relative; z-index: 2; } .testimonial__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "image name" "image position"; gap: 0.4rem 1.2rem; } .testimonial__name { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: name; align-self: end; } .testimonial__position { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: position; align-self: start; color: var(--text-color--inactive); } @media screen and ( max-width: 47.9375em ) { .testimonial__position { font-size: 1.4rem; } } .testimonial__content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .hero--hexagon > .testimonial__content { -ms-grid-row: 2; -ms-grid-column: 1; } .hero--hexagon--top > .testimonial__content { -ms-grid-row: 3; -ms-grid-column: 1; } @media screen and ( max-width: 47.9375em ) { .testimonial__content { font-size: 1.4rem; } } .testimonial__image { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: image; width: 7.2rem; height: 7.2rem; aspect-ratio: 1/1; -webkit-clip-path: url("#hexagon"); clip-path: url("#hexagon"); } .hero--hexagon--top > .testimonial__image { -ms-grid-row: 1; -ms-grid-column: 1; } .testimonial__header > .testimonial__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .number { text-align: center; } .number mark { display: block; font-family: var(--title-font); font-size: 6.4rem; line-height: 1.5em; font-weight: 800; color: var(--text-color--accent); } @media screen and ( min-width: 48em ) { .number mark { font-size: 5.6rem; line-height: 1.2em; } } @media screen and ( min-width: 80em ) { .number mark { font-size: 8rem; } } .number__list { display: flex; gap: var(--grid-gap); } @media screen and ( max-width: 47.9375em ) { .number__list { gap: 3.2rem var(--grid-gap); flex-wrap: wrap; } } .number__item { flex: 0 0 100%; } @media screen and ( min-width: 48em ) { .number__item { flex: 1; } } @media screen and ( max-width: 47.9375em ) { .number__item + .number__item { border-top: 0.1rem solid var(--stroke-color--bright); } } @media screen and ( min-width: 48em ) { .number__item + .number__item { border-left: 0.1rem solid var(--stroke-color--bright); } } .plan { --plan-background: var(--green--go); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header" "content"; height: 100%; border-bottom-left-radius: var(--radius--default); border-bottom-right-radius: var(--radius--default); background: var(--background-color); box-shadow: 0 0 2.4rem rgba(0, 43, 44, 0.15); } .plan--plus { --plan-background: var(--green--plus); } .plan--maxi { --plan-background: var(--green--maxi); } .plan__header { --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); padding-block: 5.6rem 3.2rem; padding-block-start: 8rem; gap: 1.6rem 0; border-top-left-radius: var(--radius--default); border-top-right-radius: var(--radius--default); background: var(--plan-background); text-align: center; position: relative; } .plan__icon { font-size: 10rem; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } @media screen and ( min-width: 64em ) { .plan__icon { font-size: 12rem; } } @media screen and ( min-width: 80em ) { .plan__icon { font-size: 14rem; } } .plan__icon::after { color: var(--text-color); -webkit-text-stroke: 0.8rem var(--plan-background); } .plan__icon::before { color: var(--plan-background); font-size: 0.4em; } .plan__icon--building-2::before { font-size: 0.55em; } .plan__informations { font-size: 1.3rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.0384615385em; } .plan__ribbon { width: 14rem; position: absolute; top: 3.2rem; left: 50%; transform: translate(-50%, 0); z-index: 2; } @media screen and ( max-width: 63.9375em ) { .plan__ribbon { width: 10rem; top: 2rem; } } .plan__ribbon span { display: block; border-radius: 0.2rem; background: var(--background-color--accent); font-size: 1.2rem; line-height: 2rem; font-weight: 700; text-transform: uppercase; color: var(--text-color--dark); } .plan__ribbon::before, .plan__ribbon::after { content: "\e906"; color: var(--background-color--accent); filter: brightness(60%); font-size: 1em; position: absolute; z-index: -1; top: 50%; } .plan__ribbon::before { left: 0; transform: translate(-50%, -50%) rotate(90deg); } .plan__ribbon::after { right: 0; transform: translate(50%, -50%) rotate(90deg); } .plan__content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; justify-content: center; align-content: space-between; padding: 2.4rem 1.6rem; height: 100%; } .hero--hexagon > .plan__content { -ms-grid-row: 2; -ms-grid-column: 1; } .hero--hexagon--top > .plan__content { -ms-grid-row: 3; -ms-grid-column: 1; } @media screen and ( min-width: 64em ) { .plan__content { padding: 3.2rem; } } @media screen and ( max-width: 47.9375em ) { .plan__content { padding: 2.4rem; } } .plan__content * + .button, .plan__content * + .form__submit { margin-block-start: 3.2rem !important; } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .plan__list { font-size: 1.3rem; } } .plan__item--more { --text-color: var(--succeed); } .plan__price::before, .plan__informations::before { content: attr(data-text); display: none; } .js-pricing.quarterly .plan__price::before, .js-pricing.quarterly .plan__informations::before { display: inline-block; } .js-pricing.quarterly .plan__price span, .js-pricing.quarterly .plan__informations span { display: none; } .accordion__item { flex: 0 0 100%; border-top: 0.1rem solid var(--stroke-color); position: relative; } .accordion__item:last-child { border-bottom: 0.1rem solid var(--stroke-color); } .accordion__title { width: 100%; min-height: 6.4rem; padding-block: 2.4rem; padding-inline-end: 5.6rem; font-weight: 600; line-height: 1.5; position: relative; } .accordion__title::after { content: ""; display: block; width: 1rem; height: 1rem; border: 0.2rem solid var(--stroke-color); border-top: 0; border-left: 0; position: absolute; right: 2.8rem; top: 50%; transform: translate(50%, -75%) rotate(45deg); transition: var(--transition); } .accordion__content { padding-inline-end: 5.6rem; transform: translate(0, -1.2rem); } .accordion__content > *:last-child { padding-block-end: 1.2rem; } .footer { --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); --selection-background: #004e4e; padding-block: 6.4rem 4rem; position: relative; z-index: 2; } .footer .logo { --logo-talent: var(--white); } .footer::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--background-color--dark); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .footer__logo { align-self: flex-start; } @media screen and ( max-width: 47.9375em ) { .footer__logo { margin-block-end: 3.2rem; } } .footer__logo svg { width: auto; max-width: 100%; height: 4rem; } @media screen and ( min-width: 48em ) { .footer__logo svg { transform: translate(0, -40%); } } .footer__col--nav .footer__list { line-height: 4rem; } @media screen and ( min-width: 64em ) { .footer__col--nav .footer__list { -moz-column-count: 2; column-count: 2; -moz-column-gap: var(--grid-gap); column-gap: var(--grid-gap); } } .footer__col--legal { --text-color: rgba(255, 255, 255, 0.6); align-items: center; justify-content: space-between; padding-block-start: 4rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.15); margin-block-start: 4rem; font-size: 1.4rem; } @media screen and ( max-width: 47.9375em ) { .footer__col--legal { flex-wrap: wrap; padding-block-start: 2.4rem; margin-block-start: 2.4rem; } } .footer__col--legal .footer__list { display: flex; gap: 1.6rem; line-height: 3.2rem; } @media screen and ( max-width: 79.9375em ) { .footer__col--legal .footer__list { flex-direction: column; gap: 0; text-align: right; } } @media screen and ( max-width: 47.9375em ) { .footer__col--legal .footer__list { padding-block-start: 2.4rem; flex: 0 0 100%; text-align: center; } } .footer__col--legal .footer__item a { transition: var(--transition); } .footer__col--legal .footer__item:hover { --text-color: var(--text-color--bright); } @media screen and ( max-width: 47.9375em ) { .footer__col--legal small { flex: 0 0 100%; text-align: center; } } @media screen and ( max-width: 47.9375em ) { .footer__title { font-size: 2.1rem; } } .footer__title + * { margin-block-start: 2.4rem; } @media screen and ( max-width: 47.9375em ) { .footer__title + * { margin-block-start: 1.2rem; } } .page--contrast .header { --text-color: var(--text-color--bright); --stroke-color: var(--stroke-color--bright); --selection-background: #004e4e; } .page--contrast .header__action { --button-primary: var(--green--go); --button-secondary: var(--white); --button-tertiary: rgba(38, 110, 106, 0.2); } .page--contrast .header .logo { --logo-talent: var(--white); } .js-form .is-focused { --form-border-color: var(--stroke-color--dark); } .js-form .is-focused::before { opacity: 1; transform: scale(1); } .js-form .is-filled { --form-border-color: var(--stroke-color--dark); } .js-form .is-invalid { --form-required: var(--error); --form-border-color: var(--error); --form-shadow: #fcd6d7; } .accordion__button .icon, .accordion__button .workflow::before, .accordion__button .list li::before, .list .accordion__button li::before, .accordion__button .plan__ribbon::before, .accordion__button .plan__ribbon::after, .accordion__button .plan__list li::before, .plan__list .accordion__button li::before { transition: var(--transition); } .js-accordion { will-change: content; } .js-accordion-button { cursor: pointer; } .js-accordion-button > * { pointer-events: none; } .js-accordion-content { overflow: hidden; opacity: 0; transition: var(--transition); } .js-accordion.expand .js-accordion-content { height: var(--accordion-height--open); opacity: 1; } .js-accordion.expand .js-accordion-button::after { transform: translate(50%, -25%) rotate(45deg) scale(-1); } .js-accordion:not(.expand) .js-accordion-content { height: var(--accordion-height--close, auto); opacity: 0; } .header, .header::before, .header__logo svg, .header__wrapper, .header__switch span, .header__switch i, .header__switch i::after, .header__switch i::before { transition: var(--transition); } .header::before { transition-property: transform; } body:not(.scrolled) .js-header .header__logo svg { transform: translate(0, -10%); } body:not(.scrolled) .js-header::before { transform: translate(-50%, -100%); } body.scrolled .js-header { --text-color: var(--text-color--bright); --stroke-color: var(--stroke-color--bright); --selection-background: #004e4e; } body.scrolled .js-header::before { transform: translate(-50%, calc(-100% + var(--header-height))); } body.scrolled .js-header .header__action { --button-primary: var(--green--go); --button-secondary: var(--white); --button-tertiary: rgba(38, 110, 106, 0.2); } body.scrolled .js-header .header__logo .logo { --logo-talent: var(--white); } body.scrolled .js-header .header__logo svg { transform: translate(0, -10%); } @media screen and ( min-width: 80.0625em ) { body.scrolled .js-header .header__logo svg { transform: translate(0, -10%) scale(0.75); } } @media screen and ( max-width: 79.9375em ) { body:not(.menu-open) .js-header .header__wrapper { opacity: 0; pointer-events: none; } } @media screen and ( max-width: 79.9375em ) { body.menu-open .js-header { --text-color: var(--text-color--bright); --stroke-color: var(--stroke-color--bright); --selection-background: #004e4e; } body.menu-open .js-header::before { transform: translate(-50%, 0); } body.menu-open .js-header .header__action { --button-primary: var(--green--go); --button-secondary: var(--white); --button-tertiary: rgba(38, 110, 106, 0.2); } body.menu-open .js-header .header__logo .logo { --logo-talent: var(--white); } body.menu-open .js-header .header__logo svg { transform: translate(0, -10%) scale(1); } body.menu-open .js-header .header__wrapper { opacity: 1; } body.menu-open .js-header .header__switch i { background: transparent; } body.menu-open .js-header .header__switch i::before { transform: translate(0, 0) rotate(135deg); } body.menu-open .js-header .header__switch i::after { transform: translate(0, 0) rotate(45deg); } } .js-slideshow { --slideshow-index: 0; --slideshow-max: 1; --slideshow-step: 1; } @media screen and ( min-width: 48em ) { .js-slideshow { --slideshow-step: 2; } } @media screen and ( min-width: 64em ) { .js-slideshow { overflow: hidden; } } .js-slideshow.first .slideshow__action--previous { opacity: 0; pointer-events: none; } .js-slideshow.last .slideshow__action--next { opacity: 0; pointer-events: none; } .js-slide { --slide-index: 0; --slide-position: 0; transform: translate(calc(100% * var(--slideshow-index) * var(--slideshow-step) * -1 + 100% * var(--slide-index) + var(--grid-gap) * (var(--slide-index) - var(--slideshow-step) * var(--slideshow-index))), 0); transition: var(--transition); transition-duration: 0.64s; }