CÓDIGO PERSONALIZADO YAMPI

CHECKOUT – PERSONALIZAR – APRENCIA-CSS CUSTOMIZADO – TEM QUE TIRAR A LOGO DO

:root {

--background-color: white;

--main-color: #26AD70;

--sec-color: #ccc;

--three-color: #ffffff;

--button-color: #26AD70;

body {

background: var(--background-color) url();

background-size: cover;

background-position: center;

background-attachment: fixed;

background-repeat: no-repeat;

.inner-body {

background: white;

width: 1057px;

margin: 43px auto;

padding: 10px;

border: 1px solid #f3f3f3;

border-radius: 10px;
 box-shadow: 0 0 4em -44px black;

input {

border-radius: 10em;

header {

height: 0px;

header .holder-logo .logo .img-logo {

max-height: 80px;

header .holder-logo {

background: var(--background-color);

display: table;

height: 80px;

max-width: 100%;

width: auto;

padding: 12px;

text-align: center;

box-sizing: border-box;

margin: 0 auto;
}

.container.container-pjax.clearfix {

border-top: 1px solid #0000006b;

border-radius: 6px;

padding: 73px 0;

margin: -48px auto 0;

.container.clearfix {

margin: 0 auto;

width: max-content;

.container-promocode.active-customer.text-center {

background: none;

border-radius: 10px;

padding: 10px;

box-shadow: 0px 0 0px -11px #00000070;

.discount-flag.f10.bold {

display: none;

}
.box-0 .payment-header:before, .box-10 .payment-header:before {

background: var(--main-color);

content: 'APROVAÇÃO IMEDIATA';

font-size: 10px;

font-weight: 700;

font-family: sans-serif;

color: white;

float: right;

padding: 10px;

border-radius: 2px;

.box-8 .payment-header:before {

background: #a7a7a7;

content: 'APROVAÇÃO EM 3 DIAS';

font-size: 10px;

font-weight: 700;

font-family: sans-serif;

color: white;

float: right;

padding: 10px;

border-radius: 2px;

.payment.payment-trigger.credit-card.box-0.mt15, .payment.payment-trigger.pix.box-10 {

border: 2px solid var(--main-color);

.col-checkout.col-1 {

width: 50%;

.col-checkout.col-2 {

width: 50% !important;

float: right;

.col-checkout.col-3 {

width: 50%;

.box-checkout.box-payment.disabled, .holder-cols-checkout .box-checkout.disabled {

background: var(--three-color);

opacity: 1;

.item-quantity-selector-holder.js-item-quantity-selector-holder {

border-radius: 10em;

overflow: hidden;

box-shadow: 0px 2px 0px 0 #00000026;

button.btn.btn-primary.btn-block.btn-send {

background: var(--button-color);

border-radius: 10em;
}

button.btn.btn-xs.btn-text.btn-purple.pull-left.ml5.btn-send.btn-send-promocode {

color: #0000005e;

.box-checkout.box-customer.active {

border: 2px solid var(--main-color);

box-shadow: 7px 7px 12px -10px #00000085;

.detail {

color: #333333 !important;

.value.js-cart-total {

text-align: end;

.value.js-cart-total:after {

content: '';

font-size: 14px;

font-weight: 400;

display: block;

padding: 8px 0px;

.promocode_discount.f10.c-text-success-2.bold {
 color: var(--main-color) !important;

a.delete-promocode.mt5.f11.inline-block {

color: #cecece;

i.icon.icon-x-purple {

filter: opacity(0.3);

.box-checkout.box-customer.link-box-checkout {

background: white !important;

box-shadow: 0px 0px 5px 1px #00000017;

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-
payment) .holder-number {

background: var(--main-color) !important;

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-
payment) .title {

color: var(--main-color) !important;

a.link-box.btn-create-address.medium.block.mt20.mb15.inline-block {

color: var(--main-color);

.box-checkout.box-addresses.active {

border: 2px solid var(--main-color);

.price.pull-right.c-green-2.f12.bold {

color: #333333 !important;

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-
payment) {

background: white;

box-shadow: 0px 0px 5px 1px #00000017;

.box-top-resume, .holder-cols-checkout .box-checkout.box-resume {

box-shadow: 0px 0px 5px 1px #00000017;

.item-security.pull-right.black-70.ml30 {

display: none !important;

.inner-body > footer:nth-child(3) > div:nth-child(1) > div:nth-child(1) {

background: url();

background-repeat: no-repeat;

background-size: auto;

width: 100%;

height: 56px;

span.block.medium.f14.mb2, span.f11.black-50 {
 display: block;

text-align: center;

.mb2:after {

content: "";

margin: 0;

line-height: 25px;

display: inline;

text-indent: 3ch;

font-family: 'Roboto', sans-serif;

.billet-price.f16.c-green-2.bold.mb10 {

color: var(--main-color) !important;

.discount-flag.f10.bold {

background: var(--main-color) !important;

.box-checkout.box-payment.active {

border: 2px solid var(--main-color);

i.icon-complete.ml5.fa.fa-check.green {

color: var(--main-color) !important;

.holder-cols-checkout .box-checkout.active .box-title .holder-number {

background: var(--main-color);

.holder-number {

background: var(--sec-color);

border-radius: 0 !important;

.payment.payment-trigger.billet.box-8.selected {

border: 1px solid var(--main-color);

body.familyehouse.checkout-finalization.v2.custom-checkout.mercadopago {

background: var(--background-color);

body.familyehouse.checkout-finalization.v2.custom-checkout.mercadopago .holder-
logo.default.pull-left.mr30 {

background: none;

margin: 30px 0 0 0;

.alert.alert-warning.mb20 {

background: var(--background-color);

border: 1px solid var(--main-color);

text-align: left;

.container.clearfix.text-center.checkout-finalization {

width: auto;

margin: 100px auto 0;

.checkout-finalization .t1 {

color: var(--main-color) !important;

footer {

background: #dedede00;

display: flex;

margin: 52px 0 -60px 0;

.container.flex.between {

border-top: 1px solid #00000012;

margin: -76px auto 0;

max-width: 1058px;

@media (max-width: 700px) {

body {

background: white url();

.inner-body {

background: none;

width: auto;

margin: 0;

padding: 0;

border: 0px solid #f3f3f3;

border-radius: 0;

box-shadow: 0 0 0em 0px black;

header {

height: 130px;

position: relative;

padding: 18px 0 0 0;

margin: 0px 0px -55px 0px;

z-index: -1;

header .holder-logo .logo .img-logo {

max-height: 80px;

header .holder-logo {

background: none;
 display: table;

height: auto;

max-width: 100%;

width: 100%;

padding: 0;

text-align: center;

box-sizing: border-box;

margin: 0 auto;

.container.container-pjax.clearfix {

border: 0;

border-radius: 0;

padding: 0 10px;

margin: 7px auto;

width: auto;

.container-promocode {

background: var(--three-color) !important;

box-shadow: 0px 0 0px -11px #00000070 !important;

border-radius: 10px;

padding: 10px;

.content.clearfix {

padding: 10px;

.container.clearfix {

margin: 0 auto;
 width: max-content;

.cart-resume.mt10 {

background: #fbfbfb;

.checkout-step.enabled .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/dados.svg);

background-repeat: no-repeat;

background-position: center;

background-size: 66%;

background-color: var(--main-color);

border-radius: 0 0 6px 6px;

border: 2px solid var(--main-color);

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;

.checkout-step:nth-child(2).enabled .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/truck.svg);

background-repeat: no-repeat;

background-position: center;
 background-size: 75%;

background-color: var(--main-color);

border-radius: 0 0 6px 6px;

border: 2px solid var(--main-color);

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;

.checkout-step:nth-child(3).enabled .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/card.svg);

background-repeat: no-repeat;

background-position: center 8px;

background-size: 80%;

background-color: var(--main-color);

border-radius: 0 0 6px 6px;

border: 2px solid var(--main-color);

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;

.checkout-step.disabled:nth-child(2) .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/truck.svg);

background-repeat: no-repeat;

background-position: center;

background-size: 75%;

background-color: #bdbdbd;
 border-radius: 0 0 6px 6px;

border: 2px solid #bdbdbd;

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;

.checkout-step.disabled:nth-child(3) .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/card.svg);

background-repeat: no-repeat;

background-position: center;

background-size: 80%;

background-color: #bdbdbd;

border-radius: 0 0 6px 6px;

border: 2px solid #bdbdbd;

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;

.checkout-step:nth-child(3) .holder-icon {

background: url(https://rawartsites.neocities.org/img/Yampi/card.svg);

background-repeat: no-repeat;

background-position: center;

background-size: 80%;

background-color: #bdbdbd;

border-radius: 0 0 6px 6px;

border: 2px solid #bdbdbd;

padding: 7px;

margin: 14px 0 11px 0;

font-size: 0;
}

.item-security.pull-right.black-70.ml30 {

display: none !important;

.holder-cols-checkout .box-checkout.box-resume:not(.opened) {

background: #f9f9f9;

.col-checkout.col-2 {

width: 100% !important;

.box-checkout.box-payment.active {

border-bottom: 0px solid var(--main-color) !important;

border-radius: 0px !important;

box-shadow: 0 0 0 0 black;

span.cart_total.-mobile.mt7 {

color: #333333 !important;

.form-horizontal .holder-input.valid:after {

color: var(--main-color);

.box-top-resume, .holder-cols-checkout .box-checkout.box-resume {

padding: 0;

.checkout-step.enabled .connect, .checkout-step.enabled .holder-icon {

background-color: var(--main-color);

.payment.payment-trigger.billet.box-8.selected {

border: 1px solid var(--main-color);

.inner-body > footer:nth-child(3) > div:nth-child(1) > div:nth-child(1) {

background: url();

background-repeat: no-repeat;

background-position: center;

background-size: 85%;

width: 100%;

height: 70px;

padding: 15px 0 0 0;

.black-60 img {

display: none;

footer {
 height: 20px;