/* cyrillic-ext */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4QIFqL_KWxWMT.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4SYFqL_KWxWMT.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4ToFqL_KWxWMT.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4QoFqL_KWxWMT.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4Q4FqL_KWxWMT.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/comfortaa/v45/1Ptsg8LJRfWJmhDAuUs4TYFqL_KWxQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } :root { --chevron-up: url("/img/chevron-up-blue.svg"); --chevron-down: url("/img/chevron-down-blue.svg"); --font-color: #030303; --font-secondary-color: #aebdc1; --background-color: #f7f9fb; --full-loader-bg-color: rgb(255 255 255 / 0.3); --blue-500: #1575fb; --blue-200: rgb(96 165 250/0.3); --blue-500-1: #1575fb1a; --toast-info-color: #fff; --toast-danger-color: #fff; --toast-warn-color: #fff; --toast-info-bg-color: #1575fb; --toast-danger-bg-color: #ef4444; --toast-warn-bg-color: #eab308; --card-bg: #ffffff; --card-border: #1575fb; --card-border-width: 1px; --card-border-style: solid; --switch-checked-content: ''; --switch-content: ''; --samsung-img: url(/assets/imgs/samsung_black.svg); --load-button-img: url(/assets/imgs/load-white.svg); --load-button-bg-color: #000; font-family: "Comfortaa", system-ui, sans-serif; font-weight: 700; } @media (prefers-color-scheme: dark) { :root { --font-color: #fff; --font-secondary-color: #3b3f3f; --full-loader-bg-color: rgb(0 0 0 / 0.3); --background-color: #030617; --card-bg: #030303; --card-border: #1575fb; --card-border-width: 1px; --card-border-style: solid; --blue-500-1: #1575fb33; --samsung-img: url(/assets/imgs/samsung_white.svg); --load-button-img: url(/assets/imgs/load-black.svg); --load-button-bg-color: #fff; } } body { background-color: var(--background-color); color: var(--font-color); margin: 1rem; position: relative; } [type="checkbox"] { background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button:active { transform: scale(0.95); } .loader { width: 15px; height: 15px; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; } .secondary { color: var(--font-secondary-color); } .registration-navigation-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; } hr.blue { border: 0.05rem solid var(--blue-500); border-radius: 35px; margin-bottom: 1rem; } .grid { display: grid; } .opacity-70 { opacity: 0.7; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .underline { text-decoration-line: underline; } .text-center { text-align: center; } .text-right { text-align: right; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .show-explain { display: flex; border-radius: 9999px; border-color: var(--blue-500); border-width: 1px; border-style: solid; color: var(--blue-500); background-color: rgb(96 165 250/0.2); place-content: center; text-align: center; width: 1.5rem; height: 1.5rem; float: right; } .blitz-pay { color: var(--blue-500); opacity: 1; } .show-explain>svg { margin: auto; width: 1rem; height: 1rem; } .w-full { width: 100%; } .m-auto { margin: auto; } #explainTappyDirectMessage { text-align: justify; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; } .tick-svg { margin-top: 2.5rem; margin-bottom: 2.5rem; color: var(--blue-500); width: 100%; margin: auto; } #text-section { display: flex; position: relative; margin-top: 1.5rem; margin-bottom: 1rem; } #explainTappyDirect { opacity: 0; position: absolute; z-index: -10; width: 100%; padding: 1rem; border-radius: 1.75rem; border: solid 1px var(--blue-500); background-color: var(--background-color); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } #page-header { align-self: flex-end; line-height: 2rem; font-size: 1.25rem; line-height: 1.75rem; } button { padding: 0.5rem 1rem; border-radius: 9999px; text-align: center; } button.blue { border-color: var(--blue-500); border-width: 1px; border-style: solid; } button.blue.solid { background-color: var(--blue-500); color: rgb(255 255 255) } button.blue.outline { background-color: var(--blue-500-1); color: rgb(21 117 251) } img[id=activation_code_helper] { margin: auto; margin-top: 1rem; margin-bottom: 1rem; display: block; } #submitForm { display: grid; gap: 1rem; } label[for]:has(+ input, + select) { font-size: 0.75rem; line-height: 1rem; padding-top: 0.5rem; padding-bottom: 0.125rem; padding-left: 1rem; padding-right: 1rem; } input[id=shortCode] { letter-spacing: 3px; } input[id=shortCode]::-ms-input-placeholder { letter-spacing: 0em; } input[id=shortCode]::placeholder { letter-spacing: 0em; } select.input-box { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--chevron-down); background-position: calc(100% - calc(16px)) 50%; background-size: 16px 16px; background-repeat: no-repeat; outline: none; color: var(--font-secondary-color); } select:has(option:checked:not([value])), select:has(option:checked:not([value=""])) { color: var(--font-color); } select:focus.input-box { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--chevron-up); background-position: calc(100% - calc(10px)) 50%; background-size: 18px 18px; background-repeat: no-repeat; outline: none; } .input-box, input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text] { color: var(--font-color); border-radius: 9999px; padding: .5rem 1.5rem; background-color: var(--background-color); border-style: solid; border-color: var(--blue-500); border-width: 1px; font-size: 1.25rem; line-height: 1.75rem; } .input-box:focus, input[type=checkbox], input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=text]:focus { outline: none; background-color: var(--blue-500-1); } .checkbox-label { display: flex; gap: .25rem; } #payment-details { text-align: right; display: grid; gap: 1rem; } .checkbox-span { flex-grow: 1; align-content: center; font-size: 0.75rem; line-height: 1rem; opacity: 0.7; } .checkbox-input { position: relative; margin-top: auto; margin-bottom: auto; margin: auto 0 0 auto; width: 3rem; height: 1.25rem; background-color: var(--blue-200); border-radius: 9999px; border-color: var(--card-border); border-width: var(--card-border-width); border-style: var(--card-border-style); } .checkbox-input:checked { background-color: var(--blue-500); } .checkbox-input::after { content: ''; position: absolute; top: 0; left: -1%; height: 1rem; width: 1rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-radius: 9999px; background-color: var(--card-bg); border-color: var(--card-border); border-width: var(--card-border-width); border-style: var(--card-border-style); } .checkbox-input:checked::after { transform: translateX(1.75rem); } ::-ms-input-placeholder { color: var(--font-secondary-color); } ::placeholder { color: var(--font-secondary-color); } .bank-button-label { font-size: 10px; margin-top: 0.25rem; } .bank-button-container { text-align: center; opacity: .7; display: grid; } .bank-buttons-container { display: flex; justify-content: space-between; gap: 1rem; } .card { border-radius: 35px; padding: 1rem; background-color: var(--card-bg); border-color: var(--card-border); border-width: var(--card-border-width); border-style: var(--card-border-style); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .payment-success-section { display: grid; justify-content: center; gap: 1rem; margin: 1rem 0.5rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .mb-4 { margin-bottom: 1rem; } .flex { display: flex; } .tappy-logo-white { width: 85px; height: auto; } .amount-button.active { border-color: var(--blue-500); background-color: var(--blue-500); color: var(--font-color); } .amount-button { height: 3rem; width: 100%; border-radius: .75rem; border-style: solid; border-width: 1px; border-color: var(--blue-500); background-color: var(--blue-200); text-align: center; font-weight: 500; color: var(--font-color) } .amount-button>* { pointer-events: none } #payment-section { margin-top: 1rem; margin-bottom: 1rem; display: grid; gap: 1.25rem; } .amount-button-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } #footer { margin-top: 2.5rem; font-size: 0.4rem; text-align: center; font-weight: 400; opacity: 0.5; } #full-loader { position: fixed; top: 0; left: 0; display: none; width: 100svw; height: 100svh; background-color: var(--full-loader-bg-color); color: var(--blue-500); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } #full-loader-spinner { text-align: center; width: 25%; margin: auto; } #client-toast-container { display: none; position: fixed; bottom: 0.5rem; width: 95%; left: 50%; transform: translate(-50%, 0px); } #client-toast { color: #fff; border-radius: 15px; padding: 0.75rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #client-toast.info { background-color: var(--toast-info-bg-color); color: var(--toast-info-color); } #client-toast.danger { background-color: var(--toast-danger-bg-color); color: var(--toast-danger-color); } #client-toast.warn { background-color: var(--toast-warn-bg-color); color: var(--toast-warn-color); } #section-header { font-size: 1.125rem; line-height: 1.75rem; } #account-section { margin-top: 1rem; margin-bottom: 0.5rem; display: flex; gap: 0.25rem } #pay-btn-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; justify-content: stretch; } #accountImgContainer { width: 5rem; height: 5rem; overflow: hidden; border-radius: 9999px; } #accountInfo { display: grid; margin-top: auto; margin-bottom: auto; margin-left: 0.5rem; } #tipsToDate { opacity: 0.7; } #accountName { font-size: 1.25rem; line-height: 1.75rem; } #accountImg { object-fit: cover; height: 100%; width: 100%; } #main-section { max-width: 420px; margin-left: auto; margin-right: auto; padding: 1rem; border-radius: 1.85rem; border-width: 1px; border-color: var(--blue-500); } #logo-slogon { display: flex; gap: 0.5rem; } #google-pay-button>button, #gpay-button-online-api-id { outline: 2px solid transparent !important; outline-offset: 2px !important; border-radius: 9999px !important; height: 3rem !important; width: 100% !important; min-width: 6rem !important; } .gpay-card-info-placeholder-container { padding-top: 0px !important; } #samsungpay-container>button { min-width: 6rem !important; width: 100% !important; height: 3rem !important; border-radius: 9999px !important; background-image: var(--samsung-img) !important; } .load-btn { background-image: var(--load-button-img); background-color: var(--load-button-bg-color); min-width: 6rem !important; width: 100% !important; height: 3rem !important; border-radius: 9999px !important; background-repeat: no-repeat; background-position: center; } button.btn-blue-outline { background-color: rgb(96 165 250 / .2); color: var(--blue-500); border-color: var(--blue-500); border-width: 1px; border-style: solid; } .bank-button { width: 100%; height: 100%; min-height: 3rem; min-width: 3rem; max-height: 3rem; max-width: 3rem; border-radius: 0.75rem; border-width: 0.08rem; border-color: rgb(75 85 99); border-style: solid; /* dark #e5e7eb */ } .bank-button>svg { width: 100%; height: 2.25rem; margin: auto; pointer-events: none; } @media (min-width: 768px) { .card { margin-left: 30%; margin-right: 30% } #client-toast-container { width: 40%; } } apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-min-width: 96px; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 9999px; --apple-pay-button-padding: 0px 0px; } button { all: unset; }