/* Vendored copy of Meyer reset v2.0 (was previously imported from cdnjs) https://meyerweb.com/eric/tools/css/reset/ License: Public domain */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } :root { --body-body-small-font-family: "IBM Plex Sans", Helvetica, sans-serif; --body-body-small-font-weight: 500; --body-body-small-font-size: 14px; --body-body-small-letter-spacing: 0px; --body-body-small-line-height: 20px; --body-body-small-font-style: normal; --body-body-bold-font-family: "IBM Plex Sans", Helvetica, sans-serif; --body-body-bold-font-weight: 700; --body-body-bold-letter-spacing: 0px; --body-body-bold-line-height: 24px; --body-body-bold-font-style: normal; --simple-colors-text-primary: rgba(0, 35, 45, 1); --simple-colors-text-link: rgba(26, 115, 232, 1); --simple-colors-background-main: rgba(255, 255, 255, 1); --simple-colors-background-light-grey: rgba(234, 234, 238, 1); --simple-colors-background-extra-light-grey: rgba(245, 245, 247, 1); --variable-collection-primary-primary-dark: rgba(11, 53, 64, 1); --variable-collection-neutral-asset: rgba(11, 53, 64, 1); --variable-collection-primary-accent-green: rgba(97, 255, 102, 1); --variable-collection-neutral-900: rgba(0, 35, 45, 1); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-simple-colors-mode="light-mode"] { --simple-colors-text-primary: rgba(0, 35, 45, 1); --simple-colors-text-link: rgba(26, 115, 232, 1); --simple-colors-background-main: rgba(255, 255, 255, 1); --simple-colors-background-light-grey: rgba(234, 234, 238, 1); --simple-colors-background-extra-light-grey: rgba(245, 245, 247, 1); } [data-simple-colors-mode="dark-mode"] { --simple-colors-text-primary: rgba(255, 255, 255, 0.87); --simple-colors-text-link: rgba(99, 163, 247, 1); --simple-colors-background-main: rgba(0, 35, 45, 1); --simple-colors-background-light-grey: rgba(77, 101, 108, 1); --simple-colors-background-extra-light-grey: rgba(51, 79, 87, 1); } [data-variable-collection-mode="light-mode"] { --variable-collection-primary-primary-dark: rgba(11, 53, 64, 1); --variable-collection-neutral-900: rgba(0, 35, 45, 1); } [data-variable-collection-mode="dark-mode"] { --variable-collection-primary-primary-dark: rgba(242, 244, 244, 1); --variable-collection-neutral-900: rgba(255, 255, 255, 1); } * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } html, body { margin: 0; height: 100%; background-color: #F5F5F7; } /* a blue color as a generic focus style */ button:focus-visible { outline: 2px solid #4A90E2; } a { text-decoration: none; color: var(--simple-colors-text-link); } .landing-template-new { background-color: #F5F5F7; width: 100%; display: flex; max-width: 100%; overflow-x: hidden; } .landing-template-new .container { margin-left: auto; margin-right: auto; padding: 0 0 32px; background-color: #FFFFFF; border-radius: 24px; overflow: hidden; display: flex; position: relative; flex-direction: column; align-items: flex-start; width: 100%; max-width: 752px; } .landing-template-new .header { position: relative; width: 100%; flex: 0 0 auto; } .landing-template-new .txt { gap: 24px; align-self: stretch; width: 100%; display: flex; flex-direction: column; align-items: flex-start; position: relative; flex: 0 0 auto; } .landing-template-new .div { gap: 16px; padding: 40px 48px 40px; display: flex; flex-direction: column; align-items: flex-start; position: relative; flex: 0 0 auto; border-top-width: 1px; border-top-style: solid; border-color: var(--simple-colors-background-light-grey); } .landing-template-new .greeting-title { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "IBM Plex Sans-Bold", Helvetica, sans-serif; font-weight: 700; color: var(--simple-colors-text-primary); font-size: 24px; letter-spacing: 0; line-height: 32px; } .landing-template-new .confirm-body-text { position: relative; align-self: stretch; font-family: "IBM Plex Sans-Regular", Helvetica, sans-serif; font-weight: 400; color: var(--simple-colors-text-primary); font-size: 16px; letter-spacing: 0; line-height: 24px; margin: 1px; } .landing-template-new .total-amount-wrapper { padding: 0px 48px 40px; align-self: stretch; width: 100%; flex: 0 0 auto; display: flex; position: relative; flex-direction: column; align-items: flex-start; } .landing-template-new .total-amount { display: flex; align-items: center; gap: 16px; padding: 32px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: var(--simple-colors-background-extra-light-grey); border-radius: 20px; } .landing-template-new .textfields { display: flex; flex-direction: column; width: 360px; align-items: flex-start; justify-content: center; gap: 16px; position: relative; } .landing-template-new .textfield { display: flex; height: 48px; align-items: center; gap: 8px; padding: 8px 20px; position: relative; align-self: stretch; width: 100%; background-color: var(--simple-colors-background-main); border-radius: 24px; border: 1px solid; border-color: var(--variable-collection-neutral-900); } .landing-template-new .label { font-family: var(--body-body-small-font-family); font-weight: var(--body-body-small-font-weight); color: var(--variable-collection-primary-primary-dark); font-size: var(--body-body-small-font-size); letter-spacing: var(--body-body-small-letter-spacing); line-height: var(--body-body-small-line-height); font-style: var(--body-body-small-font-style); } .landing-template-new .button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: var(--variable-collection-primary-accent-green); border-radius: 24px; } .landing-template-new .primary-button { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: -1.00px; font-family: var(--body-body-bold-font-family); font-weight: var(--body-body-bold-font-weight); color: var(--variable-collection-neutral-asset); font-size: var(--body-body-bold-font-size); text-align: center; letter-spacing: var(--body-body-bold-letter-spacing); line-height: var(--body-body-bold-line-height); white-space: nowrap; font-style: var(--body-body-bold-font-style); } .landing-template-new .block { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 64px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-top-width: 1px; border-top-style: solid; border-color: var(--simple-colors-background-light-grey); } .landing-template-new .icon-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; flex: 0 0 auto; } .landing-template-new .icons { display: inline-flex; align-items: center; gap: 12px; position: relative; flex: 0 0 auto; } .landing-template-new .msg-icon { position: relative; width: 40px; height: 40px; } .landing-template-new .contact-email-link { position: relative; width: fit-content; font-family: "IBM Plex Sans-Regular", Helvetica, sans-serif; font-weight: 400; color: var(--simple-colors-text-link); font-size: 14px; letter-spacing: 0; line-height: 20px; text-decoration: underline; white-space: nowrap; } .landing-template-new .text-wrapper { position: relative; width: fit-content; font-family: "IBM Plex Sans-Regular", Helvetica, sans-serif; font-weight: 400; color: var(--simple-colors-text-primary); font-size: 14px; letter-spacing: 0; line-height: 20px; white-space: nowrap; } .landing-template-new .header img, .landing-template-new .header { width: 100%; max-width: 100%; height: auto; display: block; } @media (max-width: 768px) { .landing-template-new { overflow-x: hidden; } .landing-template-new .total-amount { padding: 16px; } .landing-template-new .textfields { width: 100%; max-width: 100%; } .landing-template-new .textfield { width: 100%; padding: 12px 16px; height: auto; } .landing-template-new .header, .landing-template-new .header img { width: 100%; max-width: 100%; height: auto; display: block; } }