feat: redesign the Site order flow and fix the cart layout
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
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>
This commit is contained in:
Cauê Faleiros
@@ -3,7 +3,7 @@
|
||||
let database,scope,timer,restoring=true;
|
||||
let signedOut=false;
|
||||
window.addEventListener('dtf-private-data-cleared',()=>{signedOut=true;clearTimeout(timer);pedido=[];itemAtual=null;folhas=[];artes=[];});
|
||||
const notice=document.createElement('p');notice.style.cssText='font:13px system-ui;color:#56616d;padding:8px 20px';
|
||||
const notice=document.createElement('p');notice.className='carrAviso';
|
||||
document.getElementById('carr').prepend(notice);
|
||||
function transaction(mode,fn){return new Promise((resolve,reject)=>{const tx=database.transaction('cart',mode);const request=fn(tx.objectStore('cart'));let result;request.onsuccess=()=>result=request.result;tx.oncomplete=()=>resolve(result);tx.onerror=()=>reject(tx.error);tx.onabort=()=>reject(tx.error);});}
|
||||
async function save(){
|
||||
|
||||
334
web/index.html
334
web/index.html
@@ -748,6 +748,7 @@ footer a:hover{color:var(--laranja2)}
|
||||
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#5A6570}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/site-v2.css?v=3">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -820,171 +821,101 @@ footer a:hover{color:var(--laranja2)}
|
||||
</div>
|
||||
</div></nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="fundo" aria-hidden="true">
|
||||
<svg viewBox="0 0 1400 300" preserveAspectRatio="xMidYMid slice">
|
||||
<g fill="#fff">
|
||||
<rect x="20" y="16" width="118" height="140" rx="5"/>
|
||||
<rect x="150" y="16" width="118" height="140" rx="5"/>
|
||||
<rect x="280" y="16" width="76" height="66" rx="5"/>
|
||||
<rect x="368" y="16" width="76" height="66" rx="5"/>
|
||||
<rect x="280" y="94" width="164" height="62" rx="5"/>
|
||||
<rect x="456" y="16" width="96" height="96" rx="5"/>
|
||||
<rect x="564" y="16" width="96" height="96" rx="5"/>
|
||||
<rect x="456" y="124" width="204" height="32" rx="5"/>
|
||||
<rect x="672" y="16" width="118" height="140" rx="5"/>
|
||||
<rect x="802" y="16" width="112" height="66" rx="5"/>
|
||||
<rect x="802" y="94" width="112" height="62" rx="5"/>
|
||||
<rect x="926" y="16" width="150" height="140" rx="5"/>
|
||||
<rect x="1088" y="16" width="86" height="86" rx="5"/>
|
||||
<rect x="1186" y="16" width="86" height="86" rx="5"/>
|
||||
<rect x="1088" y="114" width="184" height="42" rx="5"/>
|
||||
<rect x="1284" y="16" width="96" height="140" rx="5"/>
|
||||
<rect x="20" y="168" width="76" height="76" rx="5"/>
|
||||
<rect x="108" y="168" width="76" height="76" rx="5"/>
|
||||
<rect x="196" y="168" width="76" height="76" rx="5"/>
|
||||
<rect x="284" y="168" width="160" height="76" rx="5"/>
|
||||
<rect x="456" y="168" width="104" height="118" rx="5"/>
|
||||
<rect x="572" y="168" width="104" height="118" rx="5"/>
|
||||
<rect x="688" y="168" width="226" height="54" rx="5"/>
|
||||
<rect x="688" y="234" width="108" height="52" rx="5"/>
|
||||
<rect x="808" y="234" width="106" height="52" rx="5"/>
|
||||
<rect x="926" y="168" width="150" height="118" rx="5"/>
|
||||
<rect x="1088" y="168" width="184" height="56" rx="5"/>
|
||||
<rect x="1088" y="236" width="86" height="50" rx="5"/>
|
||||
<rect x="1186" y="236" width="86" height="50" rx="5"/>
|
||||
<rect x="1284" y="168" width="96" height="118" rx="5"/>
|
||||
<rect x="20" y="256" width="424" height="30" rx="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w">
|
||||
<div class="hgrid">
|
||||
<div>
|
||||
<div class="selos1">
|
||||
<span class="sel top">Metro a partir de R$ 14,90</span>
|
||||
<span class="sel novo">Revisão inclusa</span>
|
||||
<span class="sel pos">Franca · SP</span>
|
||||
</div>
|
||||
<h1>A gente encaixa sua folha<br><em>e você paga menos metro</em></h1>
|
||||
<p class="sub2">Mande a arte, veja a nota em segundos e a folha montada antes de fechar.
|
||||
<b>Revisão e remanejamento por nossa conta.</b></p>
|
||||
<div class="hcta">
|
||||
<a href="#envio" class="btn1">Enviar minha arte</a>
|
||||
<span class="mini">sem cadastro · resposta em segundos</span>
|
||||
</div>
|
||||
<header class="hero2">
|
||||
<div class="w hero2-grid">
|
||||
<div class="hero2-text">
|
||||
<div class="chips">
|
||||
<span class="chip2 destaque">Metro a partir de R$ 14,90</span>
|
||||
<span class="chip2">Franca · SP · envio em até 24 h</span>
|
||||
</div>
|
||||
|
||||
<div class="pfaixa">
|
||||
<a class="pcard dest" href="#envio">
|
||||
<span class="marc">mais vendido</span>
|
||||
<span class="apartir">com arte boa</span>
|
||||
<span class="vl">R$ 14,90<small> /m</small></span>
|
||||
<span class="nm">Arquivo por metro</span>
|
||||
<span class="dsc">têxtil · 57 cm</span>
|
||||
</a>
|
||||
<a class="pcard" href="#envio">
|
||||
<span class="apartir">com arte boa</span>
|
||||
<span class="vl">R$ 24,90<small> /m</small></span>
|
||||
<span class="nm">Artes avulsas</span>
|
||||
<span class="dsc">têxtil · montamos a folha</span>
|
||||
</a>
|
||||
<a class="pcard" href="#envio">
|
||||
<span class="apartir">com arte boa</span>
|
||||
<span class="vl">R$ 69,90<small> /m</small></span>
|
||||
<span class="nm">Arquivo UV</span>
|
||||
<span class="dsc">rígido · 28,5 cm</span>
|
||||
</a>
|
||||
<a class="pcard" href="#envio">
|
||||
<span class="apartir">com arte boa</span>
|
||||
<span class="vl">R$ 83,90<small> /m</small></span>
|
||||
<span class="nm">Artes avulsas UV</span>
|
||||
<span class="dsc">rígido · montamos a folha</span>
|
||||
</a>
|
||||
<h1>A gente encaixa sua folha e você paga <em>menos metro</em></h1>
|
||||
<p>Mande a arte, veja a nota e a folha montada antes de pagar. Revisão de 5 pontos e reencaixe por nossa conta.</p>
|
||||
<div class="hero2-cta">
|
||||
<a href="#envio" class="btn-laranja">Enviar minha arte <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
<span>Sem cadastro · preço em segundos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="barrah">
|
||||
<span><i>◆</i> Revisão de <b>5 pontos</b> sem custo</span>
|
||||
<span><i>◆</i> Cobrança por <b>proporção</b>, a cada 10 cm</span>
|
||||
<span><i>◆</i> Filme de <b>57 cm</b>, o dobro do padrão</span>
|
||||
<span><i>◆</i> Prévia da folha <b>antes de pagar</b></span>
|
||||
<div class="hero2-folha" aria-hidden="true">
|
||||
<div class="hf-cab"><b>Sua folha montada</b><span>filme 57 cm · prévia</span></div>
|
||||
<div class="hf-area">
|
||||
<i style="left:3%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
|
||||
<i style="left:39%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
|
||||
<i style="left:75%;top:5%;width:22%;height:55%;background:#2BB6D9"></i>
|
||||
<i style="left:3%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
|
||||
<i style="left:27%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
|
||||
<i style="left:51%;top:49%;width:22%;height:30%;background:#E9C23A"></i>
|
||||
<i style="left:75%;top:63%;width:22%;height:26%;background:#E9C23A"></i>
|
||||
</div>
|
||||
<div class="hf-num">
|
||||
<div><span>Metragem</span><b>0,60 m</b></div>
|
||||
<div><span>Nota da arte</span><b class="verde">92</b></div>
|
||||
<div><span>Preço do metro</span><b class="laranja">R$ 24,90</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- PROVA -->
|
||||
<section class="prova"><div class="w">
|
||||
<div class="p1"><b>Quanto melhor sua arte,<br><em>menor o preço do metro</em></b>
|
||||
<span>Têxtil de R$ 19,90 a R$ 14,90 · UV de R$ 99,90 a R$ 69,90.
|
||||
A nota aparece na tela antes de você pagar.</span></div>
|
||||
<div class="p1"><b>Filme de 57 cm,<br><em>o dobro do padrão</em></b>
|
||||
<span>Cabe o dobro de arte por metro. E reencaixamos sua folha sem cobrar.</span></div>
|
||||
<div class="p1"><b>Você paga só<br><em>o que usa</em></b>
|
||||
<span>Cobrança a cada 10 cm. Folha de 2,75 m custa 2,80 — não 3.</span></div>
|
||||
<div class="p1"><b>Erro pego<br><em>antes de imprimir</em></b>
|
||||
<span>5 pontos conferidos e a nota na tela. Sem custo.</span></div>
|
||||
<div class="p1"><b>Envio em<br><em>até 24 horas</em></b>
|
||||
<span>E avisamos por WhatsApp a cada etapa do pedido.</span></div>
|
||||
<section class="etapas2"><div class="w">
|
||||
<div><span>1</span><div><b>Envie a arte</b><p>PNG, JPG ou PDF. Sem cadastro.</p></div></div>
|
||||
<div><span>2</span><div><b>Veja nota e montagem</b><p>A folha e o preço aparecem na hora.</p></div></div>
|
||||
<div><span>3</span><div><b>Confira e pague</b><p>Conferimos a metragem e liberamos o pagamento.</p></div></div>
|
||||
<div><span>4</span><div><b>Acompanhe</b><p>Aviso no WhatsApp a cada etapa.</p></div></div>
|
||||
</div></section>
|
||||
|
||||
<!-- ENVIO -->
|
||||
<section id="envio"><div class="w">
|
||||
<section id="envio">
|
||||
<nav class="passos" id="passos" aria-label="Etapas do pedido" hidden>
|
||||
<a href="#foco" data-passo="1"><span>1</span>Montagem</a>
|
||||
<i aria-hidden="true"></i>
|
||||
<a href="#carr" data-passo="2"><span>2</span>Dados e entrega</a>
|
||||
<i aria-hidden="true"></i>
|
||||
<a href="#checkoutStatus" data-passo="3"><span>3</span>Pagamento</a>
|
||||
</nav>
|
||||
<div class="w">
|
||||
|
||||
|
||||
<!-- 3 cards -->
|
||||
<div id="cards">
|
||||
<div class="et">Comece por aqui</div>
|
||||
<h2>Qual é o seu <em>caso</em>?</h2>
|
||||
<div class="cards-cab">
|
||||
<div><div class="et">Escolha o produto</div>
|
||||
<h2>Qual é o seu caso?</h2></div>
|
||||
<p>O preço do metro depende da nota da arte: quanto melhor o arquivo, menor o preço.</p>
|
||||
</div>
|
||||
<div class="escolha">
|
||||
<button class="ec f" data-modo="file">
|
||||
<span class="marc">Mais vendido</span>
|
||||
<div class="top"><h3>Arquivo por metro</h3>
|
||||
<span class="p"><i>tabela</i>R$ 19,90<small>/m</small></span></div>
|
||||
<div class="chama2">Quer pagar <b>R$ 14,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
|
||||
<div class="in">
|
||||
<span class="lg">DTF têxtil · 57 cm</span>
|
||||
<p>Você monta a folha e manda pronta. Revisamos, corrigimos e reencaixamos.</p>
|
||||
<ul><li>Remanejamos e sua folha encolhe</li><li>Arquivo bom paga o mínimo</li>
|
||||
<li>Você continua no controle do layout</li></ul>
|
||||
<span class="go">Enviar minha folha ›</span>
|
||||
<div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span><span class="marc2">Mais vendido</span></div>
|
||||
<h3>Arquivo por metro</h3>
|
||||
<p>Você monta a folha e manda pronta. Revisamos, corrigimos e reencaixamos se sobrar espaço.</p>
|
||||
<div class="ec-pe">
|
||||
<div class="ec-preco"><span>de</span><b data-de="file">—</b><span>a <em data-ate="file">—</em> /m conforme a nota da arte</span></div>
|
||||
<span class="ec-go">Enviar minha folha</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="ec a" data-modo="avulsa">
|
||||
<div class="top"><h3>Artes avulsas</h3><span class="p"><i>tabela</i>R$ 29,90<small>/m</small></span></div>
|
||||
<div class="chama2">Quer pagar <b>R$ 24,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
|
||||
<div class="in">
|
||||
<span class="lg">DTF têxtil · 57 cm</span>
|
||||
<p>Cada arte num arquivo. Montamos a folha com o melhor encaixe.</p>
|
||||
<ul><li>Sugerimos a largura que rende mais</li><li>Sobreposição não acontece</li>
|
||||
<li>Montagem inclusa · R$ 10,00 no metro</li></ul>
|
||||
<span class="go">Enviar minhas artes ›</span>
|
||||
<div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span></div>
|
||||
<h3>Artes avulsas</h3>
|
||||
<p>Cada arte num arquivo. A gente monta a folha com o melhor encaixe. Montagem inclusa no preço.</p>
|
||||
<div class="ec-pe">
|
||||
<div class="ec-preco"><span>de</span><b data-de="avulsa">—</b><span>a <em data-ate="avulsa">—</em> /m conforme a nota da arte</span></div>
|
||||
<span class="ec-go">Enviar minhas artes</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="ec u" data-modo="uvfile">
|
||||
<div class="top"><h3>Arquivo por metro · UV</h3><span class="p"><i>tabela</i>R$ 85,90<small>/m</small></span></div>
|
||||
<div class="chama2">Quer pagar <b>R$ 69,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
|
||||
<div class="in">
|
||||
<span class="lg">Adesivo UV · 28,5 cm</span>
|
||||
<p>Sua folha de UV montada. Revisamos, corrigimos e reencaixamos.</p>
|
||||
<ul><li>Arquivo bom paga o mínimo</li><li>Remanejamos e sua folha encolhe</li>
|
||||
<li>Rígido: caneca, garrafa, case</li></ul>
|
||||
<span class="go">Enviar minha folha de UV ›</span>
|
||||
<div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
|
||||
<h3>Arquivo por metro · UV</h3>
|
||||
<p>Sua folha de UV montada. Para rígidos: caneca, garrafa, case. Não precisa de prensa.</p>
|
||||
<div class="ec-pe">
|
||||
<div class="ec-preco"><span>de</span><b data-de="uvfile">—</b><span>a <em data-ate="uvfile">—</em> /m conforme a nota da arte</span></div>
|
||||
<span class="ec-go">Enviar folha de UV</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="ec u" data-modo="uv">
|
||||
<div class="top"><h3>Artes avulsas · UV</h3><span class="p"><i>tabela</i>R$ 99,90<small>/m</small></span></div>
|
||||
<div class="chama2">Quer pagar <b>R$ 83,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
|
||||
<div class="in">
|
||||
<span class="lg">Adesivo UV · 28,5 cm</span>
|
||||
<p>Cada arte num arquivo. Montamos a folha de UV com o melhor encaixe.</p>
|
||||
<ul><li>Sugerimos a largura que rende mais</li><li>Montagem inclusa</li>
|
||||
<li>Não precisa de prensa</li></ul>
|
||||
<span class="go">Enviar minhas artes de UV ›</span>
|
||||
<div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
|
||||
<h3>Artes avulsas · UV</h3>
|
||||
<p>Cada arte num arquivo. Montamos a folha de UV com o melhor encaixe. Montagem inclusa no preço.</p>
|
||||
<div class="ec-pe">
|
||||
<div class="ec-preco"><span>de</span><b data-de="uv">—</b><span>a <em data-ate="uv">—</em> /m conforme a nota da arte</span></div>
|
||||
<span class="ec-go">Enviar artes de UV</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -1276,99 +1207,37 @@ footer a:hover{color:var(--laranja2)}
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<!-- INFORMAÇÃO EM CARROSSEL -->
|
||||
<section id="info"><div class="w">
|
||||
<div class="et">Como funciona</div>
|
||||
<h2>Tudo o que você precisa saber, <em>em cinco cartões</em></h2>
|
||||
|
||||
<div class="carro">
|
||||
<div class="trilho" id="trilho">
|
||||
|
||||
<div class="slide">
|
||||
<div class="stop">
|
||||
<div class="sinfo"><span class="et2">Preço</span><h3>Arte melhor,<br>metro mais barato</h3></div>
|
||||
<div class="selo"><i></i><b>−25<em>%</em></b><span>no metro</span></div>
|
||||
</div>
|
||||
<p>Vale nos quatro produtos. Preço da folha que você monta:</p>
|
||||
<table>
|
||||
<tr><td class="cab">nota</td><td class="cab">têxtil</td><td class="cab">UV</td></tr>
|
||||
<tr><td>90–100</td><td>R$ 14,90</td><td>R$ 69,90</td></tr>
|
||||
<tr><td>75–89</td><td>R$ 16,20</td><td>R$ 73,90</td></tr>
|
||||
<tr><td>60–74</td><td>R$ 17,50</td><td>R$ 77,90</td></tr>
|
||||
<tr><td>40–59</td><td>R$ 18,70</td><td>R$ 81,90</td></tr>
|
||||
<tr><td>abaixo de 40</td><td>R$ 19,90</td><td>R$ 85,90</td></tr>
|
||||
</table>
|
||||
<div class="dest">Se a montagem for nossa, some <b>R$ 10,00</b> no têxtil e
|
||||
<b>R$ 14,00</b> no UV — mesma escada, em qualquer faixa</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="stop">
|
||||
<div class="sinfo"><span class="et2">Largura</span><h3>O dobro do<br>filme padrão</h3></div>
|
||||
<div class="selo"><i></i><b>57<em>cm</em></b><span>de filme</span></div>
|
||||
</div>
|
||||
<p>A maioria trabalha com 28,5 cm. Na nossa largura cabe o dobro de arte
|
||||
por metro corrido — e o metro sai mais barato por peça.</p>
|
||||
<ul>
|
||||
<li>Duas artes de 28 cm lado a lado</li>
|
||||
<li>Menos emenda, menos corte</li>
|
||||
<li>DTF UV também disponível, em 28,5 cm</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="stop">
|
||||
<div class="sinfo"><span class="et2">Encaixe</span><h3>Reencaixamos<br>sua folha de graça</h3></div>
|
||||
<div class="selo"><i></i><b>grátis</b><span>reencaixe</span></div>
|
||||
</div>
|
||||
<p>Se a sua montagem deixa espaço sobrando, refazemos o encaixe com o mesmo
|
||||
motor que usamos nas nossas montagens.</p>
|
||||
<ul>
|
||||
<li>Artes que se tocam, separadas com 5 mm</li>
|
||||
<li>Giramos as peças para aproveitar a largura</li>
|
||||
<li>A folha encolhe e a sua conta diminui</li>
|
||||
</ul>
|
||||
<div class="dest">Refazemos o encaixe <b>antes de imprimir</b>, sem cobrar nada</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="stop">
|
||||
<div class="sinfo"><span class="et2">Cobrança</span><h3>Você paga<br>o que usa</h3></div>
|
||||
<div class="selo"><i></i><b>10<em>cm</em></b><span>de cada vez</span></div>
|
||||
</div>
|
||||
<p>Arredondamos a cada 10 cm. Uma folha de 2,75 m custa 2,80 m — quem cobra
|
||||
metro cheio cobraria 3.</p>
|
||||
<ul>
|
||||
<li>Pedido mínimo de 1 metro</li>
|
||||
<li>A identificação do pedido é por nossa conta</li>
|
||||
<li>Sem taxa de arquivo, sem taxa de revisão</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="stop">
|
||||
<div class="sinfo"><span class="et2">Sem burocracia</span><h3>Conta só na<br>hora de pagar</h3></div>
|
||||
<div class="selo"><i></i><b>0</b><span>conta e senha</span></div>
|
||||
</div>
|
||||
<p>Sobe a arte e vê o preço sem conta nenhuma. A conta nasce no pagamento, junto com o CNPJ da nota — e o próximo pedido já vem com suas artes anteriores. A revisão de 5 pontos vem junto —
|
||||
há quem cobre R$ 19,90 por pedido só por isso.</p>
|
||||
<ul>
|
||||
<li>Sem cadastro para subir e ver o preço</li>
|
||||
<li>Envio em até 24 horas</li>
|
||||
<li>WhatsApp a cada etapa do pedido</li>
|
||||
<li>Arquivo guardado 30 dias · histórico do pedido na conta</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="navc">
|
||||
<button id="cAnt" aria-label="Anterior">‹</button>
|
||||
<button id="cPro" aria-label="Próximo">›</button>
|
||||
<div class="pontos" id="cPontos"></div>
|
||||
</div>
|
||||
<!-- PREÇO E VANTAGENS -->
|
||||
<section id="info" class="info2"><div class="w info2-grid">
|
||||
<div class="info2-preco">
|
||||
<div class="et">Preço</div>
|
||||
<h2>Arte melhor, metro mais barato</h2>
|
||||
<p>A nota aparece na tela antes de você pagar. Preço da folha que você monta:</p>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Nota da arte</th><th scope="col">Têxtil 57 cm</th><th scope="col">UV 28,5 cm</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>90 a 100</td><td class="melhor">R$ 14,90</td><td class="melhor">R$ 69,90</td></tr>
|
||||
<tr><td>75 a 89</td><td>R$ 16,20</td><td>R$ 73,90</td></tr>
|
||||
<tr><td>60 a 74</td><td>R$ 17,50</td><td>R$ 77,90</td></tr>
|
||||
<tr><td>40 a 59</td><td>R$ 18,70</td><td>R$ 81,90</td></tr>
|
||||
<tr><td>abaixo de 40</td><td>R$ 19,90</td><td>R$ 85,90</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="nota2">Montagem das artes avulsas: + R$ 10,00 no têxtil e + R$ 14,00 no UV, em qualquer faixa.</p>
|
||||
</div>
|
||||
<div class="info2-vant">
|
||||
<div><b class="n">57 cm</b><b>O dobro do filme padrão</b><span>Cabe o dobro de arte por metro corrido.</span></div>
|
||||
<div><b class="n">10 cm</b><b>Você paga o que usa</b><span>Folha de 2,75 m custa 2,80 m, não 3. Pedido mínimo de 1 metro.</span></div>
|
||||
<div><b class="n">Grátis</b><b>Reencaixe da folha</b><span>Sobrou espaço? Refazemos o encaixe e a conta diminui.</span></div>
|
||||
<div><b class="n">5 pontos</b><b>Revisão sem custo</b><span>Erro pego antes de imprimir. Arquivo guardado por 30 dias.</span></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<div class="barraM" id="barraM" hidden>
|
||||
<div><span id="barraMSub">Seu pedido</span><b id="barraMTot">R$ 0,00</b></div>
|
||||
<a href="#carr" id="barraMBtn">Continuar</a>
|
||||
</div>
|
||||
|
||||
<footer><div class="w">
|
||||
<div class="frow">
|
||||
<span class="fmarca"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar">DTF</span>
|
||||
@@ -1407,7 +1276,8 @@ footer a:hover{color:var(--laranja2)}
|
||||
<script src="/privacy.js"></script>
|
||||
<script src="/upload.js"></script>
|
||||
<script src="/checkout.js"></script>
|
||||
<script src="/cart.js"></script>
|
||||
<script src="/cart.js?v=2"></script>
|
||||
<script src="/site-steps.js?v=1"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,22 +10,22 @@ const fmt=b=>b<1048576?(b/1024).toFixed(0)+' KB':(b/1048576).toFixed(1).replace(
|
||||
// ── modos
|
||||
const MODOS={
|
||||
file: {tit:'Arquivo por metro', lg:'DTF têxtil · 57 cm', larg:57,
|
||||
preco:'tabela R$ 19,90/m · até R$ 14,90', multi:true, folha:true,
|
||||
preco:'R$ 14,90 a R$ 19,90 /m conforme a nota', multi:true, folha:true,
|
||||
sub:'Sua folha montada. Revisamos, corrigimos e reencaixamos antes de imprimir.',
|
||||
zt:'Arraste suas folhas montadas',
|
||||
zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
|
||||
avulsa:{tit:'Artes avulsas', lg:'DTF têxtil · 57 cm', larg:57,
|
||||
preco:'tabela R$ 29,90/m · até R$ 24,90', multi:true,
|
||||
preco:'R$ 24,90 a R$ 29,90 /m conforme a nota', multi:true,
|
||||
sub:'Cada arte num arquivo. Montamos a folha com o melhor encaixe.',
|
||||
zt:'Arraste suas artes aqui',
|
||||
zs:'PNG ou JPG com fundo transparente · informe a largura de cada uma'},
|
||||
uvfile:{tit:'Arquivo por metro · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5,
|
||||
preco:'tabela R$ 85,90/m · até R$ 69,90', multi:true, folha:true,
|
||||
preco:'R$ 69,90 a R$ 85,90 /m conforme a nota', multi:true, folha:true,
|
||||
sub:'Sua folha de UV montada. Revisamos, corrigimos e reencaixamos antes de imprimir.',
|
||||
zt:'Arraste suas folhas de UV',
|
||||
zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
|
||||
uv: {tit:'Artes avulsas · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5,
|
||||
preco:'tabela R$ 99,90/m · até R$ 83,90', multi:true,
|
||||
preco:'R$ 83,90 a R$ 99,90 /m conforme a nota', multi:true,
|
||||
sub:'Cada arte de UV num arquivo. Montamos a folha com o melhor encaixe.',
|
||||
zt:'Arraste suas artes de UV',
|
||||
zs:'PNG ou JPG com fundo transparente · informe a largura de cada arte'}
|
||||
|
||||
72
web/site-steps.js
Normal file
72
web/site-steps.js
Normal file
@@ -0,0 +1,72 @@
|
||||
/* Site DTF — the order progress bar, the product card prices and the phone
|
||||
total bar. This file only reads the page's state (which panels are open,
|
||||
the cart total, the checkout status); it never changes an order, a price or
|
||||
a file, so the flow in the other site-*.js files behaves exactly as before. */
|
||||
(function(){
|
||||
// Card prices come from the same table the checkout uses, so they cannot drift.
|
||||
document.querySelectorAll('[data-de]').forEach(el=>{ el.textContent=rs(pisoEscada(el.dataset.de)); });
|
||||
document.querySelectorAll('[data-ate]').forEach(el=>{ el.textContent=rs(TABELA[el.dataset.ate]); });
|
||||
|
||||
const passos=$('passos'), barra=$('barraM');
|
||||
// The store header is sticky; the progress bar and the side panels sit below it.
|
||||
function alturas(){
|
||||
const topo=document.querySelector('.topo')?.offsetHeight||0;
|
||||
document.documentElement.style.setProperty('--topo',topo+'px');
|
||||
document.documentElement.style.setProperty('--topo-passos',(topo+(passos.hidden?0:passos.offsetHeight)+16)+'px');
|
||||
}
|
||||
const foco=$('foco'), carr=$('carr'), status=$('checkoutStatus'), acoes=$('checkoutActions');
|
||||
|
||||
function naTela(el){
|
||||
const r=el.getBoundingClientRect();
|
||||
return r.top < innerHeight*0.55 && r.bottom > innerHeight*0.2;
|
||||
}
|
||||
function etapa(){
|
||||
// Once the cart is sent, the quote, the payment and the order live in the
|
||||
// checkout status: that is the payment step.
|
||||
if((status.textContent||'').trim() || acoes.children.length) return 3;
|
||||
if(carr.classList.contains('on') && (naTela(carr) || !foco.classList.contains('on'))) return 2;
|
||||
return 1;
|
||||
}
|
||||
let pendente=false;
|
||||
function pinta(){
|
||||
pendente=false;
|
||||
const ativo=foco.classList.contains('on') || carr.classList.contains('on') || (status.textContent||'').trim();
|
||||
passos.hidden=!ativo; alturas();
|
||||
if(ativo){
|
||||
const atual=etapa();
|
||||
passos.querySelectorAll('[data-passo]').forEach(a=>{
|
||||
const n=Number(a.dataset.passo);
|
||||
a.classList.toggle('atual',n===atual); a.classList.toggle('feito',n<atual);
|
||||
if(n===atual) a.setAttribute('aria-current','step'); else a.removeAttribute('aria-current');
|
||||
});
|
||||
}
|
||||
// Phone bar: the running total while the cart itself is off screen.
|
||||
const temPedido=carr.classList.contains('on');
|
||||
const mostrar=temPedido && !naTela(carr) && !(status.textContent||'').trim();
|
||||
barra.hidden=!mostrar;
|
||||
if(mostrar){
|
||||
$('barraMTot').textContent=$('carrTot').textContent;
|
||||
$('barraMSub').textContent=foco.classList.contains('on')?'Total até agora':'Seu pedido';
|
||||
}
|
||||
}
|
||||
function agenda(){ if(!pendente){ pendente=true; requestAnimationFrame(pinta); } }
|
||||
|
||||
const obs=new MutationObserver(agenda);
|
||||
obs.observe(foco,{attributes:true,attributeFilter:['class']});
|
||||
obs.observe(carr,{attributes:true,attributeFilter:['class']});
|
||||
obs.observe(status,{childList:true,characterData:true,subtree:true});
|
||||
obs.observe(acoes,{childList:true});
|
||||
obs.observe($('carrTot'),{childList:true,characterData:true,subtree:true});
|
||||
addEventListener('scroll',agenda,{passive:true});
|
||||
addEventListener('resize',agenda);
|
||||
addEventListener('dtf-cart-changed',agenda);
|
||||
|
||||
// Steps are links; step 3 only makes sense once there is something to pay.
|
||||
passos.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>{
|
||||
const destino=document.querySelector(a.getAttribute('href'));
|
||||
if(!destino || destino.offsetParent===null){ e.preventDefault(); return; }
|
||||
e.preventDefault(); destino.scrollIntoView({behavior:'smooth',block:'start'});
|
||||
}));
|
||||
$('barraMBtn').addEventListener('click',e=>{ e.preventDefault(); carr.scrollIntoView({behavior:'smooth',block:'start'}); });
|
||||
pinta();
|
||||
})();
|
||||
177
web/site-v2.css
Normal file
177
web/site-v2.css
Normal file
@@ -0,0 +1,177 @@
|
||||
/* 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}
|
||||
}
|
||||
Reference in New Issue
Block a user