@charset "UTF-8"; /* 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 *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .inter-regular { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; } .inter-semibold { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .inter-bold { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; } :root { --index: calc(1vw + 1vh); --main-font: "Inter"; --font-16: 1rem; --font-18: 1.25rem; --accent-color: #6366F1; --white: #fff; --light: #FAFAFA; --border-color-light: #EBEBEB; --line-height: 1.4; --main-color: #6B7280; --secondary-color: #212B36; --secondary-bg: #E0E7FF; --radius-border-24: 24px; --radius-border-16: 16px; --shadow: 0px 14px 20px rgba(33, 33, 33, 0.2); --shadow-hover: 0px 25px 50px 0px rgba(0, 0, 0, 0.10), 0px -25px 50px 0px rgba(255, 255, 255, 0.50); } body { font-family: var(--main-font); font-size: var(--font-16); line-height: var(--line-height); color: var(--main-color); min-width: 320px; position: relative; overflow-x: hidden; min-height: 100vh; background-color: var(--white); text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body { scrollbar-gutter: stable; } ::-moz-selection { background-color: var(--accent-color); color: var(--white); } ::selection { background-color: var(--accent-color); color: var(--white); } input, textarea { outline: none; caret-color: var(--accent-color); } input:focus-visible, textarea:focus-visible { outline: none; } .container { overflow-x: hidden; } .blue-btn { height: 66px; position: relative; } .blue-btn::before, .blue-btn::after { content: ""; position: relative; display: block; -webkit-transition: all 0.4s; transition: all 0.4s; height: 49px; width: 49px; border-radius: 50%; background: url(../../assets/images/dist/login-blue.svg) no-repeat center; -ms-flex-negative: 0; flex-shrink: 0; } .blue-btn::after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; opacity: 0; } .blue-btn:hover::before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; height: 0; opacity: 0; } .blue-btn:hover::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); width: 49px; opacity: 1; } .white-btn { height: 66px; position: relative; } .white-btn::before, .white-btn::after { content: ""; position: relative; display: block; -webkit-transition: all 0.4s; transition: all 0.4s; height: 49px; width: 49px; border-radius: 50%; background: url(../../assets/images/dist/login-white.svg) no-repeat center; -ms-flex-negative: 0; flex-shrink: 0; } .white-btn::after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; opacity: 0; } .white-btn:hover::before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; opacity: 0; } .white-btn:hover::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); width: 49px; height: 49px; opacity: 1; } .dark-btn { height: 66px; position: relative; } .dark-btn::before, .dark-btn::after { content: ""; position: relative; display: block; -webkit-transition: all 0.4s; transition: all 0.4s; height: 49px; width: 49px; border-radius: 50%; background: url(../../assets/images/dist/mail.svg) no-repeat center; -ms-flex-negative: 0; flex-shrink: 0; } .dark-btn::after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; opacity: 0; } .dark-btn:hover::before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 0; opacity: 0; } .dark-btn:hover::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); width: 49px; height: 49px; opacity: 1; } .nav { -webkit-transition: 0.5s; transition: 0.5s; } .nav_hidden { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .dialog-layout { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease-out, visibility 0s 0.3s; transition: opacity 0.2s ease-out, visibility 0s 0.3s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .dialog-layout.active { visibility: visible; opacity: 1; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .dialog-layout.active .dialog-container { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .dialog-container { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } .close-svg { position: absolute; right: 20px; top: 20px; cursor: pointer; } @media (max-width: 480px) { .dialog-container { width: 90%; } } .hamburger { width: 30px; display: block; cursor: pointer; position: relative; } .top-line, .bottom-line, .middle-line { transform-box: fill-box; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .hamburger.active .top-line { -webkit-animation: down-rotate 0.6s ease-out both; animation: down-rotate 0.6s ease-out both; } .hamburger.active .bottom-line { -webkit-animation: up-rotate 0.6s ease-out both; animation: up-rotate 0.6s ease-out both; } .hamburger.active .middle-line { -webkit-animation: hide 0.6s ease-out forwards; animation: hide 0.6s ease-out forwards; } @-webkit-keyframes up-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } } @keyframes up-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } } @-webkit-keyframes down-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } } @keyframes down-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } } @-webkit-keyframes hide { 29% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } @keyframes hide { 29% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } .hamburger:not(.active) .top-line { -webkit-animation: down-rotate-reverse 0.6s ease-out both; animation: down-rotate-reverse 0.6s ease-out both; } .hamburger:not(.active) .bottom-line { -webkit-animation: up-rotate-reverse 0.6s ease-out both; animation: up-rotate-reverse 0.6s ease-out both; } .hamburger:not(.active) .middle-line { -webkit-animation: show 0.6s ease-out forwards; animation: show 0.6s ease-out forwards; } @-webkit-keyframes up-rotate-reverse { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes up-rotate-reverse { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes down-rotate-reverse { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes down-rotate-reverse { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .bg-plus { background: url(../../assets/images/dist/plus.svg) no-repeat right center; } .bg-white-plus { background: url(../../assets/images/dist/white-plus.svg) no-repeat right center; } .list-style-dash { list-style-type: "— "; list-style-position: inside; } #modal-menu { -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0); opacity: 0; visibility: hidden; height: calc(100% - 50px); } #modal-menu.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; } .tarif-tabs li { background: #fff; color: #6B7280; } .tarif-tabs li.active { background: #E0E7FF; color: #6366F1; } .footer-menu li:hover a { color: white; border-bottom: 0.5px dashed rgba(212, 212, 212, 0.4941176471); } .footer-menu:hover a { color: #D4D4D4; } .offer { position: relative; text-indent: 30px; } .offer::before { content: ""; position: absolute; border: 1px solid #6366F1; width: 20px; height: 20px; border-radius: 5px; left: 0; top: -3px; } .offer.error::before { content: ""; position: absolute; border: 1px solid #FCA5AD; width: 20px; height: 20px; border-radius: 5px; left: 0; top: -3px; } .agreed { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .agreed:checked + .offer::after { content: ""; background: url(../../assets/images/dist/Check.svg) no-repeat center/cover; display: block; position: absolute; width: 20px; height: 20px; left: 0; top: -3px; } .tabs-container img { max-height: 570px; } @media (max-width: 500px) { section img { max-height: 345px; } } .checkbox .path { fill: none; stroke: #E5E7EB; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease, stroke .5s ease; stroke-dasharray: 241 9999999; stroke-dashoffset: 0; } .checkbox input:checked ~ svg .path { stroke-dasharray: 70.5096664428711 9999999; stroke-dashoffset: -262.2723388671875; stroke: #6366F1; } svg.error > .path { fill: none; stroke: rgb(252 165 165); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease, stroke .5s ease; stroke-dasharray: 241 9999999; stroke-dashoffset: 0; }