177882e77b
All checks were successful
Build and deploy / Validate source (push) Successful in 5s
Build and deploy / Integration suite on a real stack (push) Successful in 2m23s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m48s
New landing (hero with a sheet preview, four steps, product cards priced from the checkout table, price table and benefits), a progress bar that follows the order through Montagem, Dados e entrega and Pagamento, the live sheet beside the artworks, and a running total bar on phones. The cart's saved-in-browser note no longer takes a grid column, which had pushed the order into a narrow strip and the summary below it. The previous look is kept in tag ui-v1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
178 lines
12 KiB
CSS
178 lines
12 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:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-escuro)}
|
|
|
|
/* 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:12px;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:18px;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:14px;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:17px;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:15px}
|
|
.hf-cab span{margin-left:auto;font-size:13px;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:12px;color:#9EA3AA}
|
|
.hf-num b{font-family:"Inter",sans-serif;font-size:18px}
|
|
.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:15.5px}
|
|
.etapas2 p{margin-top:3px;font-size:14px;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:15px;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:12px;letter-spacing:.05em;color:#707070}
|
|
.marc2{margin-left:auto;font-family:"Inter",sans-serif;font-weight:800;font-size:11px;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:15px;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:13px;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:15px;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:14px}
|
|
.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:13px}
|
|
.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}
|
|
|
|
/* Montagem: artworks on the left, the live sheet fixed on the right. */
|
|
.voltar{height:40px;padding:0 14px;border-radius:8px;border:1px solid #D6D6D6;font-size:14px;margin-bottom:16px}
|
|
.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
|
|
.foco2{grid-template-columns:minmax(0,1fr) 440px;gap:28px}
|
|
.mont{top:var(--topo-passos,128px)}
|
|
.req{position:static;padding:22px 24px}
|
|
.req .reqcab br{display:none}
|
|
@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
|
|
.cat,.cat.file{border:1px solid var(--linha);border-width:1px;border-radius:16px}
|
|
.cabfoco,.cat.file .cabfoco{background:#fff}
|
|
.cabfoco h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
|
|
.cabfoco .pr2{font-size:15px;font-weight:700;color:var(--texto2)}
|
|
.zona{border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
|
|
.zona .ico{background:var(--laranja);color:var(--preto)}
|
|
.zona:hover,.zona.drag{border-color:var(--laranja2)}
|
|
.cam{border-radius:var(--raio2)}
|
|
.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
|
|
.mont{border-radius:var(--raio)}
|
|
.req{border-radius:var(--raio)}
|
|
.qual,.prev{border-radius:16px;border-color:var(--linha)}
|
|
.qb.chama,.pb.p{background:var(--laranja);color:var(--preto);border-color:var(--laranja);font-family:"Inter",sans-serif;font-weight:800;border-radius:var(--raio2)}
|
|
|
|
/* 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 */
|
|
.carrAviso{grid-column:1/-1;font-size:13px;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:17px}
|
|
.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:54px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);border:0;font-family:"Inter",sans-serif;font-weight:800;font-size:16px}
|
|
#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:15px}
|
|
#checkoutActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
|
|
#checkoutActions button{height:48px!important;padding:0 20px!important;margin:0!important;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px}
|
|
#checkoutActions input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
|
|
|
|
/* 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:15px;color:var(--texto2)}
|
|
.info2 table{border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:15px}
|
|
.info2 th{text-align:left;background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-size:13px;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:13px;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:16px}
|
|
.info2-vant b.n{font-size:32px;font-weight:900;color:var(--laranja2)}
|
|
.info2-vant span{font-size:14px;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:12px;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:16px;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:12.5px;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}
|
|
}
|