0b86fe79fc
All checks were successful
Build and deploy / Validate source (push) Successful in 7s
Build and deploy / Integration suite on a real stack (push) Successful in 2m51s
Build and deploy / Secret scan and release gate (push) Successful in 9s
Build and deploy / Publish images (push) Successful in 56s
On a short page (sign-in, an empty cart) the footer followed the content and the rest of the screen was left blank below it, more so with the Site drawn at 80%. The body is now a column at least the screen's height with the footer pushed to its end; under the 80% zoom that height is 125vh, because the zoom scales viewport units too. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
494 lines
36 KiB
CSS
494 lines
36 KiB
CSS
/* Site DTF — redesign (2026-09). Loaded after the page's own styles and only
|
||
restyles: every element and class the scripts use keeps its meaning. The
|
||
previous look is in git tag ui-v1. */
|
||
:root{
|
||
--laranja:#FFA81A; --laranja2:#FF7F0A; --laranja-escuro:#C25E00;
|
||
--preto:#03060B; --texto2:#45484D; --fraco:#5C5F64; --linha:#E6E6E6; --cinza:#F9F9F9;
|
||
--verde:#1E7A45; --verde-ml:#1E7A45; --verde-fundo:#E3F5EA; --aviso-fundo:#FFF8EC; --aviso-linha:#F6D9A6;
|
||
--raio:14px; --raio2:10px;
|
||
}
|
||
body{background:#fff}
|
||
.w{max-width:1200px;padding:0 24px}
|
||
h1,h2,h3,h4{font-family:"Inter",sans-serif}
|
||
.et{font-family:"Inter",sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-escuro)}
|
||
|
||
/* Pages (site-pages.js): the home, a product page and the cart show only their own parts. */
|
||
html[data-rota="inicio"] :is(#passos,#foco,#qual,#prev,#carr,.checkout,#carrVazio),
|
||
html[data-rota="produto"] :is(.hero2,.etapas2,#cards,#carr,.checkout,#carrVazio,#info),
|
||
html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,.pagCab,.pagResumo){display:none!important}
|
||
html:is([data-rota="pagamento"],[data-rota="pix"]) :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,#carr,#carrVazio,#desfazer){display:none!important}
|
||
html[data-sem-itens] #carr{display:none!important}
|
||
html:not([data-rota="inicio"]) #envio{padding-top:0;padding-bottom:64px;min-height:70vh}
|
||
#envio,#foco,#qual,#prev,#checkoutStatus{scroll-margin-top:var(--topo-passos,128px)}
|
||
.carrVazio{max-width:520px;margin:48px auto 0;padding:0 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
|
||
.carrVazio[hidden]{display:none}
|
||
.carrVazio h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
|
||
.carrVazio p{color:var(--fraco);font-size:17.5px}
|
||
|
||
/* Hero */
|
||
.hero2{background:var(--preto);color:#fff;padding:64px 0}
|
||
.hero2-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
|
||
.hero2-text{display:flex;flex-direction:column;gap:24px}
|
||
.chips{display:flex;gap:10px;flex-wrap:wrap}
|
||
.chip2{font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:6px;border:1px solid #3A3D42;color:#E4E4E4}
|
||
.chip2.destaque{background:var(--laranja);border-color:var(--laranja);color:var(--preto);font-weight:800}
|
||
.hero2 h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.04;font-weight:900;letter-spacing:-.03em}
|
||
.hero2 h1 em{font-style:normal;color:var(--laranja)}
|
||
.hero2-text>p{font-size:19px;line-height:1.55;color:#C9CCD1;max-width:560px}
|
||
.hero2-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
|
||
.hero2-cta span{font-size:16px;color:#9EA3AA}
|
||
.btn-laranja{height:56px;padding:0 28px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:18px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
|
||
.btn-laranja:hover{background:#FFB53D}
|
||
.hero2-folha{background:#14171B;border:1px solid #262A2F;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
|
||
.hf-cab{display:flex;align-items:baseline;gap:10px}
|
||
.hf-cab b{font-family:"Inter",sans-serif;font-size:16.5px}
|
||
.hf-cab span{margin-left:auto;font-size:15px;color:#9EA3AA}
|
||
.hf-area{position:relative;height:260px;border-radius:10px;background:#0B0D10;border:1px dashed #3A3D42;overflow:hidden}
|
||
.hf-area i{position:absolute;border-radius:6px;opacity:.88}
|
||
.hf-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
|
||
.hf-num span{display:block;font-size:14.5px;color:#9EA3AA}
|
||
.hf-num b{font-family:"Inter",sans-serif;font-size:19px}
|
||
.hf-num .verde{color:#57D68A}.hf-num .laranja{color:var(--laranja)}
|
||
|
||
/* Steps strip */
|
||
.etapas2{padding:32px 0;border-bottom:1px solid var(--linha)}
|
||
.etapas2 .w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
|
||
.etapas2 .w>div{display:flex;gap:14px;align-items:flex-start}
|
||
.etapas2 span{width:36px;height:36px;flex-shrink:0;border-radius:999px;background:#FFF1DB;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center}
|
||
.etapas2 b{font-family:"Inter",sans-serif;font-size:17px}
|
||
.etapas2 p{margin-top:3px;font-size:16px;color:var(--fraco)}
|
||
section+section{border-top:0}
|
||
|
||
/* Product chooser */
|
||
#envio{padding-top:56px}
|
||
.cards-cab{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
|
||
.cards-cab h2{margin-top:8px;font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.02em}
|
||
.cards-cab p{margin-left:auto;max-width:440px;font-size:16.5px;color:var(--fraco)}
|
||
.escolha{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
|
||
.ec{text-align:left;padding:26px;gap:14px;border:1px solid var(--linha);border-radius:16px;box-shadow:none;cursor:pointer;font:inherit;color:inherit}
|
||
.ec::before,.ec::after{display:none}
|
||
.ec:hover{border-color:var(--laranja);box-shadow:0 10px 30px rgba(3,6,11,.08);transform:translateY(-2px)}
|
||
.ec.f,.ec.f:hover{border-color:var(--linha)}
|
||
.ec.f:hover{border-color:var(--laranja)}
|
||
.ec-top{display:flex;align-items:center;gap:10px}
|
||
.ec-kind{font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.05em;color:#707070}
|
||
.marc2{margin-left:auto;font-family:"Inter",sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--preto);color:var(--laranja)}
|
||
.ec h3{font-size:25px;font-weight:800;letter-spacing:-.01em;color:var(--preto)}
|
||
.ec>p{font-size:16.5px;line-height:1.5;color:var(--texto2);flex:1}
|
||
.ec-pe{display:flex;align-items:flex-end;gap:12px;padding-top:14px;border-top:1px solid #EFEFEF}
|
||
.ec-preco{display:flex;flex-direction:column;gap:2px}
|
||
.ec-preco span{font-size:15px;color:#707070}
|
||
.ec-preco em{font-style:normal}
|
||
.ec-preco b{font-family:"Inter",sans-serif;font-size:29px;font-weight:900;letter-spacing:-.02em;color:var(--preto)}
|
||
.ec-go{margin-left:auto;height:46px;padding:0 18px;border-radius:var(--raio2);background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:16.5px;display:flex;align-items:center;white-space:nowrap}
|
||
.ec:hover .ec-go{background:var(--laranja);color:var(--preto)}
|
||
|
||
/* Progress bar */
|
||
.passos{position:sticky;top:var(--topo,64px);z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 22px;padding:14px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha);font-family:"Inter",sans-serif;font-size:16px}
|
||
.passos[hidden]{display:none}
|
||
.passos a{display:flex;align-items:center;gap:8px;color:#707070;font-weight:600;text-decoration:none}
|
||
.passos a span{width:26px;height:26px;border-radius:999px;border:2px solid #D0D0D0;display:flex;align-items:center;justify-content:center;font-size:15px}
|
||
.passos a.atual{color:var(--preto);font-weight:800}
|
||
.passos a.atual span{background:var(--laranja);border-color:var(--laranja)}
|
||
.passos a.feito{color:var(--verde)}
|
||
.passos a.feito span{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
|
||
.passos i{width:48px;height:2px;background:#E0E0E0}
|
||
|
||
/* Product page (Montagem): artworks on the left; on the right a buy box that
|
||
stays in view with the live sheet, the grade, the price, the total and the
|
||
add-to-cart button. The old quality and preview panels are not shown: their
|
||
parts live in the buy box, and the rest repeated it (the findings list too:
|
||
each row already says what was checked). */
|
||
#qual,#prev,#rA,.qb2,#qitens{display:none!important}
|
||
.voltar{height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:16px;font-weight:500;color:var(--fraco);margin:24px 0 14px}
|
||
.voltar:hover{color:var(--laranja-escuro)}
|
||
.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
|
||
.cat,.cat.file{border:0;background:transparent;box-shadow:none;overflow:visible}
|
||
.cabfoco,.cat.file .cabfoco{padding:0 0 24px!important;background:transparent;border:0;display:flex;flex-direction:column;gap:20px}
|
||
.cabfoco>div:first-child{display:flex;flex-direction:column-reverse;gap:4px}
|
||
.cabfoco .lg{font-size:15px;font-weight:800;color:var(--laranja-escuro);letter-spacing:.06em;text-transform:uppercase}
|
||
.cabfoco h3{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
|
||
.tipoEnvio{margin:0}
|
||
.tipoEnvio:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:calc(100% - 452px)}
|
||
.tipoEnvio .cam,.tipoEnvio .cam.on{padding:14px 16px;min-height:0;border-radius:12px;border:1px solid var(--linha);background:#F9F9F9;box-shadow:none;align-items:flex-start}
|
||
.tipoEnvio .cam.on{padding:13px 15px;border:2px solid var(--preto);background:#fff}
|
||
.tipoEnvio .cam .mk2{display:none}
|
||
.tipoEnvio .cam div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:baseline}
|
||
.tipoEnvio .cam b{margin:0;font-size:16.5px;font-weight:700;color:var(--texto2)}
|
||
.tipoEnvio .cam.on b{color:var(--preto);font-weight:800}
|
||
.tipoEnvio .cam em{margin:0;font-size:15px;font-weight:500;color:var(--fraco);white-space:nowrap}
|
||
.tipoEnvio .cam.on em{font-weight:600;color:var(--preto)}
|
||
.tipoEnvio .cam div>span{grid-column:1/-1;font-size:15px;color:var(--fraco);line-height:1.4}
|
||
.tipoEnvio .cam.on div>span{color:var(--texto2)}
|
||
.tipoEnvio .cam:disabled{cursor:default}
|
||
.tipoEnvio .cam:disabled:not(.on){opacity:.55}
|
||
@media(max-width:1100px){.tipoEnvio:not([hidden]){max-width:none}}
|
||
.cat .in{padding:0!important}
|
||
.foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
|
||
.fila{display:flex;flex-direction:column;gap:12px}
|
||
.fila>*{margin:0}
|
||
.cam{border-radius:var(--raio2)}
|
||
.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
|
||
#larguraFolhaPronta{display:inline;font-size:inherit;color:inherit}
|
||
.zona{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:16px 20px;margin:0;border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
|
||
.zona .ico{grid-row:1/4;display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);font-size:20px;box-shadow:none}
|
||
.zona b{font-size:16.5px;margin:0}
|
||
.zona span{max-width:none;margin:0;font-size:15px;color:var(--fraco)}
|
||
.zona .bt{display:none}
|
||
.zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none}
|
||
.zona .zManual{grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid var(--aviso-linha);color:var(--texto2);line-height:1.5}
|
||
.zona .zManual[hidden]{display:none}
|
||
.zona .zManual b{display:inline;font-size:15px}
|
||
.zona .zOutra{display:none}
|
||
.zona.compacta{display:flex;justify-content:center;align-items:center;min-height:56px;padding:0 20px;border:1.5px dashed #D0D0D0;background:#fff;cursor:pointer}
|
||
.zona.compacta>*{display:none}
|
||
.zona.compacta .zOutra{display:inline;font-size:16px;color:var(--fraco)}
|
||
.zona.compacta .zOutra b{display:inline;font-size:16px;font-weight:600;color:var(--preto)}
|
||
.zona.compacta .zOutra b::before{content:"+";margin-right:8px;font-weight:700}
|
||
.zona.compacta:hover,.zona.compacta.sobre{border-color:var(--laranja2)}
|
||
#lista{display:flex;flex-direction:column;gap:10px}
|
||
#lista:empty{display:none}
|
||
.art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
|
||
.art.nova{background:#fff;box-shadow:0 0 0 2px rgba(255,168,26,.45)}
|
||
.art .l1 b{font-size:16.5px;font-weight:700}
|
||
.art label{font-size:14.5px}
|
||
.art input{height:42px;font-size:16.5px;font-weight:600;border-radius:8px}
|
||
.art .cps{grid-template-columns:repeat(2,minmax(0,160px))}
|
||
.listaCab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
|
||
.listaCab h4{margin:0;font-size:19px;font-weight:700}
|
||
.listaCab span{font-size:15px;color:var(--fraco)}
|
||
.rep{margin:0;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:16px}
|
||
.repTopo{display:flex;gap:16px;align-items:flex-start}
|
||
.miniF{flex:none;width:52px;height:96px;border-radius:6px;border:1px solid #D6D6D6;background:#F4F4F2;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||
.miniF img{width:100%;height:100%;object-fit:contain;display:block}
|
||
.miniF span{font-size:13.5px;font-weight:800;color:var(--texto2)}
|
||
.repInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
|
||
.rep .l1{margin:0}
|
||
.rep .l1 b{font-size:16px;font-weight:600;color:var(--preto)}
|
||
.rep .l1 button{width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:8px;font-size:19px}
|
||
.rep .l1 button:hover{background:#F1F1F1;color:var(--preto)}
|
||
.repMed{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
|
||
.repMed b{font-family:"Inter",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em}
|
||
.repMed span,.repPeso{font-size:15px;color:var(--fraco)}
|
||
.chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
|
||
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2}
|
||
.chip::before{font-weight:800}
|
||
.chip.ok{background:var(--verde-fundo);color:var(--verde)}.chip.ok::before{content:"✓"}
|
||
.chip.av{background:#FFF1DB;color:#8A4B00}.chip.av::before{content:"!"}
|
||
.chip.er{background:#FDE8E6;color:#B3261E}.chip.er::before{content:"×"}
|
||
.chip.fix{background:#E8F0FB;color:#1F4E8C}.chip.fix::before{content:"✓"}
|
||
.chip.nt{background:#F1F1F1;color:var(--texto2)}
|
||
.chipSo{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#F1F1F1;color:var(--texto2);font-size:15px;font-weight:600}
|
||
.avisoF{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:#FDE8E6;font-size:15px;line-height:1.5;color:var(--preto)}
|
||
.avisoF b{color:#B3261E}
|
||
.repTxt{margin:2px 0 0;font-size:15.5px;line-height:1.5;color:var(--texto2)}
|
||
.repTxt b{color:var(--preto)}
|
||
.confDet{font-size:15px}
|
||
.confDet summary{display:inline;cursor:pointer;list-style:none;color:var(--laranja-escuro);font-weight:500}
|
||
.confDet summary::-webkit-details-marker{display:none}
|
||
.confDet summary:hover{text-decoration:underline}
|
||
.confDet[open] summary{display:inline-block;margin-bottom:6px}
|
||
.confDet span{display:block;color:var(--texto2);line-height:1.6}
|
||
.rep .cps{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin:0;padding-top:16px;border-top:1px solid #EFEFEF}
|
||
.rep .campo{display:flex;align-items:center;gap:12px}
|
||
.rep .campo label{margin:0;font-size:16px;font-weight:600;color:var(--preto)}
|
||
.passo{display:inline-flex;border:1px solid #D6D6D6;border-radius:10px;overflow:hidden}
|
||
.passo button{width:44px;height:44px;border:0;background:#F9F9F9;font-size:19px;color:var(--preto);cursor:pointer}
|
||
.passo button:hover{background:#EFEFEF}
|
||
.rep .passo input{width:56px;height:44px;padding:0;border:0;border-radius:0;text-align:center;font-size:17.5px;font-weight:700;-moz-appearance:textfield;appearance:textfield}
|
||
.passo input::-webkit-inner-spin-button,.passo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
|
||
.rep .un{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid #D6D6D6;border-radius:10px}
|
||
.rep .un input{width:64px;padding:0;border:0;font-size:17.5px;font-weight:700;text-align:right}
|
||
.rep .un i{font-style:normal;font-size:16px;color:var(--fraco)}
|
||
.rep .conta{margin-left:auto;font-size:16px;color:var(--texto2)}
|
||
.rep .conta b{font-family:"Inter",sans-serif;font-size:17.5px;color:var(--preto)}
|
||
.calc{font-size:15px;margin-top:8px}
|
||
.dica{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border:0;border-radius:8px;background:var(--verde-fundo);font-size:15px;color:#14532D}
|
||
.dica.av{background:var(--aviso-fundo);color:#5A3A00}
|
||
.dica button{display:inline-flex;width:auto;margin:0 0 0 auto;flex:none;height:34px;align-items:center;padding:0 12px;border-radius:7px;border:1px solid var(--verde);background:#fff;color:var(--verde);box-shadow:none;font-size:15px}
|
||
.dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
|
||
.req{position:static;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
|
||
.reqcab{margin:0;font-size:15px;font-weight:400;color:var(--fraco)}
|
||
.req details,.req details:first-of-type{border:0}
|
||
.reqLinks{display:contents}
|
||
.reqLinks button{padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--laranja-escuro);cursor:pointer}
|
||
.reqLinks button:hover{text-decoration:underline}
|
||
.reqLinks button.on{font-weight:700;color:var(--preto);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--laranja)}
|
||
/* The links above open and close the answers; a closed one is not shown. */
|
||
.req details:not([open]){display:none}
|
||
.req summary{display:inline;padding:0;font-size:15px;font-weight:500;color:var(--laranja-escuro)}
|
||
.req summary::before{display:none}
|
||
.req details[open]{order:1;flex-basis:100%;padding:14px 16px 4px;border-radius:12px;background:var(--cinza)}
|
||
.req details[open] summary{display:block;margin-bottom:6px;font-size:16px;font-weight:700;color:var(--preto);text-decoration:none}
|
||
.req li{font-size:15px}
|
||
.req .obs2{font-size:14.5px}
|
||
|
||
/* The buy box */
|
||
.mont{position:sticky;top:var(--topo-passos,128px);padding:20px;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;gap:12px}
|
||
.mont>*{margin:0}
|
||
.montcab b{font-size:18px;font-weight:800}
|
||
.montpe{font-size:14.5px;text-align:center}
|
||
.compra{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid #EFEFEF}
|
||
.compra .aoVivo{margin:0}
|
||
.compra .aoVivo.pronto{display:none}
|
||
#compraVals{display:flex;flex-direction:column;gap:10px;font-size:16.5px}
|
||
#compraVals[hidden]{display:none}
|
||
.cat.file .zoomB{display:none}
|
||
.ampliar{margin-left:auto;height:32px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;font-size:15px;font-weight:600;color:var(--preto);cursor:pointer}
|
||
.ampliar:hover{border-color:var(--preto)}
|
||
.ampliar[hidden]{display:none}
|
||
.cat.file #vArea{max-height:340px}
|
||
.cEscada{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
|
||
.cEscada>span{font-size:15px;font-weight:600}
|
||
.cEscada ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
|
||
.cEscada li{padding:8px 2px;border-radius:8px;background:#F4F4F2;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px}
|
||
.cEscada li span{font-size:13.5px;color:var(--fraco);white-space:nowrap}
|
||
.cEscada li b{font-size:15px;font-weight:500;color:var(--texto2)}
|
||
.cEscada li.on{background:var(--verde-fundo);border-color:var(--verde)}
|
||
.cEscada li.on span,.cEscada li.on b{font-weight:700;color:var(--verde)}
|
||
.cEscada li.on:last-child{background:#F1F1F1;border-color:var(--preto)}
|
||
.cEscada li.on:last-child span,.cEscada li.on:last-child b{color:var(--preto)}
|
||
.cLin>span:first-child{color:var(--texto2)}
|
||
.cLin small{font-size:14.5px;color:var(--fraco)}
|
||
.cEco{margin:-6px 0 0;text-align:right;font-size:15px;font-weight:600;color:var(--verde)}
|
||
.cEco:empty{display:none}
|
||
#cPartes{display:block}
|
||
.ampliaDlg{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:16px;box-shadow:0 20px 60px rgba(3,6,11,.3)}
|
||
.ampliaDlg::backdrop{background:rgba(3,6,11,.55)}
|
||
.ampliaCab{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--linha);background:#fff}
|
||
.ampliaCab b{font-size:17.5px;font-weight:800}
|
||
.ampliaCab button{width:40px;height:40px;border:0;border-radius:8px;background:#F1F1F1;font-size:20px;cursor:pointer}
|
||
#ampliaArea .folhaPrevias{display:grid;gap:16px;padding:16px;background:#F8F9FA}
|
||
#ampliaArea .folhaPrevia{margin:0;background:#fff;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
|
||
#ampliaArea .folhaPilha{display:flex;flex-direction:column;align-items:center;gap:4px}
|
||
#ampliaArea .folhaPilha img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 180px)!important}
|
||
#ampliaArea figcaption{padding:8px 12px;font-size:15px;color:var(--texto2);border-top:1px solid var(--linha)}
|
||
.cLin{display:flex;align-items:baseline;gap:8px}
|
||
.cLin>span:last-child,.cLin>b{margin-left:auto;display:flex;gap:8px;align-items:baseline}
|
||
.cLin s{font-size:15px;color:#707070}
|
||
.cObs{margin:-4px 0 0;font-size:15px;color:var(--verde)}
|
||
.cObs:empty{display:none}
|
||
.cTot{display:flex;align-items:baseline;padding-top:12px;border-top:1px solid #EFEFEF}
|
||
.cTot span{font-family:"Inter",sans-serif;font-weight:700}
|
||
.cTot b{margin-left:auto;font-family:"Inter",sans-serif;font-size:30px;font-weight:900;letter-spacing:-.01em}
|
||
#qmsg{font-size:15px;line-height:1.45}
|
||
.compra .ciente{margin:0;padding:12px 14px}
|
||
.compra .ciente h4{font-size:15.5px}
|
||
.compra .ciente p,.compra .ciente .lista{font-size:15px}
|
||
.cAdd{height:54px;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:17.5px;cursor:pointer}
|
||
.cAdd:hover:not(:disabled){background:#FFB53D}
|
||
.cAdd:disabled{background:#EDEDED;color:#8A8D92;cursor:not-allowed}
|
||
.cPe{margin:0;font-size:15px;color:var(--fraco);text-align:center}
|
||
@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
|
||
@media(max-width:620px){.montcab b{font-size:16.5px}
|
||
.cabfoco h3{font-size:28px}
|
||
.tipoEnvio .cam div{grid-template-columns:1fr}
|
||
.tipoEnvio .cam div>span{display:none}
|
||
.rep{padding:16px}
|
||
.repTopo{gap:12px}
|
||
.miniF{width:40px;height:80px}
|
||
.repMed b{font-size:20px}
|
||
.rep .conta{margin-left:0}}
|
||
|
||
/* The quality, preview, cart and checkout panels sit directly in #envio,
|
||
outside .w; they share the page column so nothing runs edge to edge. */
|
||
#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:min(1152px,calc(100% - 48px));margin-left:auto;margin-right:auto}
|
||
@media(max-width:820px){#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:calc(100% - 32px)}}
|
||
|
||
/* Cart */
|
||
.itensCab{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
|
||
.itensCab h4{margin:0}
|
||
.esvaziar{margin-left:auto;border:0;background:none;padding:6px 0;font-size:15.5px;font-weight:600;color:var(--fraco);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
||
.esvaziar:hover{color:#B8391C}
|
||
.esvaziar[hidden]{display:none}
|
||
.item{align-items:center}
|
||
.item .marca{flex:none;display:flex;align-items:center;cursor:pointer}
|
||
.item .marca input{width:20px;height:20px;margin:0;accent-color:var(--laranja);cursor:pointer}
|
||
.miniItem{position:relative;flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--linha);background:repeating-conic-gradient(#F1F1F1 0 25%,#fff 0 50%) 0 0/12px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||
.miniItem img{max-width:100%;max-height:100%;object-fit:contain}
|
||
.miniItem i{font-style:normal;font-size:12px;font-weight:700;color:var(--fraco)}
|
||
.miniItem em{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:5px;background:rgba(3,6,11,.75);color:#fff;font-style:normal;font-size:11px;font-weight:700}
|
||
.item.fora .miniItem,.item.fora .nm2,.item.fora .vl2{opacity:.45}
|
||
.item .x{flex:none;height:36px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;color:var(--texto2);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer}
|
||
.item .x:hover{border-color:#B8391C;color:#B8391C}
|
||
.desfazer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-radius:12px;background:var(--preto);color:#fff;font-size:16px;box-shadow:0 10px 30px rgba(3,6,11,.25);max-width:calc(100% - 32px);box-sizing:border-box}
|
||
.desfazer[hidden]{display:none}
|
||
.desfazer button{flex:none;height:36px;padding:0 14px;border-radius:8px;border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;cursor:pointer}
|
||
@media(max-width:820px){.desfazer{bottom:100px}}
|
||
.carrAviso{grid-column:1/-1;font-size:15px;color:var(--fraco)}
|
||
.carrAviso:empty{display:none}
|
||
.carr{border-radius:16px}
|
||
.carr h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
|
||
.cxE{border-radius:var(--raio);border-color:var(--linha)}
|
||
.cxE h4,.resumo h4{font-family:"Inter",sans-serif;font-weight:800;font-size:18px}
|
||
.cp input,.cepL input{height:46px;border-radius:var(--raio2)}
|
||
.cp input:focus,.cepL input:focus{border-color:var(--laranja2);box-shadow:0 0 0 3px rgba(255,168,26,.18)}
|
||
.opE{border-radius:12px}
|
||
.opE.on{border:2px solid var(--laranja);background:var(--aviso-fundo)}
|
||
.resumo{position:sticky;top:var(--topo-passos,128px);border-radius:16px}
|
||
.tot b{font-family:"Inter",sans-serif;font-weight:900}
|
||
#bPagar{height:auto;min-height:54px;padding:8px 14px;line-height:1.25;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);border:0;font-family:"Inter",sans-serif;font-weight:800;font-size:17.5px}
|
||
#bPagar:hover:not(:disabled){background:#FFB53D}
|
||
#bPagar:disabled{background:#EDEDED;color:#8A8D92}
|
||
#bMais{height:46px;border-radius:var(--raio2);font-family:"Inter",sans-serif;font-weight:600}
|
||
.checkout{max-width:760px;margin:20px auto 0}
|
||
.checkout #checkoutStatus:not(:empty){padding:16px 18px;border-radius:var(--raio);background:var(--verde-fundo);border:1px solid #BFE6CE;color:#14532D;font-size:16.5px}
|
||
#checkoutActions{margin-top:12px}
|
||
/* Only our own fields: Mercado Pago's card form (its instalment radios) keeps its own styles. */
|
||
#checkoutActions .pixBox input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
|
||
/* The payment pages: paying on the left, the order summary on the right */
|
||
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
||
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
|
||
.acts a .ic{width:23px;height:23px}
|
||
.cartIc{position:relative;display:inline-flex}
|
||
.acts #cartLink{gap:11px}
|
||
.cartN{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--laranja);color:var(--preto);font-size:13px;font-weight:800;line-height:17px;text-align:center}
|
||
.cartN[hidden]{display:none}
|
||
.zona .ico .ic{width:23px;height:23px}
|
||
.art2 .giros .gr{display:inline-flex;align-items:center;justify-content:center}
|
||
.art2 .giros .gr .ic{width:22px;height:22px}
|
||
.rep .l1 button{display:inline-flex;align-items:center;justify-content:center}
|
||
.rep .l1 button .ic{width:20px;height:20px}
|
||
#ampliaFecha .ic{width:23px;height:23px}
|
||
@media (max-width:600px){.acts .actTx{display:none}.acts{gap:16px}}
|
||
.cAdd,#bPagar,#pOk,#qOk{display:flex;align-items:center;justify-content:center;gap:8px}
|
||
#pOk{display:inline-flex}
|
||
.cAdd .ic,#bPagar .ic{width:22px;height:22px}
|
||
.item .x{display:inline-flex;align-items:center;gap:6px}
|
||
.item .x .ic{width:18px;height:18px}
|
||
.opE b .ic{width:19px;height:19px;margin:-2px 6px 0 0;color:var(--laranja-escuro)}
|
||
.metodo .ic{width:23px;height:23px;color:var(--texto2)}
|
||
.codigo .pagBtn{display:inline-flex;align-items:center;gap:7px}
|
||
.codigo .pagBtn .ic{width:20px;height:20px}
|
||
.pixBox .prazo{display:flex;align-items:center;gap:8px}
|
||
.pixBox .prazo .ic{width:23px;height:23px}
|
||
.confirmado h4{display:flex;align-items:center;gap:8px}
|
||
.confirmado h4 .ic{width:24px;height:24px}
|
||
.envioArq .ic{width:19px;height:19px;margin:-2px 6px 0 0}
|
||
.qi .c .ic{width:15px;height:15px;stroke-width:3}
|
||
.passos a span .ic{width:17px;height:17px;stroke-width:3}
|
||
.obr{color:#B42318;font-weight:700}
|
||
.envioNota{display:block;margin-top:4px;font-size:14px;color:var(--fraco)}
|
||
.envioArq{font-size:15px;color:var(--texto2);margin-top:14px;line-height:1.5}
|
||
.envioArq.ok{color:var(--verde)}
|
||
.envioArq.erro{color:#B42318}
|
||
.envioDeNovo{margin-left:4px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
|
||
.envioBarra{height:6px;border-radius:999px;background:#EDEDED;overflow:hidden;margin-bottom:6px}
|
||
.envioBarra i{display:block;height:100%;background:var(--laranja);border-radius:999px;transition:width .4s}
|
||
.cartEnvio{font-size:15px;font-weight:700;color:var(--laranja-escuro);margin-left:6px}
|
||
.cartEnvio:empty{display:none}
|
||
.envioArq:empty{display:none}
|
||
.pagCab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
|
||
.pagCab h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
|
||
.pagVolta{font-size:16px;color:var(--texto2)}
|
||
#checkoutActions > h4,#checkoutActions .pixBox > h4{font-size:18px;font-weight:800;margin-bottom:12px}
|
||
.pagNota{font-size:16px;color:var(--texto2);margin:4px 0 16px;line-height:1.5}
|
||
.pagResumo{position:sticky;top:var(--topo-passos,128px);border:1px solid var(--linha);border-radius:16px;background:#fff;padding:20px 22px}
|
||
.pagResumo h4{font-size:18px;font-weight:800;margin-bottom:10px}
|
||
.pagResumo .l{display:flex;justify-content:space-between;gap:12px;font-size:16px;padding:5px 0}
|
||
.pagResumo .l span{color:var(--texto2)}
|
||
.pagResumo .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #EFEFEF;margin-top:10px;padding-top:12px}
|
||
.pagResumo .tot b{font-family:"Inter",sans-serif;font-weight:900;font-size:24px}
|
||
.metodos{display:grid;grid-template-columns:1fr;gap:10px;max-width:420px;margin-bottom:20px}
|
||
.metodo{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border:2px solid var(--linha);border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:16.5px;text-align:left;cursor:pointer}
|
||
.metodo::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:50%;border:2px solid #B5B8BD;box-sizing:border-box}
|
||
.metodo[aria-checked="true"]{border-color:var(--laranja);background:var(--aviso-fundo)}
|
||
.metodo[aria-checked="true"]::before{border:6px solid var(--laranja)}
|
||
.pagBtn{height:48px;padding:0 24px;margin:0 10px 0 0;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16.5px;cursor:pointer}
|
||
.pagBtn:hover:not(:disabled){background:#FFB53D}
|
||
.pagBtn:disabled{background:#EDEDED;color:#8A8D92;cursor:default}
|
||
.pagBtn.sec{background:#fff;border:1px solid #D6D6D6}
|
||
.desafio{display:block;width:100%;max-width:520px;height:560px;border:1px solid var(--linha);border-radius:12px;background:#fff}
|
||
.pixBox{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
|
||
.pixBox img{border:1px solid var(--linha);border-radius:12px;padding:8px;background:#fff}
|
||
.pixBox .codigo{display:flex;gap:10px;width:100%}
|
||
.pixBox .codigo input{flex:1;min-width:0;font-size:15px}
|
||
.pixBox .aguarda{font-size:16px;color:var(--texto2)}
|
||
.pixBox .prazo{font-family:"Inter",sans-serif;font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
|
||
.confirmado{border:1px solid #BFE6CE;background:var(--verde-fundo);border-radius:16px;padding:24px}
|
||
.confirmado h4{font-size:22px;color:#14532D;margin-bottom:8px}
|
||
.confirmado p{font-size:16.5px;color:#14532D;margin-bottom:18px;line-height:1.5}
|
||
@media(max-width:820px){
|
||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{grid-template-columns:1fr;gap:20px}
|
||
.pagResumo{position:static;order:-1}
|
||
.metodos{grid-template-columns:1fr}
|
||
}
|
||
|
||
/* Price and benefits */
|
||
.info2{background:var(--cinza);padding:64px 0}
|
||
.info2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
|
||
.info2-preco{display:flex;flex-direction:column;gap:16px}
|
||
.info2 h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em}
|
||
.info2-preco>p{font-size:16.5px;color:var(--texto2)}
|
||
.info2 table{border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:16.5px}
|
||
.info2 th{text-align:left;background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-size:15px;padding:12px 18px}
|
||
.info2 td{padding:11px 18px;border-top:1px solid #EFEFEF}
|
||
.info2 td.melhor{font-weight:700;color:var(--verde)}
|
||
.info2 .nota2{font-size:15px;color:#707070}
|
||
.info2-vant{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
|
||
.info2-vant>div{padding:22px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
|
||
.info2-vant b{font-family:"Inter",sans-serif;font-size:17.5px}
|
||
.info2-vant b.n{font-size:32px;font-weight:900;color:var(--laranja2)}
|
||
.info2-vant span{font-size:16px;color:var(--fraco)}
|
||
|
||
/* Phone total bar */
|
||
.barraM{display:none}
|
||
@media (max-width:820px){
|
||
.barraM:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linha);box-shadow:0 -6px 20px rgba(3,6,11,.08)}
|
||
.barraM div{display:flex;flex-direction:column}
|
||
.barraM span{font-size:14.5px;color:#707070}
|
||
.barraM b{font-family:"Inter",sans-serif;font-size:21px;font-weight:900}
|
||
.barraM a{margin-left:auto;height:50px;padding:0 22px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:17.5px;display:flex;align-items:center;text-decoration:none}
|
||
.w{padding:0 16px}
|
||
.hero2{padding:40px 0}
|
||
.hero2-grid,.info2-grid{grid-template-columns:1fr;gap:28px}
|
||
.etapas2 .w{grid-template-columns:repeat(2,minmax(0,1fr))}
|
||
.escolha{grid-template-columns:1fr}
|
||
.cards-cab p{margin-left:0}
|
||
.ec-pe{flex-wrap:wrap}
|
||
.ec-go{margin-left:0;width:100%;justify-content:center}
|
||
.focoGrid{grid-template-columns:1fr}
|
||
.mont,.resumo{position:static}
|
||
.passos{gap:8px;font-size:15px;margin:0 0 16px;padding:10px 16px}
|
||
.passos i{width:14px}
|
||
.passos a{flex-direction:column;gap:4px;text-align:center}
|
||
.info2-vant{grid-template-columns:1fr}
|
||
footer{padding-bottom:84px}
|
||
}
|
||
@media (max-width:480px){
|
||
.etapas2 .w{grid-template-columns:1fr}
|
||
}
|
||
|
||
/* Skeleton placeholders where the page really waits */
|
||
.skel{position:relative;border-radius:8px;background:linear-gradient(90deg,#EEEFF1 25%,#F7F7F8 37%,#EEEFF1 63%);background-size:400% 100%;animation:skel 1.4s ease infinite}
|
||
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
|
||
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
|
||
.folhaSkel{display:flex;align-items:center;justify-content:center;max-height:520px;min-height:180px;width:100%}
|
||
.folhaSkel span{font-size:15px;color:var(--fraco);background:#fffc;padding:4px 10px;border-radius:999px}
|
||
#vArea .folhaPilha{display:flex;flex-direction:column;gap:4px;max-height:520px;overflow:auto;background:#fff}
|
||
#vArea .folhaPilha img{width:100%;height:auto;display:block}
|
||
.folhaMais{font-size:14.5px;color:var(--texto2);text-align:center;padding:8px}
|
||
.skelLinha{height:14px;margin:8px 0}
|
||
.skelLinha.curta{width:40%}
|
||
.skelBloco{height:160px;margin-top:8px}
|
||
|
||
/* Artes avulsas: the file card of a finished sheet, plus width, rotation and sizes */
|
||
.rep.nova{box-shadow:0 0 0 2px rgba(255,168,26,.45)}
|
||
.novaT{margin-left:8px;padding:2px 7px;border-radius:999px;background:#FFF1DB;color:#8A4B00;font-size:13.5px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
|
||
.repMed .pede{font-size:17.5px;color:var(--texto2)}
|
||
.art2 .giros{display:inline-flex;gap:6px}
|
||
.art2 .giros .gr{width:44px;height:44px;border:1px solid #D6D6D6;border-radius:10px;background:#fff;font-size:17.5px;cursor:pointer}
|
||
.art2 .giros .gr.on{border-color:var(--laranja);background:var(--aviso-fundo)}
|
||
.art2 .atalhos{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin:0}
|
||
.art2 .atalhos .tm{height:34px;padding:0 12px;border:1px solid #D6D6D6;border-radius:8px;background:#fff;font-size:15px;font-weight:600;cursor:pointer}
|
||
.art2 .atalhos .tm.on{border-color:var(--verde);background:var(--verde-fundo);color:var(--verde)}
|
||
.art2 .dica{margin-top:4px}
|
||
.rep .l1 .novaT{margin-right:auto}
|
||
|
||
/* On a computer the Site is drawn at 80%: the sizes above were chosen looking
|
||
at it that way, and at 100% everything felt too big. Phones and tablets
|
||
keep their own sizes. The zoom scales viewport units too, so the page's
|
||
full height is 125vh there (site-shell.css keeps the footer at the bottom). */
|
||
@media (min-width:1100px){html{zoom:.8}body{min-height:125vh}}
|