/*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ body { margin: 0; padding: 0; } /* Reapply the pointer cursor for anchor tags */ a, button { text-decoration: none; cursor: revert; color: inherit; } a:hover, a:visited, a:active, button:hover, button:visited, button:active { color: inherit; } /* 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; appearance: revert; } header { background: #001E35; padding: 0.7em; } header * { display: flex; } header .logo { align-items: center; width: 400px; min-width: 221px; margin-right: 1em; } header .logo img { height: 80px; width: auto; } header .btn { padding: 0.6em 1em; margin: 0.5em 0.5em; border-radius: 5px; align-items: center; } header .btn.btn-link { color: #00FFFF; } header .btn.btn-filled { border: 2px solid #00FFFF; background-color: #00FFFF; color: #001E35; } header .btn.btn-outlined { border: 2px solid #00FFFF; color: #00FFFF; } header .menu { flex-grow: 1; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-end; font-size: 0.875rem; } header .menu .nav-link { margin: 0.5em 1em; color: #00FFFF; } header .menu .nav { text-transform: uppercase; } header .close-mobile-menu, header .open-mobile-menu { display: none; } @media (max-width: 768px) { header { padding: 1em 0.5em; } header .menu { display: none; position: fixed; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; flex-direction: column; justify-content: center; padding: 0; margin: 0; font-size: 1.5rem; background: #001E35; } header .menu * { flex-direction: column; } header .menu .nav { margin: 0.9em 0; } header .menu.open { display: flex; } header .open-mobile-menu { color: #00FFFF; display: flex; font-size: 24px; align-items: center; justify-content: flex-end; flex-grow: 1; } header .close-mobile-menu { display: flex; color: #00FFFF; font-size: 2em; margin-top: 2em; } } footer { background: #001E35; color: #00FFFF; padding: 1.5em 1em; } footer div { display: flex; } footer .container { flex-direction: column; } footer h2 { font-size: calc(1.625rem + 3vw); font-weight: 700; line-height: 1.1; letter-spacing: -0.05em; } footer .many-rows { flex-direction: row; } footer .many-rows > * { display: flex; } footer .social { min-width: 50%; justify-content: center; } footer .social a, footer .social div { margin: 1em 1em; } footer .validity-notice { display: inline; font-size: 0.85em; letter-spacing: -0.03em; line-height: 1.5; margin-bottom: 1em; } footer .validity-notice a { text-decoration: underline; } footer .legal a, footer .legal .no-cookies { margin: 0.5em 0; } footer .legal .left { flex: 1; } footer .legal .right { align-items: flex-end; } @media (max-width: 768px) { footer { padding: 2.2em 0.5em; } footer div { flex-direction: column; } footer .legal .right { align-items: flex-start; } } .terminal { position: relative; background: #20190d; text-shadow: 0px 0px 10px #8bc34a8c; overflow: hidden; } .terminal * { font-family: "VT323", monospace; font-size: 1.4em; line-height: 1em; margin: 0; color: #8bc34a; letter-spacing: 0; } .terminal.one-line { border-radius: 0.5em; } .terminal.one-line .content { padding: 0.5em; } .terminal .content { white-space: pre-line; } .terminal .content .ps { font-size: 1em; user-select: none; } .terminal .big-title { font-size: 3em; } .terminal h1 { text-transform: uppercase; font-weight: bold; } .terminal ::-moz-selection { /* Code for Firefox */ color: #20190d; background: #8BC34A; } .terminal ::selection { color: #20190d; background: #8BC34A; text-shadow: 0px 0px 10px #f5ab4da1 inset; } .terminal .inverted, .terminal .inverted > * { background: #8BC34A !important; color: #20190d; } .terminal .inverted h1 { background-color: black; color: transparent; text-shadow: 0px 2px 3px #f5ab4da1; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } .terminal .padded { margin: 1em 0.8em; } .terminal .outlined, .terminal .double-outlined, .terminal .thick-outlined { display: inline-block; } .terminal .outlined { margin: 0.5em 0.3em; padding: 0.5em 0.4em; border: 0.1em solid #8BC34A; } .terminal .double-outlined { margin: 0.5em 0.2em; padding: 0.5em 0.3em; border: 0.3em double #8BC34A; } .terminal .thick-outlined { margin: 0.5em 0.2em; padding: 0.5em 0.6em; border-bottom: 1em solid #8BC34A; border-top: 1em solid #8BC34A; border-left: 0.8em solid #8BC34A; border-right: 0.8em solid #8BC34A; } .terminal .crt { position: absolute; content: " "; display: block; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; } .main .bg-blue { border-style: solid none solid none; border-width: 1px; border-color: #e8f4fe; background: rgb(233, 245, 255); background: linear-gradient(0deg, rgb(233, 245, 255) 0%, rgb(255, 255, 255) 5%, rgb(255, 255, 255) 95%, rgb(233, 245, 255) 100%); } .main .bg-blue .in-columns { column-rule-color: #e8f4fe; } .main .container { padding: 2em; } @media (max-width: 768px) { .main .container { padding: 0.5em; } } .main h1 { font-size: calc(1.525rem + 3.1vw); } .main h2 { font-size: calc(1.425rem + 1.6vw); } .main h3 { font-size: calc(1.3rem + 0.6vw); } .main h4 { font-size: calc(1.2rem + 0.5vw); color: #333; } .main ul { list-style: square; } .main p, .main li { line-height: 1.6; } .main p.warning-text, .main li.warning-text { font-family: "Poppins", sans-serif; font-weight: bold; } .main p strong, .main p a, .main li strong, .main li a { text-transform: uppercase; font-size: 0.8em; letter-spacing: 0; } .main p a, .main li a { font-weight: bold; color: #001E35; text-decoration: underline; } .main p em, .main li em { white-space: nowrap; } .main ol { margin: 1em 0 2em 0; padding: 0; list-style: decimal; list-style-position: inside; font-family: "Poppins", sans-serif; font-weight: bolder; font-size: 2em; } .main ol li { margin: 0.5em 0; } .main ol li a { font-weight: normal; font-size: 1.2rem; color: #001E35; text-decoration: underline; } .main .sub-title { margin: 0 0 3em 0; color: #888; text-transform: uppercase; font-weight: 500; } .main .lead-text { font-size: 1.1em; font-family: "Poppins"; letter-spacing: 0.1em; text-transform: uppercase; color: #888; } .main .in-columns { column-count: 2; column-gap: 4em; column-rule: 1px solid #eee; margin: 2em 0 4em 0; } .main .in-columns p, .main .in-columns .terminal { margin: 0 0 1em 0; break-inside: avoid-column; page-break-inside: avoid; } @media (max-width: 768px) { .main .in-columns { column-count: 1; } } .main .btn { padding: 0.7em 1.4em; border-radius: 5px; align-items: center; font-size: 1.1em; } .main .btn.btn-link { color: #001E35; } .main .btn.btn-filled { border: 2px solid #001E35; background-color: #001E35; color: #fafafa; } .main .btn.btn-outlined { border: 2px solid #001E35; color: #001E35; } .main .button-row { margin: 2em 0 0 0; display: flex; gap: 0.5em; flex-wrap: wrap; align-items: center; } .main .section { margin: 0 0 7em 0; } .main .tool-image { font-size: 1em; display: flex; flex-direction: column; gap: 1em; margin: 3em 0 7em 0; align-items: center; justify-content: center; } .main .no-bottom-margin { margin: 0 !important; } .main .subtitle { font-size: 1.4em; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; } .main .subtitle-tools { font-size: 1.1em; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; } .main .title-and-text { font-size: 1em; display: flex; gap: 3em; margin: 5em 0 7em 0; align-items: center; } .main .title-and-text .main-text { flex: 55%; min-width: 55%; } .main .title-and-text h2 { margin: 0; } .main .title-and-text p { margin: 1em 0 0 0; } .main .title-and-text p:first-child { margin-top: 0; } @media (max-width: 768px) { .main .title-and-text { flex-direction: column; } .main .title-and-text.image-first { flex-flow: column-reverse; } } .main .laptop { align-self: center; position: relative; } .main .laptop .laptop-screen { border: 1px solid #dadada; border-radius: 7px 7px 0 0; margin: 0 2em; margin: 0 calc(1em + 1vw); } .main .laptop .laptop-screen .laptop-screen-inner { background: #e0e0e0; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; padding: 10px 5px 0px 5px; display: flex; } .main .laptop .laptop-screen .laptop-screen-inner img { padding: 0.5em 2em; display: block; max-height: none; flex: none; align-self: unset; background: #fafafa; } .main .laptop .laptop-screen .laptop-screen-inner .laptop-brand-bar { background: #e0e0e0; padding: 5px; font-size: calc(0.4em + 0.3vw); color: #c5c5c5; align-items: center; } .main .laptop .laptop-keyboard { background: #d1d1d1; border-top: 1px solid #c6c6c6; border-radius: 0 0 200px 200px; height: 10px; } .main .laptop .laptop-keyboard .laptop-keyboard-indent { height: 5px; border-radius: 0 0 10px 10px; background: #bababa; width: 16%; margin: auto; } .main .phone { align-self: center; border: 2px outset #333; border-radius: 20px; position: relative; } .main .phone .phone-inner { flex-direction: column; border-radius: 18px; background: rgb(0, 0, 0); overflow: hidden; padding: 15px 0px; display: flex; } .main .phone img { border-radius: 0 0 14px 14px; } .main .phone .phone-topbar { display: flex; align-items: center; height: 20px; background: #333; border-radius: 14px 14px 0 0; } .main .phone .phone-topbar .phone-camera { width: 10px; height: 10px; align-self: center; border: 1px solid #444; border-radius: 100px; background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(115, 115, 115) 25%, rgb(0, 0, 0) 50%, rgb(115, 115, 115) 75%, rgb(0, 0, 0) 100%); } .main .phone .phone-topbar .carrier, .main .phone .phone-topbar .bat { flex: 1 1 0; font-size: 0.5em; text-transform: uppercase; padding: 0 20px; color: #aaa; letter-spacing: 0; } .main .phone .phone-topbar .bat { text-align: right; } .main .phone .phone-button { position: absolute; width: 2px; height: 45px; align-self: center; border-radius: 0px 3px 3px 0; background-color: #606060; right: -4px; } .main .phone .phone-button.top { top: 90px; } .main .phone .phone-button.bottom { top: 140px; } .main .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4em; margin: 3em; } .main .grid-cell { display: flex; justify-content: center; align-items: center; } .main .cell-container-logo { display: flex; align-items: center; justify-content: center; max-width: 7em; max-height: 7em; } .main .cell-container-store { display: flex; align-items: center; justify-content: center; max-width: 15em; max-height: 15em; } .main .cell-container-qr { max-width: 9em; max-height: 9em; display: flex; align-items: center; justify-content: center; flex-direction: column; } .main .qr-link { text-align: center; color: blue; margin-top: 0.5em; } .main .qr-link:hover { text-decoration: underline; } @media (max-width: 768px) { .main .grid-container { gap: 2em; } .main .cell-container-logo { max-width: 5em; max-height: 5em; } .main .cell-container-store { min-width: 2em; min-height: 2em; } .main .cell-container-qr { max-width: 5em; max-height: 5em; } } .main .text-and-image { font-size: 1em; display: flex; gap: 3em; margin: 0 0 7em 0; align-items: center; } .main .text-and-image h2, .main .text-and-image h1 { margin-top: 0; } .main .text-and-image.first { margin-top: calc(2em + 1.2vw); } .main .text-and-image:last-child { margin-bottom: 3.5em; } .main .text-and-image .main-text { flex: 55%; min-width: 55%; } .main .text-and-image .main-image { min-width: 40%; display: flex; justify-content: space-around; } .main .text-and-image .main-image img { max-height: 500px; align-self: center; flex: 0 0 auto; } .main .text-and-image .main-image .video-tablet { align-self: center; overflow: hidden; border: 3px outset #ffd6cb; border-radius: 20px; position: relative; } .main .text-and-image .main-image .video-tablet .video-tablet-inner { background: rgb(0, 0, 0); background: linear-gradient(322deg, rgb(225, 225, 225) 0%, rgb(240, 240, 240) 50%, rgb(247, 247, 247) 50%, rgb(240, 240, 240) 100%); padding: 20px 30px 20px 20px; display: flex; gap: 11px; } @media (max-width: 768px) { .main .text-and-image .main-image .video-tablet .video-tablet-inner { padding: 15px 30px 15px 15px; } } .main .text-and-image .main-image .video-tablet .video-tablet-inner video { border: 1px solid #eee; aspect-ratio: auto 480/340; max-height: 100%; max-width: 100%; } .main .text-and-image .main-image .video-tablet .video-tablet-inner .video-tablet-button { min-width: 7px; height: 25px; align-self: center; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-radius: 10px; } @media (max-width: 768px) { .main .text-and-image { flex-direction: column; } .main .text-and-image.image-first { flex-flow: column-reverse; } } .main .card { padding: 2em; box-shadow: 4px 3px 0px 3px #001E35; border-radius: 0.9375rem; border-width: "2px"; border-style: solid; border-color: #1f4668; } .main .card h3 { margin: 0 0 0.5rem 0; letter-spacing: -0.03em; font-weight: 700; line-height: 1.25; color: #131212; font-size: 1.25rem; } .main .pricing { padding: 2.5em 0; margin: 0 0 2em 0; } .main .pricing h2 { display: flex; justify-content: center; margin-top: 0; } .main .pricing .in-columns { margin: 2em 0; } .main .pricing .plan-cards { display: flex; gap: 2em; } .main .pricing .plan-cards .card { display: flex; gap: 1.2em; flex-direction: column; flex: 1 1 0; background: #fafafa; } .main .pricing .plan-cards .card hr { display: inline-flex; margin: 0; width: 100%; border: 1px solid #ccc; } .main .pricing .plan-cards .card p { margin: 0; } .main .pricing .plan-cards .card p sub { color: #666; } .main .pricing .plan-cards .card .buttons { margin-top: auto; display: flex; flex-direction: column; gap: 1em; } .main .pricing .plan-cards .card .btn { display: inline-flex; justify-content: center; } @media (max-width: 768px) { .main .pricing .plan-cards { flex-direction: column; } } .main .we-work-with { font-size: 1em; display: flex; flex-direction: column; gap: 5em; margin: 0 0 3em 0; } .main .we-work-with .title { display: flex; flex-wrap: wrap; gap: 2em; } .main .we-work-with .title h2 { flex: 55%; min-width: 55%; margin: 0; } .main .we-work-with .title .action { min-width: 35%; display: flex; align-items: center; justify-content: flex-end; } .main .we-work-with .title .action a { margin: 0; } .main .we-work-with .logos { display: flex; gap: 3em; justify-content: space-between; } .main .we-work-with .logos a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; max-width: 15em; max-height: 10em; } .main .we-work-with .logos a img { object-fit: contain; } @media (max-width: 768px) { .main .we-work-with .logos { flex-direction: column; } .main .we-work-with .logos a { align-self: center; } } .main .more-about-werify h4 { margin-top: 0; margin-bottom: 1em; } .main .more-about-werify > div { page-break-inside: avoid; margin-bottom: 3em; } html, body { height: 100%; } body { background: #FAFAFA; font-size: 16px; line-height: 1.1; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; display: flex; flex-direction: column; letter-spacing: -0.03em; } h1, h2, h3, h4, h5 { font-family: "Poppins", sans-serif; letter-spacing: -0.05em; } .container { max-width: 1140px; margin: auto; padding: 0 1em; }