JFIFxxC      C  " }!1AQa"q2#BR$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz w!1AQaq"2B #3Rbr.upi-card-body *, .upi-card-body :after, .upi-card-body :before { box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-decoration: inherit; vertical-align: inherit; } html { outline: none; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } .upiTemplate h1, .upiTemplate .h1 { font: var(--h1); } .upiTemplate h2, .upiTemplate .h2 { font: var(--h2); } .upiTemplate h3, .upiTemplate .h3 { font: var(--h3); } .upiTemplate h4, .upiTemplate .h4 { font: var(--h4); } .upiTemplate h5, .upiTemplate .h5 { font: var(--h5); } .upiTemplate h6, .upiTemplate .h6 { font: var(--h6); } .upiTemplate h1, .upiTemplate h2, .upiTemplate h3, .upiTemplate h4, .upiTemplate h5, .upiTemplate h6 { margin: 0; } body { margin: 0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; } .upiTemplate p, .upiTemplate li, .upiTemplate ul, .upiTemplate ol { margin: 0; padding: 0; list-style: none; font: var(--common-text); } .upiTemplate a { text-decoration: none; } .upiTemplate .d-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; } .upiTemplate .align-items-start { -ms-flex-align: start; align-items: flex-start; } .upiTemplate .align-items-end { -ms-flex-align: end; align-items: flex-end; } .upiTemplate .align-items-center { -ms-flex-align: center; align-items: center; } .upiTemplate .justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .upiTemplate .justify-content-between { -ms-flex-pack: justify; justify-content: space-between; } .upiTemplate .justify-content-start { -ms-flex-pack: start; justify-content: flex-start; } .upiTemplate .justify-content-center { -ms-flex-pack: center; justify-content: center; } .upiTemplate .justify-content-end { -ms-flex-pack: end; justify-content: flex-end; } .upiTemplate .row-reverse { flex-direction: row-reverse; } .upiTemplate .direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .upiTemplate .no-wrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .upiTemplate .text-center { text-align: center; } /* ============================================= */ /* !!!! upi layout 1 css !!!! */ /* ============================================= */ :root { --first-font: 'Poppins'; --h2: normal 500 50px/1.2 var(--first-font); --h3: normal 500 40px/1.2 var(--first-font); --h4: normal 500 30px/1.2 var(--first-font); --h5: normal 500 20px/1.2 var(--first-font); --h6: normal 500 18px/1.2 var(--first-font); --common-text: normal 500 18px/1.4 var(--first-font); --black: #000000; --white: #FFFFFF; --btn-color: #F5F5F5; --border-color: #DBDBDB; } /* upi layout 1 color variables 1 start */ :root .upi-layout-1.upi-color-v1 { --theme-color: #FA6062; } /* upi layout 1 color variables 1 end */ /* upi layout 1 color variables 2 start */ :root .upi-layout-1.upi-color-v2 { --theme-color: #1FA2FF; } /* upi layout 1 color variables 2 end */ /* upi layout 1 color variables 3 start */ :root .upi-layout-1.upi-color-v3 { --theme-color: #08807F; } /* upi layout 1 color variables 3 end */ /* upi layout 1 color variables 4 start */ :root .upi-layout-1.upi-color-v4 { --theme-color: #B8491B; } /* upi layout 1 color variables 4 end */ /* upi layout 1 color variables 5 start */ :root .upi-layout-1.upi-color-v5 { --theme-color: #FF9374; } /* upi layout 1 color variables 5 end */ body.upi-card-body::-webkit-scrollbar { width: 7px; height: 100%; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } body.upi-card-body::-webkit-scrollbar-thumb { background-color: #a3a3a3; } body.upi-card-body::-webkit-scrollbar-track { background-color: #DEDEDE; } .upi-layout-1, .upi-layout-2, .upi-layout-3, .upi-layout-4, .upi-layout-5 { display: flex; justify-content: center; height: 100vh; } .upi-card { max-width: 500px; width: 100%; margin: auto 15px; position: relative; z-index: 1; text-align: center; box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px; overflow: hidden; } .upi-card .btn { padding: 8px 20px; border-radius: 30px; font-size: 20px; color: var(--black); background-color: var(--btn-color); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; display: inline-block; font-family: var(--first-font); font-weight: 500; } .upi-card .btn:hover { color: var(--black); background-color: var(--btn-color); } .upi-card .qrcode-wrap { margin-bottom: 30px; } .upi-card .qrcode-wrap .shareqrcode { max-width: 200px; width: 100%; margin: 0 auto; } .upi-card .qrcode-wrap img { width: 100%; height: 100%; } .upi-card .qrcode-wrap canvas { width: 100%; height: 100%; } .upi-card .upi-title h2 { font-weight: 700; } .upi-card .price { margin-bottom: 20px; } .upi-card .price h3 { font-weight: 600; display: inline-block; color: var(--theme-color); } .upi-card h4 { font: var(--h5); margin-bottom: 20px; } .upi-layout-1 .upi-card .upi-title { position: relative; padding: 40px 15px 80px; color: var(--white); background-color: var(--theme-color); } .upi-layout-1 .upi-card .upi-title::before { content: ""; position: absolute; background-image: url(../images/upi-1-top.svg); padding-bottom: 8%; left: 0; bottom: 0; width: 100%; background-repeat: no-repeat; background-size: 100%; } .upi-layout-1 .upi-card .qrcode-wrap .shareqrcode, .upi-layout-2 .upi-card .qrcode-wrap .shareqrcode { padding: 15px; border: 1px solid var(--border-color); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .upi-layout-1 .upi-card .upi-inner { padding: 40px 15px; } .upi-layout-1 .upi-card .price h3 { position: relative; padding-bottom: 2px; } .upi-layout-1 .upi-card .price h3::after, .upi-layout-2 .upi-card h4::after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(217, 217, 217, 0.5); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .upi-layout-1 .upi-card .btn { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .upi-layout-1 .upi-card .upi-bottom { position: relative; background-color: var(--theme-color); padding-top: 35px; } .upi-layout-1 .upi-card .upi-bottom::before { content: ""; position: absolute; background-image: url(../images/upi-1-bottom.svg); padding-bottom: 2%; left: 0; top: -1px; width: 100%; background-repeat: no-repeat; background-size: 100%; } /* ============================================= */ /* !!!! upi layout 2 css !!!! */ /* ============================================= */ /* upi layout 2 color variables 1 start */ :root .upi-layout-2.upi-color-v1 { --theme-color: #A55973; } /* upi layout 2 color variables 1 end */ /* upi layout 2 color variables 2 start */ :root .upi-layout-2.upi-color-v2 { --theme-color: #FA9135; } /* upi layout 2 color variables 2 end */ /* upi layout 2 color variables 3 start */ :root .upi-layout-2.upi-color-v3 { --theme-color: #9B671C; } /* upi layout 2 color variables 3 end */ /* upi layout 2 color variables 4 start */ :root .upi-layout-2.upi-color-v4 { --theme-color: #B7CD78; } /* upi layout 2 color variables 4 end */ /* upi layout 2 color variables 5 start */ :root .upi-layout-2.upi-color-v5 { --theme-color: #2F5139; } /* upi layout 2 color variables 5 end */ .upi-layout-2 .upi-card { background-color: var(--theme-color); } .upi-layout-2 .upi-card h4 { position: relative; display: inline-block; padding: 0 10px 6px; margin-bottom: 30px; } .upi-layout-2 .upi-card h4::after { height: 1px; } .upi-layout-2 .upi-card .price h3, .upi-layout-3 .upi-card .price h3, .upi-layout-4 .upi-card .price h3, .upi-layout-5 .upi-card .price h3 { position: relative; padding-bottom: 5px; } .upi-layout-2 .upi-card .price h3::after, .upi-layout-3 .upi-card .price h3::after, .upi-layout-4 .upi-card .price h3::after, .upi-layout-5 .upi-card .price h3::after { position: absolute; content: ''; bottom: 0; left: 50%; height: 3px; background: rgba(34, 34, 34, 0.5); transform: translateX(-50%); width: 80%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .upi-layout-2 .upi-card .upi-title { margin-bottom: 20px; } .upi-layout-2 .upi-card .upi-title h2 { font-weight: 600; } .upi-layout-2 .upi-card .upi-inner { background-color: var(--white); padding: 30px 15px 0; } .upi-layout-2 .upi-card .upi-bottom { position: relative; padding-top: 50%; } .upi-layout-2 .upi-card .upi-bottom::before { content: ""; position: absolute; background-image: url(../images/upi-2-bottom.svg); padding-bottom: 43%; left: 0; top: -1px; width: 100%; background-repeat: no-repeat; background-size: 100%; } /* ============================================= */ /* !!!! upi layout 3 css !!!! */ /* ============================================= */ /* upi layout 3 color variables 1 start */ :root .upi-layout-3.upi-color-v1 { --theme-color: #2AB1AA; } /* upi layout 3 color variables 1 end */ /* upi layout 3 color variables 2 start */ :root .upi-layout-3.upi-color-v2 { --theme-color: #5B2F48; } /* upi layout 3 color variables 2 end */ /* upi layout 3 color variables 3 start */ :root .upi-layout-3.upi-color-v3 { --theme-color: #855DA3; } /* upi layout 3 color variables 3 end */ /* upi layout 3 color variables 4 start */ :root .upi-layout-3.upi-color-v4 { --theme-color: #91A2D0; } /* upi layout 3 color variables 4 end */ /* upi layout 3 color variables 5 start */ :root .upi-layout-3.upi-color-v5 { --theme-color: #2B536C; } /* upi layout 3 color variables 5 end */ .upi-layout-3 .upi-card .upi-title { position: relative; z-index: 1; padding: 70px 15px 200px; background-color: var(--theme-color); color: var(--white); border-radius: 0 0 40px 40px; -webkit-border-radius: 0 0 40px 40px; -moz-border-radius: 0 0 40px 40px; -ms-border-radius: 0 0 40px 40px; -o-border-radius: 0 0 40px 40px; } .upi-layout-3 .upi-card .upi-title::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 85%; background: rgba(255, 255, 255, 0.4); border-radius: 0 0 40px 40px; -webkit-border-radius: 0 0 40px 40px; -moz-border-radius: 0 0 40px 40px; -ms-border-radius: 0 0 40px 40px; -o-border-radius: 0 0 40px 40px; } .upi-layout-3 .upi-card .qrcode-wrap .shareqrcode, .upi-layout-4 .upi-card .qrcode-wrap .shareqrcode, .upi-layout-5 .upi-card .qrcode-wrap .shareqrcode { position: relative; z-index: 1; padding: 15px; background-color: var(--white); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .upi-layout-3 .upi-card .qrcode-wrap .shareqrcode { margin: -130px auto auto; } .upi-layout-3 .upi-card .upi-inner { padding: 0 15px 60px; } .upi-layout-3 .upi-card .upi-bottom { background-color: var(--theme-color); padding-top: 20px; border-radius: 40px 40px 0 0; -webkit-border-radius: 40px 40px 0 0; -moz-border-radius: 40px 40px 0 0; -ms-border-radius: 40px 40px 0 0; -o-border-radius: 40px 40px 0 0; } .upi-layout-3 .upi-card .qrcode-wrap, .upi-layout-5 .upi-card .qrcode-wrap { margin-bottom: 40px; } .upi-layout-3 .upi-card .price, .upi-layout-4 .upi-card .price, .upi-layout-5 .upi-card .price { margin-bottom: 30px; } /* ============================================= */ /* !!!! upi layout 4 css !!!! */ /* ============================================= */ /* upi layout 4 color variables 1 start */ :root .upi-layout-4.upi-color-v1 { --theme-color: #6F88C9; } /* upi layout 4 color variables 1 end */ /* upi layout 4 color variables 2 start */ :root .upi-layout-4.upi-color-v2 { --theme-color: #C15A82; } /* upi layout 4 color variables 2 end */ /* upi layout 4 color variables 3 start */ :root .upi-layout-4.upi-color-v3 { --theme-color: #9AC73B; } /* upi layout 4 color variables 3 end */ /* upi layout 4 color variables 4 start */ :root .upi-layout-4.upi-color-v4 { --theme-color: #09AFB8; } /* upi layout 4 color variables 4 end */ /* upi layout 4 color variables 5 start */ :root .upi-layout-4.upi-color-v5 { --theme-color: #0367A5; } /* upi layout 4 color variables 5 end */ .upi-layout-4 .upi-card { background-color: var(--theme-color); padding: 70px 20px 40px; } .upi-layout-4 .upi-card .upi-title { margin-bottom: 40px; color: var(--white); } .upi-layout-4 .upi-card .upi-inner { position: relative; z-index: 1; padding: 0 15px 60px; } .upi-layout-4 .upi-card .upi-inner::before { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 81%; border-radius: 38px; -webkit-border-radius: 38px; -moz-border-radius: 38px; -ms-border-radius: 38px; -o-border-radius: 38px; background: rgba(255, 255, 255, 0.8); z-index: -1; } .upi-layout-4 .upi-card .price h3, .upi-layout-5 .upi-card .price h3 { color: var(--black); } /* ============================================= */ /* !!!! upi layout 5 css !!!! */ /* ============================================= */ /* upi layout 5 color variables 1 start */ :root .upi-layout-5.upi-color-v1 { --theme-color: #F5633D; } /* upi layout 5 color variables 1 end */ /* upi layout 5 color variables 2 start */ :root .upi-layout-5.upi-color-v2 { --theme-color: #F1C36D; } /* upi layout 5 color variables 2 end */ /* upi layout 5 color variables 3 start */ :root .upi-layout-5.upi-color-v3 { --theme-color: #FD818B; } /* upi layout 5 color variables 3 end */ /* upi layout 5 color variables 4 start */ :root .upi-layout-5.upi-color-v4 { --theme-color: #E3C880; } /* upi layout 5 color variables 4 end */ /* upi layout 5 color variables 5 start */ :root .upi-layout-5.upi-color-v5 { --theme-color: #87DAC1; } /* upi layout 5 color variables 5 end */ .upi-layout-5 .upi-card .upi-title { padding: 40px 15px 180px; background-color: var(--theme-color); color: var(--white); clip-path: circle(140% at 50% -100%); } .upi-layout-5 .upi-card .upi-inner { padding: 0 15px 80px; } .upi-layout-5 .upi-card .qrcode-wrap .shareqrcode { margin: -120px auto auto; } .upi-preview .upi-layout-1, .upi-preview .upi-layout-2, .upi-preview .upi-layout-3, .upi-preview .upi-layout-4, .upi-preview .upi-layout-5 { height: 100%; } .qrcode-wrap .d-none { display: none; } .upi-layout-1 .upi-card .upi-title h2, .upi-layout-3 .upi-card .upi-title h2, .upi-layout-4 .upi-card .upi-title h2, .upi-layout-5 .upi-card .upi-title h2 { color: var(--white); } .upi-theme-preview .theme-preview-body { height: auto; max-height: unset; } .preview-height.upi-preview { overflow: hidden; } .preview-height.upi-preview .theme-preview-body { overflow: auto; }