feat: redesign the Montagem page, with thumbnails, check chips and a DPI price scale
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Build and deploy / Integration suite on a real stack (push) Successful in 2m31s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m0s
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Build and deploy / Integration suite on a real stack (push) Successful in 2m31s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m0s
The product page is rebuilt around mockup 1. The two ways to send are
cards under the title; the PNG/CDR route choice is gone (it never changed
the price, and the picker now takes every allowed format). Each file card
has a thumbnail, its size, check chips with a plain sentence for any
problem, a "Ver detalhes da conferência" link and a copies stepper; a CDR
file says "Conferência manual · preço cheio" and asks for the length. The
buy box shows the price scale in DPI with the customer's step, the metre
and 10 cm length, the total and what the resolution saved, and "Sai em N
partes" only above 20 m. Folha já montada gets "Ampliar" instead of zoom.
Pricing, grade and checks are unchanged.
Fixes on top: the card thumbnail is a small image made once, not the full
preview re-parsed on every repaint; sizes from 1 GB up read in GB; a failed
upload is shown with "Tentar de novo" instead of retrying silently on every
cart change. The browser suites wait for the product and the reloaded page
instead of racing them, and the artwork suite delays imagemDaArte, which
the packing now uses, fixing the CI failure of f4aacb5.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
154
web/site-v2.css
154
web/site-v2.css
@@ -104,35 +104,48 @@ section+section{border-top:0}
|
||||
.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 20px!important;background:transparent;border:0;display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t e" "s e" "p e";column-gap:24px;align-items:end}
|
||||
.cabfoco>div:first-child{grid-area:t;display:flex;flex-direction:column-reverse;gap:4px}
|
||||
.cabfoco .lg{font-size:12px;color:#707070;letter-spacing:.05em}
|
||||
.cabfoco h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
|
||||
.cabfoco p{grid-area:s;margin-top:6px;font-size:15px;color:var(--texto2)}
|
||||
.cabfoco .pr2{grid-area:p;margin-top:4px;font-size:14px;font-weight:600;color:var(--fraco);white-space:normal}
|
||||
.tipoEnvio{grid-area:e;margin:0}
|
||||
.tipoEnvio:not([hidden]){display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#EFEFEF}
|
||||
.tipoEnvio .cam,.tipoEnvio .cam.on{border:0;box-shadow:none;background:transparent;padding:0 14px;min-height:40px;border-radius:8px;align-items:center}
|
||||
.tipoEnvio .cam.on{background:#fff;box-shadow:0 1px 2px rgba(3,6,11,.14)}
|
||||
.tipoEnvio .cam .mk2,.tipoEnvio .cam span,.tipoEnvio .cam em{display:none}
|
||||
.tipoEnvio .cam b{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap}
|
||||
.tipoEnvio .cam.on b{font-weight:800}
|
||||
.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:12.5px;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:15px;font-weight:700;color:var(--texto2)}
|
||||
.tipoEnvio .cam.on b{color:var(--preto);font-weight:800}
|
||||
.tipoEnvio .cam em{margin:0;font-size:13px;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:13px;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:.5}
|
||||
.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}
|
||||
#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:15px;margin:0}
|
||||
.zona span{max-width:none;margin:0;font-size:13px;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:13px}
|
||||
.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:14px;color:var(--fraco)}
|
||||
.zona.compacta .zOutra b{display:inline;font-size:14px;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)}
|
||||
@@ -141,14 +154,69 @@ section+section{border-top:0}
|
||||
.art label{font-size:12px}
|
||||
.art input{height:42px;font-size:15px;font-weight:600;border-radius:8px}
|
||||
.art .cps{grid-template-columns:repeat(2,minmax(0,160px))}
|
||||
.rep{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
|
||||
.listaCab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
|
||||
.listaCab h4{margin:0;font-size:18px;font-weight:700}
|
||||
.listaCab span{font-size:13px;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:11px;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:14px;font-weight:600;color:var(--preto)}
|
||||
.rep .l1 button{width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:8px;font-size:18px}
|
||||
.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:13px;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:13px;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:13px;font-weight:600}
|
||||
.avisoF{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:#FDE8E6;font-size:13px;line-height:1.5;color:var(--preto)}
|
||||
.avisoF b{color:#B3261E}
|
||||
.repTxt{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--texto2)}
|
||||
.repTxt b{color:var(--preto)}
|
||||
.confDet{font-size:13px}
|
||||
.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:14px;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:18px;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:16px;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:16px;font-weight:700;text-align:right}
|
||||
.rep .un i{font-style:normal;font-size:14px;color:var(--fraco)}
|
||||
.rep .conta{margin-left:auto;font-size:14px;color:var(--texto2)}
|
||||
.rep .conta b{font-family:"Inter",sans-serif;font-size:16px;color:var(--preto)}
|
||||
.calc{font-size:13px;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:13px;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:13px}
|
||||
.dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
|
||||
.req{position:static;padding:16px 20px 6px;border-radius:12px;box-shadow:none}
|
||||
.reqcab{font-size:15px;margin-bottom:6px}
|
||||
.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:13px;font-weight:400;color:var(--fraco)}
|
||||
.req details,.req details:first-of-type{border:0}
|
||||
.req summary{display:inline;padding:0;font-size:13px;font-weight:500;color:var(--laranja-escuro)}
|
||||
.req summary::before{display:none}
|
||||
.req summary:hover{text-decoration:underline}
|
||||
.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:14px;font-weight:700;color:var(--preto);text-decoration:none}
|
||||
.req li{font-size:13px}
|
||||
.req .obs2{font-size:12px}
|
||||
|
||||
/* 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}
|
||||
@@ -160,12 +228,36 @@ section+section{border-top:0}
|
||||
.compra .aoVivo.pronto{display:none}
|
||||
#compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px}
|
||||
#compraVals[hidden]{display:none}
|
||||
.cNota{display:flex;align-items:center;gap:12px}
|
||||
.cNota span,.cLin>span:first-child{color:var(--texto2)}
|
||||
.cNota>i{flex:1;height:6px;border-radius:999px;background:#EFEFEF;overflow:hidden}
|
||||
.cNota>i i{display:block;height:100%;border-radius:999px;background:#C9CCD1}
|
||||
.cNota>i i.ok{background:var(--verde)}.cNota>i i.av{background:var(--laranja)}.cNota>i i.er{background:var(--vermelho)}
|
||||
.cNota b{font-family:"Inter",sans-serif;font-weight:800}
|
||||
.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:12.5px;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:13px;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:11px;color:var(--fraco);white-space:nowrap}
|
||||
.cEscada li b{font-size:13px;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:12px;color:var(--fraco)}
|
||||
.cEco{margin:-6px 0 0;text-align:right;font-size:13px;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:16px;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:13px;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:13px;color:#707070}
|
||||
@@ -184,8 +276,14 @@ section+section{border-top:0}
|
||||
.cPe{margin:0;font-size:13px;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:15px}
|
||||
.cabfoco,.cat.file .cabfoco{grid-template-columns:1fr;grid-template-areas:"t" "s" "p" "e"}
|
||||
.tipoEnvio:not([hidden]){display:grid;grid-template-columns:1fr 1fr;margin-top:14px}}
|
||||
.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. */
|
||||
@@ -231,6 +329,8 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;ma
|
||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
||||
.envioArq{font-size:13px;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:13px;font-weight:700;color:var(--laranja-escuro);margin-left:6px}
|
||||
|
||||
Reference in New Issue
Block a user