diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..b1a4a6e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,1468 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); + +.reference-redesign .Sidebar-link_parentzaeTeQfrJKk9 { + padding-left: 15px !important; +} + +.Sidebar-link-texth3XnU3y86KW5 { + justify-content: space-between !important; + width: 100% !important; +} + +.App { + --font-family: 'Inter', 'DM Sans', sans-serif; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + /* Yuno */ + --Grey-2: #ECEFF2; + --Neutral-W: #FFFFFF; + --Neutral-B: #282A30; + --Primary-1: #513CE1; + --Secondary-1: #E9E8FF; + + + + /*Readme*/ + --Sidebar-link-background: var(--Secondary-1); + + /* for text */ + --yuno-purple: #513CE1; + + /* available */ + --yuno-purple-90: #624fe4; + --yuno-purple-80: #7362e7; + --yuno-purple-70: #8576ea; + --yuno-purple-60: #968aed; + --yuno-purple-50: #a89df0; + --yuno-purple-40: #b9b1f3; + --yuno-purple-30: #cac4f6; + --yuno-purple-20: #dcd8f9; + + /* for card shadows */ + --yuno-purple-10: #edebfc; + + --yuno-white: #ffffff; + --yuno-off-white: #f0f0f0; + + --yuno-black-text: #313131; + --yuno-black-background: #222222; + + /* for card background */ + --yuno-card-background: #F6F7FB; + + /*variables used by Readme*/ + --color-text-default: var(--yuno-black-text); +} + +.App { + color: var(--yuno-black-text) !important; +} + +.App .rm-Guides { + color: var(--yuno-black-text) !important; +} + +.callout.callout_info { + --background: #ECEFF2 !important; + --title: var(--yuno-purple) !important; + --border: var(--yuno-purple) !important; +} + +/* --------------------------------- General --------------------------------- */ +.lightbox-inner { + background-color: #FFF !important; + padding: 16px !important; + display: flex !important; + justify-content: center !important; + border-radius: 14px !important; +} + +img:not(.rm-Logo-img) { + width: 100%; + height: 100%; + border-radius: 14px; + display: block; + object-fit: cover; + background-color: rgba(0, 0, 0, 0); + object-position: 50% 50%; + box-shadow: 0px 0px 0px 0px rgba(40, 42, 47, 0.05), + 0px 3px 6px 0px rgba(40, 42, 47, 0.05), + 0px 11px 11px 0px rgba(40, 42, 47, 0.04), + 0px 25px 15px 0px rgba(40, 42, 47, 0.02), + 0px 44px 18px 0px rgba(40, 42, 47, 0.01), + 0px 69px 19px 0px rgba(40, 42, 47, 0.00); +} + +body a, +.rm-Article a { + text-decoration: none !important; + color: #614ad6 !important; + font-size: 0.9rem !important; +} + +.markdown-body { + color: var(--yuno-black-text) !important; + --markdown-title: var(--yuno-black-text) !important; + /* --md-code-background: var(--yuno-purple-10); */ + --md-code-text: var(--yuno-purple); + /*--md-code-tabs: var(--yuno-purple-50);*/ + --md-code-radius: 4px; +} + +.markdown-body p { + line-height: 28px; +} + + +/*Changes the code block tab button on hover */ +.markdown-body .CodeTabs-toolbar button:not(.CodeTabs_active):hover { + background: var(--yuno-purple-30); +} + +.markdown-body .CodeTabs-toolbar button { + color: var(--Neutral-B) !important; +} + +/* move footer to the bottom */ +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +#ssr-main { + flex: 1 1; +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + + +/*--------------------- SideBar ------------------------------*/ + +.rm-Sidebar-heading { + color: #282A30 !important; + margin-bottom: 8px !important; + /*padding: 0 12px !important;*/ +} + +.rm-Sidebar-link { + border-radius: 6px !important; + color: #5A5A5A !important; +} + +.rm-Sidebar .active { + /*background: var(--Secondary-1) !important;*/ + background: #E9E8FF !important; + + border-radius: 4px !important; + color: var(--Primary-1) !important; +} + +/*.rm-Sidebar-section:not(:first-of-type){*/ +.rm-Sidebar-section { + margin: 0 !important; + margin-top: 24px !important; + /*margin-top:48px !important;*/ +} + +.rm-Sidebar-link { + /*padding: 12px !important;*/ + padding-top: 6px !important; + padding-bottom: 6px !important; +} + +.Sidebar-link-textLuTE1ySm4Kqn { + display: flex; + justify-items: space-between !important; + /*flex-direction: row-reverse;*/ +} + +.Sidebar-link_parent3OBrzjAJRSfq { + padding-left: 15px !important; +} + +.rm-Sidebar-list a button { + order: 2; +} + +.Sidebar-link-textLuTE1ySm4Kqn { + display: flex !important; + justify-content: space-between !important; + width: 242px; +} + +.rm-Sidebar-list .subpage { + /*padding: 12px !important;*/ + margin-left: 0px !important; + padding-left: 17px !important; +} + +.rm-Sidebar-list .active { + background: #E9E8FF !important; +} + +/*---------------------------- HEADER -------------------------------*/ +/*Defines header background */ +.rm-Header { + /*--Header-background: trasparent !important; +background: linear-gradient(to right, #513CE1 15%, #7362E7 30%, #b85dcf 95%); +background-image: linear-gradient(to right, #513CE1 15%, #7362E7 30%, #b85dcf 95%);*/ + --Header-background: var(--Neutral-W) !important; + background: var(--Neutral-W); + background-image: var(--Neutral-W); + --Header-button-color: black !important; +} + +.active { + background: var(--Grey-2) !important; +} + +.Header-right21PC2XTT6aMg .rm-Header-top-link { + background: #E9E8FF !important; + color: var(--Primary-1) !important; +} + +/*Change header spaces +.rm-Container { +padding-top:10px !important; +padding-bottom:10px !important; +}*/ + +.Header-bottom2eLKOFXMEmh5 { + padding-top: 16px !important; + padding-bottom: 16px !important; +} + +.Header-topuTMpygDG4e1V { + padding-top: 16px !important; + padding-bottom: 16px !important; +} + +.rm-Header-bottom-link { + margin-right: 24px !important; + font-weight: 400 !important; + color: #282A30 !important; +} + +/*ensures search bar does not cover the buttons*/ +@media (max-width: 1050px) { + .rm-Header-bottom-link { + margin-right: 0px !important; + } +} + +.reference-redesign .Sidebar-link2Dsha-r-GKh2.active { + background: #E9E8FF !important; +} + +/* ------------------------ define the configuration for DARK Mode ------------------------ */ + +@media (prefers-color-scheme: dark) { + [data-color-mode="auto"] .markdown-body { + color: var(--yuno-off-white) !important; + --markdown-title: var(--yuno-off-white) !important; + } + + .rm-Guides #content-head h1.rm-Guides { + color: var(--yuno-off-white) !important; + } + + .callout.callout_info { + --background: var(--yuno-purple-50) !important; + --title: var(--yuno-off-white) !important; + --border: var(--yuno-purple) !important; + } + + .rdmd-code .cm-string { + color: #659125 !important + } + + .rdmd-code .cm-property { + color: #9844d0 !important + } + + .rdmd-code .cm-atom { + color: #e85e35 !important + } +} + +[data-color-mode="dark"] .markdown-body { + color: var(--yuno-off-white) !important; + --markdown-title: var(--yuno-off-white) !important; +} + +[data-color-mode="dark"] .rm-Guides #content-head h1 { + color: var(--yuno-off-white) !important; +} + +[data-color-mode="dark"] .callout.callout_info { + --background: var(--yuno-purple-80) !important; + --title: var(--yuno-off-white) !important; + --border: var(--yuno-purple-50) !important; +} + +[data-color-mode="dark"] .rdmd-code .cm-string { + color: #659125 !important +} + +[data-color-mode="dark"] .rdmd-code .cm-property { + color: #9844d0 !important +} + +[data-color-mode="dark"] .rdmd-code .cm-atom { + color: #e85e35 !important +} + +/* ---------------------------------- SET UP YOUR DASHBOARD MENU ---------------------------------- */ +.first_shelf, +.second_shelf { + display: flex; + margin: 12px 0 12px; + word-break: keep-all; +} + +.first_shelf a, +.second_shelf a { + text-decoration: none !important; + cursor: pointer; + border: 1px solid transparent; + transition: border 0.35s ease; +} + +.first_shelf a:hover, +.second_shelf a:hover { + border: 1px solid #513CE1; +} + +.first_shelf .item_2:hover { + border: 1px solid black; +} + +.first_shelf p, +.second_shelf p { + max-width: 400px; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} + +.first_shelf .item_1 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--grey-1, #F6F7FA); + margin-right: 6px; + width: 35%; + /* max-width: 35%; */ +} + +.first_shelf .item_2 { + display: flex; + width: 65%; + flex-direction: column; + align-items: flex-start; + background: var(--primary-1, #513CE1); + color: #FCFCFF !important; + margin-left: 6px; +} + +.second_shelf .item_3 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--secondary-1, #E9E8FF); + margin-right: 6px; + width: 60%; +} + +.second_shelf .item_4 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--grey-1, #F6F7FA); + margin-left: 6px; + width: 40%; +} + +.first_shelf .item_1 .content, +.first_shelf .item_2 .content, +.second_shelf .item_3 .content, +.second_shelf .item_4 .content { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 25px; + width: 100%; +} + +.first_shelf .content h2, +.second_shelf .content h2 { + font-size: 25px; + font-style: normal; + font-weight: 700; + line-height: 40px; + letter-spacing: -0.4px; +} + +.first_shelf .item_1 .content h2 { + color: #513CE1; + margin: 15px 0 30px 0; +} + +.first_shelf .item_2 .content h2 { + color: var(--neutral-w, #FFF); + margin: 15px 0 30px 0; + width: 65%; +} + +.first_shelf .item_2 .content p { + color: var(--neutral-w, #FFF); + width: 65%; +} + +.second_shelf .content h2 { + color: #513CE1; + margin: 15px 0 30px 0; +} + +.first_shelf .content .svg_container, +.second_shelf .content .svg_container { + display: flex; + width: 100%; + justify-content: space-between; +} + +.content .svg_container svg { + margin-top: 15px; +} + +.content .svg_container .arrow { + flex-shrink: 0; +} + +@media only screen and (max-width: 1255px) { + + .first_shelf, + .second_shelf { + flex-direction: column; + } + + .first_shelf a, + .second_shelf a { + width: 328px !important; + height: 323px !important; + margin: 10px !important; + } +} + +/* ---------------------------------- OVERVIEW IMAGES ---------------------------------- */ +.overview_img_mobile { + display: none !important; +} + +@media only screen and (max-width: 500px) { + .overview_img_desktop { + display: none !important; + } + + .overview_img_mobile { + display: block !important; + } +} + +/* ---------------------------------- PLATFORM CARDS ---------------------------------- */ +.platform_shelf { + display: flex; + justify-content: space-evenly; + gap: 3%; + display: flex; + padding: 32px; + align-items: center; + align-content: center; + gap: 16px; + flex-wrap: wrap; + border-radius: 34px; + background: #F6F7FA; +} + +.platform_shelf .platform_buttons { + flex: 1; + margin-right: 6px; + padding: 10px; + transition: transform .2s; + display: flex; + padding: 24px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + border-radius: 24px; + background: var(--Neutral-W, #FFF); + border: 1px solid transparent; +} + +.platform_shelf .platform_buttons:hover { + cursor: pointer; + box-shadow: 0px 10px 20px 0px #282A3014; + /* transform: translateY(-1px); */ +} + +.platform_shelf .platform_buttons:hover .svg_content { + background: #513CE1; +} + +.platform_shelf .platform_buttons:hover .svg_content svg path { + fill: #FFF; +} + +.platform_shelf .platform_buttons .svg_content { + display: flex; + width: 32px; + height: 32px; + padding: 5px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 6px; + background: var(--Grey-1, #F6F7FA); +} + +.platform_shelf .platform_buttons .svg_content svg { + width: 30px !important; + height: 30px !important; +} + +.platform_shelf .platform_buttons h3 { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + gap: 8px; + align-self: stretch; + margin: 0; + font-size: 16px; +} + +/* ---------------------------------- WORKFLOW CHECKOUT ---------------------------------- */ +.checkoutsdk_shelf { + display: flex; + margin: 12px 0 12px; + word-break: keep-all; +} + +.checkoutsdk_shelf a { + text-decoration: none !important; + cursor: pointer; + border: 1px solid transparent; + transition: border 0.35s ease; +} + +.checkoutsdk_shelf a:hover { + border: 1px solid #513CE1; +} + +.checkoutsdk_shelf .item_2:hover { + border: 1px solid black; +} + +.checkoutsdk_shelf p { + max-width: 400px; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} + +.checkoutsdk_shelf .item_1 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--primary-1, #513CE1); + margin: 0 3px; +} + +.checkoutsdk_shelf .item_2 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--primary-1, rgba(0, 0, 0, 0.786)); + color: #FCFCFF !important; + margin: 0 3px; +} + +.checkoutsdk_shelf .item_3 { + display: flex; + flex-direction: column; + align-items: flex-start; + background: var(--secondary-1, #E9E8FF); + margin-right: 6px; + margin: 0 3px; +} + +.checkoutsdk_shelf .content { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 25px; + /* width: 100%; */ +} + +.checkoutsdk_shelf .content h2 { + font-size: 25px; + font-style: normal; + font-weight: 700; + line-height: 40px; + letter-spacing: -0.4px; +} + +.checkoutsdk_shelf .content h2 { + color: var(--neutral-w, #FFF); + margin: 15px 0 5px 0; + /* width: 65%; */ +} + +.checkoutsdk_shelf .item_3 .content h2 { + color: var(--primary-1, #513CE1); + margin: 15px 0 5px 0; + /* width: 65%; */ +} + +.checkoutsdk_shelf .item_3 .content p { + color: black; +} + +.checkoutsdk_shelf .content p { + color: var(--neutral-w, #FFF); + width: 75%; +} + +.checkoutsdk_shelf .content .svg_container { + display: flex; + width: 100%; + justify-content: space-between; +} + +.content .svg_container svg { + margin-top: 15px; +} + +.content .svg_container .arrow { + flex-shrink: 0; +} + +@media only screen and (max-width: 1255px) { + + .checkoutsdk_shelf, + .second_shelf { + flex-direction: column; + } + + .checkoutsdk_shelf a, + .second_shelf a { + width: 328px !important; + height: 323px !important; + margin: 10px !important; + } +} + +/* ----------------------------- PAYMENT METHODS CARDS ------------------------------ */ +.methods_cards_shelf { + margin: 0 0 0 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.methods_cards_shelf .content { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 20px; + word-break: keep-all; + + height: 130px; +} + +.methods_cards_shelf .content .arrow { + margin-top: -80px; + margin-right: -10px; +} + +.methods_cards_shelf a { + text-decoration: none !important; + cursor: pointer; + border: 1px solid transparent; + transition: border 0.35s ease; + background: var(--secondary-1, #E9E8FF); + color: #513CE1 !important; +} + +.methods_cards_shelf a:hover { + border: 1px solid #513CE1; +} + +.methods_cards_shelf h4 { + margin-left: 10px; + color: #513CE1 !important; +} + +.methods_cards_shelf svg { + fill: #513CE1; +} + +.methods_cards_shelf>a:nth-child(1), +.methods_cards_shelf>a:nth-child(6) { + background: var(--grey-1, #F6F7FA); +} + +.methods_cards_shelf>a:nth-child(2), +.methods_cards_shelf>a:nth-child(7) { + background: #513CE1; +} + +.methods_cards_shelf a:nth-child(2) h4, +.methods_cards_shelf a:nth-child(2) svg, +.methods_cards_shelf a:nth-child(7) h4, +.methods_cards_shelf a:nth-child(7) svg { + color: white !important; + fill: white !important; +} + +.methods_cards_shelf>a:nth-child(3), +.methods_cards_shelf>a:nth-child(8), +.methods_cards_shelf>a:nth-child(9) { + background: var(--secondary-1, #E9E8FF); + ; +} + +.methods_cards_shelf>a:nth-child(4) { + background: var(--grey-1, #F6F7FA); +} + +.methods_cards_shelf>a:nth-child(5), +.methods_cards_shelf>a:nth-child(10) { + background: rgba(0, 0, 0, 0.806); +} + +.methods_cards_shelf a:nth-child(5) h4, +.methods_cards_shelf a:nth-child(5) svg, +.methods_cards_shelf a:nth-child(10) h4, +.methods_cards_shelf a:nth-child(10) svg { + color: white !important; + fill: white !important; +} + +@media only screen and (max-width: 1300px) { + .methods_cards_shelf { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 800px) { + .methods_cards_shelf { + grid-template-columns: repeat(2, 1fr); + } +} + +/* -------------------------------- Code style ------------------------------- */ +.rdmd-code { + color: #282A30 !important; + Background: #F7F7F7; + Border: 1px solid #EDEDED; +} + +.markdown-body { + color: var(--yuno-black-text) !important; + --markdown-title: var(--yuno-black-text) !important; + /* --md-code-background: var(--yuno-purple-10); */ + --md-code-text: var(--yuno-purple); + /*--md-code-tabs: var(--yuno-purple-50);*/ + --md-code-radius: 3px; + +} + +/*-------------------------------- Tables configuration ------------------------------ */ + +thead th { + background-color: #FCFCFF !important; + border-color: #ECEFF2 !important; + color: #282A30 !important; + font-weight: 400 !important; + border-width: 1px !important; + border: none !important; + +} + +table tr td { + background-color: #FFFFFF !important; + border-color: #ECEFF2 !important; + color: #282A30 !important; + font-weight: 400 !important; + border-width: 1px !important; + border: none !important; +} + +thead tr { + border: 1px solid #ECEFF2 !important; +} + +table { + border-collapse: collapse !important; + /* This ensures no spacing between table cells */ + border: 1px solid #ECEFF2 !important +} + +/*-------------------------------- PAYMENT METHODS PAGES ------------------------------ */ +.detail-psp-card-content .payment_list { + margin-bottom: 0 !important; +} + +.detail-psp-card .content .payment_img { + border-radius: 50%; + background-color: transparent; + padding: 0.1rem; + margin-right: 7px; +} + +.shelf { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.psp-card { + background-color: var(--yuno-card-background); + border-radius: 10px; + border: 1px solid var(--yuno-purple); + max-width: 800px; + +} + +.detail-psp-card { + max-width: 800px; + margin: 0; + padding: 20px; +} + +.detail-psp-card-content { + display: grid; + grid-template-columns: 1fr 3fr; + column-gap: 5%; + align-items: center; + font-size: 0.85rem !important; + border-bottom: 1px solid #BABABA; + margin-bottom: 0.5rem; +} + +.detail-psp-card-content-tables { + align-items: center; + font-size: 0.85rem !important; + border-bottom: 1px solid #BABABA; + padding: 2rem 0; + +} + +.detail-psp-card-content:last-of-type { + border: 0; + margin-bottom: 0; +} + +.detail-psp-card-content .label { + font-weight: 500 !important; + margin: 0.6rem 0; +} + +.detail-psp-card-content ul, +.detail-psp-card-content ol { + padding-left: 0 !important; +} + +.detail-psp-card-content .content { + font-weight: 400 !important; + margin: 0.6rem 0; +} + +.detail-psp-card-content li { + list-style-position: inside; +} + +.detail-psp-card-content .seccond-level-bullet-list li { + padding-left: 1rem; + list-style-type: square; +} + + +.detail-psp-card .content .contry-badge { + display: flex; + align-items: center; + border-radius: 7px; + margin-bottom: 16px; +} + +.detail-psp-card .content .container-county-img { + border-radius: 50%; + background-color: rgba(197, 78, 230, 0.1); + padding: 0.1rem; + margin-right: 7px; +} + +.detail-psp-card .content .container-county-img .county-img { + max-width: 25px; +} + +.psp-card .detail-psp-card .content table { + border-collapse: collapse; + width: 100%; + font-size: 0.8rem !important; + border: 0; + border-radius: 10px; +} + +.psp-card .detail-psp-card .content table td, +th { + border: 0; + padding: 6px; + font-weight: 400 !important; +} + +.psp-card .detail-psp-card .content table td { + font-size: 0.8rem; + text-align: left; + border-top: 1px solid #e5e5e5; + border-bottom: 1px solid #e5e5e5; +} + +.psp-card .detail-psp-card .content .table-text td { + font-size: 0.8rem; + text-align: left; +} + +.psp-card .detail-psp-card .content table td:nth-child(1) { + width: 30%; +} + +.psp-card .detail-psp-card .content th { + text-align: left; + font-weight: 600 !important; + border-left: 0; + border-right: 0; + padding: 6px !important; +} + +.psp-card .detail-psp-card .content tr:nth-child(odd) { + background-color: var(--yuno-purple-10); + ; +} + +.psp-card .detail-psp-card .content tr:nth-child(even) { + background-color: var(--yuno-card-background); + ; +} + +.detail-content-countries-list { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + column-gap: 3%; + justify-content: space-between; +} + +@media only screen and (max-width: 700px) { + .detail-content-countries-list { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } +} + +@media only screen and (max-width: 600px) { + .detail-content-countries-list { + display: grid; + grid-template-columns: 1fr 1fr; + } +} + +@media only screen and (max-width: 400px) { + .detail-content-countries-list { + display: grid; + grid-template-columns: 1fr; + } +} + +/*-------------------------------- INFO BLOCK ------------------------------ */ +.infoBlockContainer { + background: rgba(233, 232, 255, 0.24); + border: 1px solid var(--grey-2, #ECEFF2); + border-radius: 8px; + display: flex; + gap: 24px; + padding: 24px; +} + +.alert { + background: #fcf8f2; +} + +.danger { + background: #fdf7f7; +} + +.success { + background: #f3f8f3; +} + +.infoBlockContainer h3 { + color: var(--neutral-b, #282A30); + font-style: normal; + font-weight: 700; + line-height: 32px; + /* 133.333% */ + margin: 0 0 24px; +} + +.infoBlockContainer p, +.contentContainer ul { + color: var(--neutral-b, #282A30); + font-style: normal; + font-weight: 400; + line-height: 24px; + /* 120% */ + margin: 0; +} + +.infoBlockContainer a, +contentContainer a { + cursor: pointer; + color: #513CE1 !important; +} + +.verticalLine { + border: 2px solid #513CE1; +} + +.verticalLineAlert { + border: 2px solid #f0ad4e; +} + +.verticalLineDanger { + border: 2px solid #d9534f; +} + +.verticalLineSuccess { + border: 2px solid #50af51; +} + +.contentContainer { + display: flex; + flex-direction: column; + gap: 24px; +} + + +/*-------------------------------- Update date ------------------------------ */ +.UpdatedAt { + display: none; +} + +/*----------------------------------- Badges --------------------------------- */ +.NextStepsDivider { + margin-top: 20px; +} + +.content-body { + margin: 0 !important; +} + +.content-toc { + display: none; +} + +.shelf-country-connections { + margin: 0; +} + +.country-connections-card { + border-radius: 10px; +} + +.country-connections-card .country-connections-card-header { + display: flex; + align-items: center; +} + +.country-connections-card .country-connections-card-header h2 { + margin: 30px 0 0 10px; +} + +.country-connections-card .country-connections-card-logo { + max-width: 50px; + margin: 30px 0 0 30px; +} + +.detail-country-connections-card-title .title { + margin: 2rem 0 1rem 0; + font-weight: 600; + font-size: 0.85rem; + border-bottom: 1px solid #BABABA; + padding-bottom: 4px !important; +} + +.detail-country-connections-card-content { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + column-gap: 7px; + row-gap: 7px; + align-items: start; + font-size: 0.85rem; +} + + + +.details-card { + border: 1px solid var(--yuno-purple-50); + display: flex; + align-items: center; + gap: 10px; + padding: 0.6rem; + border-radius: 7px; +} + +.details-card-on-click-effects { + cursor: pointer; +} + +.details-card-on-click-effects:hover { + transform: scale(1.02); + box-shadow: 0 5px 5px var(--yuno-purple-10); +} + +.details-card .card-logo div { + height: 23px; + width: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.details-card .card-name { + grid-area: name; + align-self: center; +} + +.details-card img { + max-height: 23px; + max-width: 23px; +} + +.details-card .card-title { + display: inline-block; + ; + padding: 0; + margin: 0; +} + +.details_open_card { + margin: 5px 0; +} + +.table-card { + border-radius: 10px; + border: 1px solid #614ad623; + display: flex; + transition: all .2s; +} + +.table-card summary { + display: flex; + justify-content: flex-start; + align-items: center; + cursor: pointer; +} + +.table-card summary .sumary-icon { + display: flex; + justify-content: flex-end; + flex-grow: 1; +} + +.table-card .table-div { + margin: 0.5rem 0; + padding: 0 0.5rem; +} + +@media only screen and (max-width: 1210px) { + .detail-country-connections-card-content { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 850px) { + .detail-country-connections-card-content { + grid-template-columns: repeat(2, 1fr); + } +} + +@media only screen and (max-width: 768px) { + .detail-country-connections-card-content { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 650px) { + .detail-country-connections-card-content { + grid-template-columns: repeat(2, 1fr); + } +} + +@media only screen and (max-width: 415px) { + .detail-country-connections-card-content { + grid-template-columns: repeat(1, 1fr); + } +} + +/* ---------- Cards with SVG and different rows ---------- */ +.cards_container { + display: flex; + /* width: 740px; */ + padding: 32px; + align-items: center; + align-content: center; + gap: 16px; + flex-wrap: wrap; + border-radius: 34px; + background: #F6F7FA; + gap: 16px; +} + +.second_cards_container { + background: #E9E8FF; +} + +.cards_container .first_row, +.cards_container .second_row { + display: flex; + gap: 16px; + width: 100%; +} + +.cards_container .card, .cards_container .card2 { + display: flex; + /* width: 330px; */ + padding: 24px; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: stretch; + gap: 24px; + flex-shrink: 0; + border-radius: 24px; + background: var(--Neutral-W, #FFF); + flex: 1; + border: 1px solid transparent; + transition: all 0.3 ease; +} + +.cards_container .card:hover, .cards_container .card2:hover { + cursor: pointer; + box-shadow: 0px 10px 20px 0px #282A3014; + /* transform: translateY(-1px); */ +} + +.cards_container .card:hover .svg_content, .cards_container .card2:hover .svg_content { + background: #513CE1; +} + +.cards_container .card:hover .svg_content svg path { + fill: #FFF; +} + +.cards_container .svg_content { + display: flex; + width: 48px; + height: 48px; + padding: 11px; + flex: 1; + align-items: center; + justify-content: center; + border-radius: 12px; + background: var(--Grey-1, #F6F7FA); +} + +.cards_container .content h2 { + color: var(--Neutral-B, #282A30); + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; + align-self: stretch; +} + +.cards_container .content p { + color: var(--Neutral-B, #282A30); + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 16px; + align-self: stretch; + opacity: 0.7; +} + +@media only screen and (max-width: 700px) { + + .second_row { + flex-direction: column; + width: 100%; + } + + .second_row a { + width: 100% !important; + } +} + +@media only screen and (max-width: 500px) { + + .first_row { + flex-direction: column; + width: 100%; + } + + .first_row a { + width: 100% !important; + } +} + +/* ------------------------ LINK CARDS ------------------------ */ +.link_cards_container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + padding: 32px; + align-items: center; + align-content: center; + gap: 16px; + flex-wrap: wrap; + border-radius: 34px; + background: #E9E8FF; +} + +.link_cards_container .card { + display: flex; + padding: 22px; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: stretch; + gap: 8px; + flex-shrink: 0; + border-radius: 24px; + background: var(--Neutral-W, #FFF); + flex: 1; + border: 1px solid transparent; + min-height: 120px; +} + +.link_cards_container .card:hover { + cursor: pointer; + box-shadow: 0px 10px 20px 0px #282A3014; + /* transform: translateY(-1px); */ +} + +.link_cards_container .card:hover .svg_content { + background: #513CE1; +} + +.link_cards_container .card:hover .svg_content svg { + stroke: #FFF; +} + +.link_cards_container .card:hover .svg_content svg path { + stroke: #FFF; + fill: #FFF; +} + +.link_cards_container .svg_content { + display: flex; + width: 26px; + height: 26px; + padding: 5px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 6px; + background: var(--Grey-1, #F6F7FA); +} + +.link_cards_container h4 { + color: var(--Neutral-B, #282A30); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + align-self: stretch; + color: var(--Neutral-B, #282A30); + margin: 0; + word-break: keep-all; +} + +.yuno { + --highlight: var(--yuno-card-background) !important; + background: var(--yuno-card-background) !important; + margin: 1.5em !important; + border-radius: 5px !important; + border-left: 15px solid var(--yuno-purple) !important; + padding: 0.25em !important; +} + +/* ---------- define the configuration for DARK Mode ---------- */ + +@media (prefers-color-scheme: dark) { + .details-card-on-click-effects:hover { + box-shadow: none !important; + } +} + +[data-color-mode="dark"] .details-card-on-click-effects:hover { + box-shadow: none !important; +} + +/*------------------------------------------------------------------- */ +/* ---------------------------- INDEX --------------------------- */ +/*------------------------------------------------------------------- */ +/* SIDEBAR -------------------------------------------------------- 44 */ +/* HEADER -------------------------------------------------------- 107 */ +/* SET UP YOUR DASHBOARD MENU ------------------------------------ 271 */ +/* OVERVIEW IMAGES ----------------------------------------------- 402 */ +/* PLATFORM CARDS ------------------------------------------------ 416 */ +/* WORKFLOW CHECKOUT --------------------------------------------- 467 */ +/* PAYMENT METHODS CARDS ----------------------------------------- 586 */ +/* Code Style----------------------------------------------------- 674 */ +/* change sidbar icons ------------------------------------------- 685 */ +/* tables configuration ------------------------------------------ 725 */ +/* PAYMENT METHODS PAGES------------------------------------------ 752 */ +/* INFO BLOCK ---------------------------------------------------- 937 */ +/* UPDATE DATE --------------------------------------------------- 1003 */ +/* BADGES -------------------------------------------------------- 1008 */ +/* Cards with SVG and different rows ----------------------------- 1149 */ +/* LINK CARDS ---------------------------------------------------- 1251 */ +/* */ +/* */ +/* */ +/* */ \ No newline at end of file diff --git a/html/home/homepage.html b/html/home/homepage.html new file mode 100644 index 0000000..8b32fb7 --- /dev/null +++ b/html/home/homepage.html @@ -0,0 +1,376 @@ + + + + + + + Document + + + + + +
+ +
+
+
+

Learn how to integrate Yuno

+
+
+

Explore our guides and examples to integrate Yuno and provide your clients with all payment methods, + processors, and fraud prevention systems available globally.

+ Get Started +
+
+
+ +
+ +
+ +
+
+
+
+

First Steps

+

Follow just a few steps to quickly get started with the Yuno ecosystem.

+
+ + Get Started + +
+
+
+ +
+
+
+
+

Build Your Integration

+

Choose the integration methods that better fit your needs.

+
+ Go to SDKs + +
+
+
+ +
+
+
+
+

Handle Payments

+

Manage payments with our all-in-one payment orchestration solution.

+
+ How it works + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/html/link_cards.html b/html/link_cards.html new file mode 100644 index 0000000..77cda44 --- /dev/null +++ b/html/link_cards.html @@ -0,0 +1,99 @@ + +
+ + +
+ + + +
+

Customers

+ + + +
+ + + +
+

Enrollment

+ + +
+ + + +
+

Checkout

+ + +
+ + + +
+

Payments

+ + + +
+ + + +
+

Payment Links

+ + +
+ + + +
+

Subscriptions

+ + +
+ + + +
+

Payouts

+ + +
+ + + +
+

Reports

+ + +
+ + + +
+

Installments

+ + +
+ + \ No newline at end of file diff --git a/html/overview_cards.html b/html/overview_cards.html new file mode 100644 index 0000000..79b82f4 --- /dev/null +++ b/html/overview_cards.html @@ -0,0 +1,101 @@ + +
+
+ +
+
+ + + + + +
+

+ Authentication +

+

+ Learn about the authentication system Yuno APIs use. +

+
+ + +
+
+ + + + + +
+

+ Environments +

+

+ Check the existing environments for testing and production. +

+
+ +
+
+ +
+
+ + + +
+

+ SDKs +

+

+ Explore the complete list of Yuno SDKs. +

+
+ + +
+
+ + + +
+

+ Webhooks +

+

+ Receive automatic notification from your operations. +

+
+ + +
+
+ + + +
+

+ Reference +

+

+ Discover essential data Yuno API uses. +

+
+ +
+
+ \ No newline at end of file diff --git a/html/overview_second_cards.html b/html/overview_second_cards.html new file mode 100644 index 0000000..96347b3 --- /dev/null +++ b/html/overview_second_cards.html @@ -0,0 +1,56 @@ + +
+
+ +
+
+ + + +
+

+ SDK Integration Example +

+

+ Explore a web implementation of Yuno SDK. +

+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+

+ Postman +

+

+ Try out the Yuno APIs. +

+
+ +
+ +
+ \ No newline at end of file diff --git a/html/payment_methods_model.html b/html/payment_methods_model.html new file mode 100644 index 0000000..b98b576 --- /dev/null +++ b/html/payment_methods_model.html @@ -0,0 +1,115 @@ + +
+ + +
+ + + +
+

General Information

+ + + +
+ + + +
+

Captures

+ + + +
+ + + +
+

Refunds

+ + + +
+ + + +
+

Voids

+ + + +
+ + + +
+

Installments

+ + + +
+ + + +
+

Chargebacks

+ + + +
+ + + +
+

Security

+ + + +
+ + + +
+

Testing Guidelines

+ + + +
+ + + +
+

Integration Configuration

+ + + +
+ + + +
+

Production Environment

+ + +
+ \ No newline at end of file diff --git a/html/platform_cards.html b/html/platform_cards.html new file mode 100644 index 0000000..7de5ace --- /dev/null +++ b/html/platform_cards.html @@ -0,0 +1,98 @@ + + + +
+
+
+ + + + +
+

+ Web +

+
+ +
+
+ + + + +
+

+ iOS +

+
+ +
+
+ + + +
+

+ Android +

+
+
+ \ No newline at end of file