/*** 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 *)) { 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; } /* 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; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* exo-300 - latin */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 300; src: url('./fonts/exo-v20-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-v20-latin-300.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-v20-latin-300.svg#Exo') format('svg'); /* Legacy iOS */ } /* exo-regular - latin */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 400; src: url('./fonts/exo-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-v20-latin-regular.svg#Exo') format('svg'); /* Legacy iOS */ } /* exo-500 - latin */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 500; src: url('./fonts/exo-v20-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-v20-latin-500.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-v20-latin-500.svg#Exo') format('svg'); /* Legacy iOS */ } /* exo-600 - latin */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 600; src: url('./fonts/exo-v20-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-v20-latin-600.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-v20-latin-600.svg#Exo') format('svg'); /* Legacy iOS */ } /* exo-700 - latin */ @font-face { font-family: 'Exo'; font-style: normal; font-weight: 700; src: url('./fonts/exo-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-v20-latin-700.svg#Exo') format('svg'); /* Legacy iOS */ } /* exo-2-300 - latin */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300; src: url('./fonts/exo-2-v20-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-2-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-2-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-2-v20-latin-300.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-2-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-2-v20-latin-300.svg#Exo2') format('svg'); /* Legacy iOS */ } /* exo-2-regular - latin */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; src: url('./fonts/exo-2-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-2-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-2-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-2-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-2-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-2-v20-latin-regular.svg#Exo2') format('svg'); /* Legacy iOS */ } /* exo-2-500 - latin */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; src: url('./fonts/exo-2-v20-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-2-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-2-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-2-v20-latin-500.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-2-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-2-v20-latin-500.svg#Exo2') format('svg'); /* Legacy iOS */ } /* exo-2-600 - latin */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; src: url('./fonts/exo-2-v20-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-2-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-2-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-2-v20-latin-600.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-2-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-2-v20-latin-600.svg#Exo2') format('svg'); /* Legacy iOS */ } /* exo-2-700 - latin */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; src: url('./fonts/exo-2-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('./fonts/exo-2-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/exo-2-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/exo-2-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('./fonts/exo-2-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('./fonts/exo-2-v20-latin-700.svg#Exo2') format('svg'); /* Legacy iOS */ } input[type=text], input[type=email] { background: white; border-radius: 22px; padding: 12px 18px; font-size: 14px; color: black; } input[type=text]::placeholder, input[type=email]::placeholder { color: #878787; } input[type=submit] { background: #ffaa2d; font-size: 0.9em; border-radius: 22px; padding: 0.6em 2em; color: white; } .ml-h { margin-left: 0.5em; } .mt-h { margin-top: 0.5em; } .mt { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-4 { margin-top: 4rem; } .text-white { color: white; } .text-gray { color: gray; } .text-center { text-align: center; } .size-l { font-size: 1.4em; } .size-s { font-size: 0.7em; } .light { font-weight: 300; } .flex { display: flex; } .flex-1 { flex-grow: 1; } @media only screen and (max-width: 1000px) { .size-s { font-size: 0.925em; } .size-l { font-size: 1.2rem; } } .hamburger .line { width: 30px; height: 3px; background-color: #ecf0f1; display: block; margin: 8px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } .hamburger { cursor: pointer; } .hamburger.is-active .line:nth-child(2) { opacity: 0; } .hamburger.is-active .line:nth-child(1) { transform: translateY(11px) rotate(45deg); } .hamburger.is-active .line:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } body, html { margin: 0; } body { font-family: "Exo"; background: #252525; } a:link, a:visited { color: #ffaa2d; text-decoration: underline; } a:hover, a:active { color: #ffe13c; } #hero { background-image: linear-gradient(to bottom right, #8356c5 0%, #1f3a85 50%, #051520 100%); background-image: linear-gradient(to bottom right, #783ECB 0%, #5164DC 50%, #0099FF 100%); z-index: 0; overflow: hidden; position: relative; text-shadow: 0 0 1px white; } #hero > #hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; } #hero-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); z-index: 110; } #hero-divider svg { position: relative; display: block; width: calc(119% + 1.3px); height: 20px; } #hero-divider .shape-fill { fill: #212121; } #hero-container { position: relative; left: 0; top: 0; right: 100%; bottom: 100%; z-index: 10000; } #hero-background { position: absolute; left: 0; top: 0; right: 100%; bottom: 100%; } .layout-center { margin: 0 auto; width: 860px; z-index: 10; } h1 { font-size: 3rem; font-weight: 700; } h2 { font-size: 2.6rem; font-weight: 600; } h3 { font-size: 2.2rem; font-weight: 500; } h4 { font-size: 1.6rem; font-weight: 400; } h5 { font-size: 1.2rem; } h6 { font-size: 1.1rem; } b { font-weight: bold; } #hero-content { display: flex; margin-bottom: 60px; z-index: 100000; } #hero-about-us { width: 660px; padding-right: 60px; } @keyframes construction-hover { 0% { transform: translateY(0px); } 30% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } #hero-construction { flex-grow: 1; display: flex; flex-direction: column; justify-content: end; align-content: center; position: relative; } #hero-construction #construction-container { position: relative; flex-grow: 0; } #hero-construction img { height: 200px; } #hero-construction #construction-logo { animation: construction-hover 2.4s ease-in-out infinite; } #hero-construction #construction-logo-bg { position: absolute; left: 0; top: 0; opacity: 0.2; } .text-shadow { text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); } #hero-header { display: flex; height: 52px; } #hero-header #logo-top { height: inherit; } .section-app { padding: 96px 0; color: #a8a8a8; } .section-app .section-app-wrapper { display: flex; } .section-app h4 { color: white; } .section-app .section-app-subtitle { color: #ffaa2d; font-weight: 500; } .section-app p { padding: 12px 0; color: #eeeeee; font-weight: 100; } .section-app .app-text-container { width: 100%; } .section-app .app-icon-container { padding-right: 32px; } .section-app .app-icon-container > img { width: 180px; min-width: 180px; } .section-app.app-1 { background: #212121; } .section-app.app-2 { background: #1A1A1A; } #footer { background: black; } @media only screen and (max-width: 1000px) { .section-app { text-align: center; } .section-app .section-app-wrapper { display: block; } .section-app .app-icon-container { padding-right: 0; padding-bottom: 16px; } .section-app .app-icon-container > img { height: 64px; width: auto; min-width: auto; } h3 { font-size: 2rem; } html { font-size: 13px; } #logo-top { height: 36px; } .layout-center { width: 90%; } #hero-about-us { width: 100%; padding-right: 0px; text-align: center; } #hero-construction { width: 100%; margin-top: 2rem; display: none; } #hero-content { flex-direction: column; margin-bottom: 60px; } } /*# sourceMappingURL=style.css.map */