/*** The new CSS reset - version 1.11 (last updated 20.9.2023) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } :root { --layoutWidth: 1080px; --paddingNormal: 16px; --paddingxLarge: 128px; --borderRadius: 10px; --gap-xs: 3px; --gap-sm: 6px; --gap-md: 16px; --gap-lg: 42px; --section-gap-lg: 42px; --max-width: 1080px; --pad-lg: 32px; --pad-md: var(--gap-md); --pad-sm: var(--gap-sm); --pad-xs: 3px; --radius: 12px; --radius-sm: 6px; --aiblack: rgb(26, 27, 28); --orange: hsl(34, 100%, 69%); --grey: hsl(0, 0%, 96%); --dark-grey: hsl(0deg 0% 86%); --greytxt: hsl(0, 0%, 54%); --alert: hsl(44, 100%, 92%); --alert-dark: hsl(44deg 98% 80%); --alert-red: hsl(338, 100%, 95%); --alert-red-dark: hsl(338, 100%, 78%); --border-color: hsl(0, 0%, 74%); --desktopnav: none; --logodesktop: none; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @media (min-width: 768px) { :root { --gap-lg: 64px; --pad-lg: 64px; --section-gap-lg: 96px; --desktopnav: flex; --logodesktop: block; } } ::marker { content: ""; } html { -webkit-text-size-adjust: 100%; line-height: 1.15; /* overflow-x: hidden; */ } body { color: var(--aiblack); margin: 0; /* overflow-x: hidden; */ /* padding-bottom: var(--mobFooter); */ min-height: 100vh; position: relative; } .container { display: flex; justify-content: center; } .lcontainer { width: 100%; max-width: var(--layoutWidth); margin: 0 var(--paddingNormal); padding: var(--sectionPaddingTop) 0 var(--sectionPaddingBottom); } .relative { position: relative; } .absolute { position: absolute; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type="number"] { -moz-appearance: textfield; } .preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } h1, .title { font-size: clamp(28px, 2.5vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; } h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1; } h3 { font-size: clamp(16px, 1.8vw, 22px); font-weight: 500; line-height: 1.4; } a:hover{ text-decoration: underline; } .fs-12 { font-size: 12px; } .ul{ text-decoration: underline; } .source-title{ font-size: 12px; color: #767676; } .fs-10 { font-size: 10px; } .placeholder { font-size: 12px; color: var(--grey-txt); } .flex { display: flex; } .grid { display: grid; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .gc-2, .gc-3 { grid-template-columns: 1fr; } .gc-4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .gc-2 { grid-template-columns: repeat(2, 1fr); } .gc-3 { grid-template-columns: repeat(3, 1fr); } .gc-4 { grid-template-columns: repeat(4, 1fr); } } .gap-xs { gap: var(--gap-xs); } .gap-sm { gap: var(--gap-sm); } .gap-md { gap: var(--gap-md); } .gap-header { gap: 40px; } .gap-lg { gap: var(--gap-lg); } .section-gap-lg { gap: var(--section-gap-lg); } .pad-t-64 { padding-top: 64px; } .mar-t-48 { margin-top: 48px; } .pad-tb-sm { padding: var(--pad-sm) 0; } .pad-tb-lg { padding: var(--pad-lg) 0; } .pad-md { padding: var(--pad-md); } .pad-sm { padding: var(--pad-sm); } .pad-xs { padding: var(--pad-xs) var(--pad-sm); } .space-between { justify-content: space-between; } .items-center { place-items: center; } .content-center { place-content: center; } .content-end { place-content: end; } .items-end { place-items: end; } .cursor-pointer { cursor: pointer; } .cursor-notallowed { cursor: not-allowed; } .fw-600 { font-weight: 600; } em { font-style: italic; } strong { font-weight: 600; } table { width: 100%; } th { background-color: hsl(0, 0%, 80%); } tr, td, th { border: 1px solid; } td, th { padding: 6px 12px; max-width: 100%; white-space: nowrap; } select:not([size]) { padding: 4px 8px; appearance: auto; } .header { padding: 12px var(--paddingNormal); } .topmenu { display: grid; grid: auto / 1fr max-content; gap: 16px; align-items: center; justify-content: center; } /* hamb*/ .hamb { cursor: pointer; justify-self: end; } @media (min-width: 768px) { .hamb { display: none; } nav { max-height: 100%; } } .hamb-line { background: #000; display: block; height: 2.89px; position: relative; width: 24px; } .hamb-line::before, .hamb-line::after { background: #000; content: ""; display: block; height: 100%; position: absolute; transition: all 0.2s ease-out; width: 100%; } .hamb-line::before { top: 6px; } .hamb-line::after { top: -6px; } .side-menu { display: none; } /* Toggle menu icon */ .side-menu:checked ~ .mobile-menu { /* max-height: 280px; height: 280px; */ display: flex; } .side-menu:checked ~ .hamb .hamb-line { background: transparent; } .side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top: 0; } .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top: 0; } .desktop-menu { display: var(--desktopnav); align-items: center; margin: 0; padding: 0; list-style: none; font-weight: 600; } .mobile-menu { display: none; place-items: center; padding: 16px; margin: 0; position: absolute; top: 70px; left: 0; width: 100vw; font-weight: 600; flex-direction: column; transition: ease-out 250ms; z-index: 1; background-color: #fff; } .logo { font-weight: 600; font-size: 20px; } .logo-cont { justify-self: start; } @media (min-width: 768px) { .header { padding: 12px var(--paddingNormal); } .topmenu { grid: auto / max-content 1fr 1fr; } } .menu { display: grid; place-items: center; padding: 0; margin: 0; gap: 40px; } @media (min-width: 768px) { .menu { flex-direction: row; grid-auto-flow: column; } } .bg-grey { background-color: var(--grey); } .br-grey { border: 1px solid var(--dark-grey); } .sh-grey { box-shadow: inset 0 -1px hsl(220, 23%, 92%); } .br-top { border-top: 1px solid var(--dark-grey); } .br-top-light { border-top: 1px solid var(--grey); } .w-100 { width: 100%; } .vh-100 { height: 100vh; } .text-center { text-align: center; } .text-right { text-align: right; } .border { border: 1px solid var(--dark-grey); border-radius: var(--borderRadius); } .br-round { border-radius: var(--borderRadius); } .bg-alert { background-color: var(--alert); } .bg-alert-red { background-color: var(--alert-red); } .bg-alert-fill { background-color: var(--alert-dark); border-radius: 50%; height: fit-content; padding: 4px; } .bg-alert-fill-grey { background-color: var(--dark-grey); } .bg-alert-fill-red { background-color: var(--alert-red-dark); } .c-pointer { cursor: pointer; } input { padding: 8px 12px; line-height: 1.5; width: 100%; border: 1px solid var(--border-color); border-radius: var(--borderRadius); display: flex; place-items: center; } .inp-div { padding: 8px 12px; line-height: 1.5; width: 100%; border: 1px solid var(--border-color); border-radius: var(--borderRadius); cursor: pointer; } .badge { text-transform: uppercase; background-color: #edeef0; color: #111; font-size: 11px; font-weight: 600; border-radius: 9999px; padding: 3px 8px 4px; } .badge-cont { display: flex; flex-wrap: wrap; gap: 4px; } .alert-badge { background: #ffc2d8; justify-content: center; padding: 6px 12px; border-radius: 9999px; text-transform: initial; font-size: 16px; } .hero { max-width: 600px; margin: 0 auto; } .sub { max-width: 460px; margin: 0 auto; } .bg-p { background-color: hsl(213, 78%, 91%); border-bottom: 3px solid hsl(213, 78%, 82%); } .mh { min-height: calc(100vh); } .svg-icon { width: 24px; height: 24px; } .btn { color: #fff; background-color: var(--aiblack); border-radius: var(--borderRadius); height: 48px; width: 100%; font-weight: 600; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; } .btn-disabled { cursor: not-allowed; background-color: var(--dark-grey); } .top-btn { color: #000; background-color: var(--grey); border-radius: var(--borderRadius); font-weight: 600; padding: 4px 8px; text-align: center; font-size: 16px; width: fit-content; } .company-img { max-width: 100%; max-height: 75px; width: 160px; height: 75px; object-fit: contain; mix-blend-mode: multiply; } .store-grid { --store-gap: 16px; gap: var(--store-gap); } .store-box { border: 1px solid #e1e1e1; border-radius: var(--borderRadius); } @media (min-width: 728px) { .storegrid { grid-template-columns: 200px 1fr; } .store-grid { --store-gap: 32px; gap: var(--store-gap); } } .scroll { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; line-height: 1.6; } .scroll::-webkit-scrollbar { display: none; } .of { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .of-hidden { overflow: hidden; } ol { display: inline-flex; font-weight: 600; list-style: none; font-size: 13px; /* flex-wrap: wrap; */ } @media (min-width: 375px) { ol { font-size: 16px; } } ol li { padding-left: 6px; } ol li:after { content: "›"; padding-left: 6px; } ol li:nth-child(1):before { content: ""; padding: 0; } ol li:last-child:after { content: ""; } .faq-container { display: grid; gap: var(--gap-md); font-size: 16px; width: 100%; max-width: 720px } .faq-item { border: 2px solid var(--border-color); border-radius: 12px; width: 100%; background: #fff } .faq-head { font-weight: 700; letter-spacing: 1.2px; font-size: 18px; line-height: 1.6; padding: 8px 16px; user-select: none; cursor: pointer } .faq-item[open]>summary { border-bottom: 2px dashed var(--border-color) } .faq-item[open]>summary .svg-icon { transform: rotate(180deg) } .faq-text { line-height: 1.6; padding: 16px } @media(min-width: 768px) { .faq-container { font-size:18px } .faq-item { min-width: calc(var(--layoutWidth)/3) } } .faq-text dl { background: #f0f0f0; border-radius: var(--radius); display: grid; padding: 10px; gap: 0 var(--gap-sm) } .faq-text dl div { display: grid; gap: var(--gap-sm); padding: var(--pad-sm); align-content: baseline } .faq-text dl div:not(:last-child)::after { content: ""; border-bottom: 1px solid hsl(0 0% 87%/1); margin: 0 -16px } .faq-text dt { text-transform: uppercase; font-weight: 600; font-size: 11px } .faq-text dd { font-size: 14px } .footer { margin-top: var(--paddingxLarge); padding: 32px 16px 90px; } .footer-menu { align-items: start; font-weight: 600; }