From 223854e392f22dd0087f99c9d38c98043e60ea25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= Date: Wed, 30 Sep 2026 16:13:35 -0300 Subject: [PATCH] feat: the order page in the Site's look, and no search box "Meus pedidos" was still the prototype's plain page. It now has the Site's stripe, header and footer, and its type, colours and cards: each order shows its status, a progress line through production (or the correction the team asked for), the items with metres and price, where it goes, and on request the history, the files to download and the correction form. Carts waiting for payment are listed with a button to pay. Sign-in and account creation are side by side. The header, stripe, menu, footer and tokens moved from index.html's inline style to site-shell.css, which both pages load. The header's search box, which did nothing, is gone. Co-Authored-By: Claude Opus 5.5 --- web/index.html | 83 +------------------- web/portal.css | 116 ++++++++++++++++++++++++++++ web/portal.html | 113 +++++++++++++++++++++++++--- web/portal.js | 184 +++++++++++++++++++++++++++++++++++---------- web/site-config.js | 1 - web/site-shell.css | 80 ++++++++++++++++++++ web/site-v2.css | 2 - 7 files changed, 444 insertions(+), 135 deletions(-) create mode 100644 web/portal.css create mode 100644 web/site-shell.css diff --git a/web/index.html b/web/index.html index 0042ddd..3805586 100644 --- a/web/index.html +++ b/web/index.html @@ -7,79 +7,14 @@ + @@ -727,10 +650,6 @@ footer a:hover{color:var(--laranja2)}
-
- - -
Minha conta Carrinho diff --git a/web/portal.css b/web/portal.css new file mode 100644 index 0000000..483f922 --- /dev/null +++ b/web/portal.css @@ -0,0 +1,116 @@ +/* Meus pedidos: the Site's look (tokens and shell from site-shell.css and + site-v2.css) for the order page. */ +[hidden]{display:none!important} +body{background:var(--cinza)} +.topo .acts a[aria-current="page"]{color:var(--laranja-escuro)} +.ped{padding-top:26px;padding-bottom:64px;min-height:70vh} +.volta{display:inline-block;margin-bottom:14px;font-size:15px;color:var(--texto2);text-decoration:none} +.volta:hover{color:var(--laranja-escuro)} +.pedCab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} +.pedCab h1{font-size:34px;font-weight:800;margin-top:4px} +.conta{margin-top:6px;font-size:15px;color:var(--fraco)} +.conta:empty{display:none} +.pedAcoes{display:flex;gap:10px} +.pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px} +.pedMsg{margin-bottom:14px;font-size:15px;color:var(--laranja-escuro)} +.pedMsg:empty{display:none} + +/* Buttons, as on the Site. */ +.bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer} +.bPri:hover:not(:disabled){background:#FFB53D} +.bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer} +.bSec:hover:not(:disabled){border-color:var(--preto)} +.bSec .ic{width:18px;height:18px} +.bLink{margin-top:14px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px} +button:disabled{opacity:.6;cursor:default} + +/* Sign in / create account. */ +.acesso{margin-bottom:26px} +.acessoIntro{margin-bottom:12px;font-size:15px;color:var(--texto2)} +.acessoIntro:empty{display:none} +.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} +.bloco{display:flex;flex-direction:column;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff} +.bloco h2{font-size:21px;font-weight:800} +.bloco .nota2{margin:4px 0 12px;font-size:14.5px;color:var(--fraco)} +.bloco label,.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)} +.bloco label .obs{font-weight:400;color:var(--fraco)} +.bloco input,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff} +.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical} +.bloco input:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)} +.bloco .bPri{margin-top:16px} +.bloco .nota2:last-child{margin:12px 0 0} +.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} +.duas>div{display:flex;flex-direction:column} + +/* Orders. */ +.grupo{margin-bottom:22px} +.grupo:empty{display:none} +.tituloGrupo{margin-bottom:12px;font-size:20px;font-weight:800} +.pedido{margin-bottom:14px;padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff} +.pedido.pendente{border-color:var(--aviso-linha)} +.pedido.correcao{border-color:#F3B7A9} +.pedTopo{display:flex;align-items:center;gap:14px;flex-wrap:wrap} +.pedTopo>div{flex:1;min-width:160px} +.pedTopo h3{font-size:19px;font-weight:800} +.pedTopo .data{font-size:14.5px;color:var(--fraco)} +.pedTopo .valor{font-family:"Inter",sans-serif;font-size:19px;font-weight:800} +.pedido.pendente .bPri{margin-top:14px} +.pedido .nota2{margin-top:10px;font-size:15px;color:var(--fraco)} +.estado{padding:5px 11px;border-radius:999px;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap} +.est-fin{background:var(--verde-fundo);color:var(--verde)} +.est-cor{background:#FDE8E6;color:#B42318} +.est-imp,.est-fil,.est-tra,.est-rec{background:var(--aviso-fundo);color:var(--laranja-escuro)} + +/* Progress through production. */ +.trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0} +.trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)} +.trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0} +.trilha li:first-child::before{display:none} +.trilha li.feito::before,.trilha li.atual::before{background:var(--verde)} +.trilha .marca{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #D0D0D0;background:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:14px} +.trilha .marca .ic{width:16px;height:16px;stroke-width:3} +.trilha li.feito{color:var(--verde)} +.trilha li.feito .marca{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)} +.trilha li.atual{color:var(--preto)} +.trilha li.atual .marca{background:var(--laranja);border-color:var(--laranja)} +.trilha b{font-weight:600} +.trilha li.atual b{font-weight:800} +.pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px} +.pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318} + +.itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)} +.itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px} +.itensPed .nome{flex:1;font-weight:600} +.itensPed .qt{color:var(--fraco)} +.itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif} +.itensPed .frete .nome{font-weight:400;color:var(--texto2)} +.entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)} +.entregaPed .ic{width:19px;height:19px;color:var(--laranja-escuro)} + +/* Details. */ +.detalhe:empty{display:none} +.detalhe{margin-top:14px;padding-top:4px;border-top:1px dashed var(--linha)} +.secao{margin-top:14px} +.secao h4{margin-bottom:8px;font-size:16px;font-weight:800} +.historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)} +.historico li{position:relative;padding:0 0 12px 12px;font-size:15px} +.historico li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--laranja)} +.historico li b{margin-right:8px} +.historico li span{color:var(--fraco)} +.historico .motivo{margin-top:4px;padding:8px 10px;border-radius:8px;background:#FDE8E6;font-size:14.5px} +.arquivo{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)} +.arquivo>div{flex:1;min-width:0;display:flex;flex-direction:column} +.arquivo b{overflow-wrap:anywhere;font-size:15px} +.arquivo span{font-size:14px;color:var(--fraco)} +.correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)} +.correcaoForm input[type=file]{font-size:15px} +.correcaoForm .bPri{margin-top:14px;align-self:flex-start} + +.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;border:1px dashed #D6D6D6;border-radius:var(--raio);background:#fff;font-size:16px;color:var(--texto2)} + +@media (max-width:600px){ + .pedCab h1{font-size:28px} + .trilha b{font-size:12.5px} + .duas{grid-template-columns:1fr} + .pedido{padding:16px} +} diff --git a/web/portal.html b/web/portal.html index 6e8ab8b..5b64e7c 100644 --- a/web/portal.html +++ b/web/portal.html @@ -1,11 +1,102 @@ -Dropstar · Meus pedidos DTF - -
DROPSTAREnviar arteMinha conta · DTF
-

Meus pedidos DTF

-
-

Entrar

-

Criar conta

Pedidos desta sessão serão associados à sua conta. Guarde sua senha: a recuperação por e-mail ainda não está disponível.

-

Acompanhamento

- + + + + + +Meus pedidos · DTF Dropstar + + + + + + + + + +
+ ENVIE SEU ARQUIVO DTF PELO SITE · DTF TÊXTIL COM O MENOR PREÇO DO METRO EM FRANCA-SP +
+ +
+ +
+ Minha conta + Carrinho +
+
+ +
+ ‹ Enviar outra arte +
+
+

DTF Dropstar

+

Meus pedidos

+

+
+
+ + +
+
+ +

+ +
+

+
+
+

Entrar

+

Já comprou com seu CNPJ? Entre para ver todos os seus pedidos.

+ + + + + +
+
+

Criar conta

+

Os pedidos feitos neste navegador passam para a sua conta.

+
+
+
+
+ + + + + +

Guarde sua senha: a recuperação por e-mail ainda não está disponível.

+
+
+
+ +
+
+
+ + + + + + diff --git a/web/portal.js b/web/portal.js index 59085b2..9a85c7f 100644 --- a/web/portal.js +++ b/web/portal.js @@ -1,62 +1,168 @@ +/* Meus pedidos: the customer's orders, their progress and files, sign-in and + the artwork correction the team may ask for. */ const $=id=>document.getElementById(id); -const node=(tag,text)=>{const el=document.createElement(tag);if(text!==undefined)el.textContent=text;return el;}; +const node=(tag,text,className)=>{const el=document.createElement(tag);if(text!==undefined&&text!==null)el.textContent=text;if(className)el.className=className;return el;}; const money=c=>(c/100).toLocaleString('pt-BR',{style:'currency',currency:'BRL'}); +const quando=d=>new Date(d).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}); +const dia=d=>new Date(d).toLocaleDateString('pt-BR'); +const metros=m=>Number(m).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})+' m'; +// Lucide shapes (ISC licence), the same as on the Site. +const ICONES={ + baixar:'', + local:'', + caminhao:'', + ok:'', + alerta:'', + relogio:'', +}; +function icone(nome){ + const span=document.createElement('span');span.className='icw'; + span.innerHTML=''; + return span.firstChild; +} +const PRODUTO={file:'DTF Têxtil · folha montada',avulsa:'DTF Têxtil · artes avulsas', + uvfile:'DTF UV · folha montada',uv:'DTF UV · artes avulsas'}; +// The order's way through production, as the customer sees it. +const TRILHA=['rec','tra','fil','imp','fin']; let scope,states={},environment=''; + async function api(path,body){const r=await fetch('/api'+path,{headers:{'Content-Type':'application/json'},...(body===undefined?{}:{method:'POST',body:JSON.stringify(body)})});const d=await r.json();if(!r.ok){const error=new Error(typeof d.detail==='string'?d.detail:'Confira os campos informados.');error.status=r.status;throw error;}return d;} -function button(text,fn){const b=node('button',text);b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){$('message').textContent=e.message;}finally{b.disabled=false;}};return b;} +const aviso=text=>{$('message').textContent=text||'';}; +function button(text,fn,className='bSec'){const b=node('button',text,className);b.type='button';b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){aviso(e.message);}finally{b.disabled=false;}};return b;} function forgetCheckout(){for(const k of ['dtf-quote','dtf-request-key','dtf-request-body'])localStorage.removeItem(k);} + +function trilha(state){ + const ol=node('ol',null,'trilha'); + const atual=state==='cor'?-1:TRILHA.indexOf(state); + TRILHA.forEach((s,i)=>{ + const li=node('li',null,idetails(order.id,content)),content);$('orders').append(card); - if(new URLSearchParams(location.search).get('order')===order.id)await details(order.id,content); + const card=node('article',null,'pedido'+(order.state==='cor'?' correcao':''));card.id='order-'+order.id; + const topo=node('div',null,'pedTopo'); + const nome=node('div');nome.append(node('h3','Pedido #'+order.number),node('span',quando(order.created_at),'data')); + topo.append(nome,node('span',states[order.state],'estado est-'+order.state),node('b',money(order.snapshot.total_cents)+(environment==='local'?' · teste':''),'valor')); + card.append(topo); + if(order.state==='cor'){ + const p=node('p',null,'pedAlerta');p.append(icone('alerta'),node('span','A equipe precisa de uma correção na sua arte. Abra os detalhes para ver o motivo e enviar o arquivo corrigido.')); + card.append(p); + }else card.append(trilha(order.state)); + card.append(itens(order.snapshot),entrega(order.snapshot)); + const content=node('div',null,'detalhe'); + const ver=button('Ver detalhes e arquivos',async()=>{ + if(content.childElementCount){content.replaceChildren();ver.textContent='Ver detalhes e arquivos';return;} + await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes'; + },'bLink'); + card.append(ver,content);orders.append(card); + if(aberto===order.id){await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes';card.scrollIntoView({block:'start'});} } - }catch(error){$('message').textContent=error.message;} + }catch(error){aviso(error.message);} } -async function details(id,container){ + +async function details(id,container,criado){ const order=await api('/customer/orders/'+id);container.replaceChildren(); - for(const [i,item] of order.snapshot.items.entries())container.append(node('p',(i+1)+'. '+item.mode+' · '+item.billed_metres+' m · nota '+item.grade+' · '+money(item.total_cents))); - const history=node('ol'); - for(const h of order.history)history.append(node('li',new Date(h.created_at).toLocaleString('pt-BR')+' · '+states[h.to_state]+(h.reason?' — '+h.reason:''))); - container.append(history); - for(const file of order.files){ - const row=node('p',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+file.name+' · '+(file.expired?'expirado':!file.active?'substituído':'disponível até '+new Date(file.expires_at).toLocaleDateString('pt-BR'))); - if(file.active&&!file.expired)row.append(button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();})); - container.append(row); + const hist=node('div',null,'secao');hist.append(node('h4','Andamento')); + const ol=node('ol',null,'historico'); + // Payment is where the order starts: the first step is not a movement. + if(criado){const li=node('li');li.append(node('b',states.rec||'Arte recebida'),node('span',quando(criado)));ol.append(li);} + for(const h of order.history){ + const li=node('li');li.append(node('b',states[h.to_state]),node('span',quando(h.created_at))); + if(h.reason)li.append(node('p',h.reason,'motivo')); + ol.append(li); + } + hist.append(ol);container.append(hist); + if(order.files.length){ + const arq=node('div',null,'secao');arq.append(node('h4','Arquivos')); + for(const file of order.files){ + const row=node('div',null,'arquivo'); + const info=node('div'); + info.append(node('b',file.name),node('span',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+ + (file.expired?'expirado':!file.active?'substituído':'disponível até '+dia(file.expires_at)))); + row.append(info); + if(file.active&&!file.expired){ + const b=button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();}); + b.prepend(icone('baixar'));row.append(b); + } + arq.append(row); + } + container.append(arq); } if(order.state==='cor'){ - const form=node('form');form.append(node('h3','Enviar arte corrigida')); - const inputs=order.snapshot.items.map((item,index)=>{const label=node('label','Item '+(index+1)+' · '+item.mode);const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index;label.append(input);form.append(label);return input;}); - const note=node('textarea');note.placeholder='Descreva a correção';note.required=true;note.maxLength=1000;form.append(note); - const submit=node('button','Enviar correção');submit.type='submit';form.append(submit); + const form=node('form',null,'secao correcaoForm');form.append(node('h4','Enviar arte corrigida')); + const inputs=order.snapshot.items.map((item,index)=>{ + const label=node('label',(index+1)+'. '+(PRODUTO[item.mode]||item.mode)); + const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index; + form.append(label,input);return input; + }); + const nl=node('label','O que foi corrigido');const note=node('textarea');note.required=true;note.maxLength=1000;note.rows=3; + form.append(nl,note); + const submit=node('button','Enviar correção','bPri');submit.type='submit';form.append(submit); form.onsubmit=async event=>{event.preventDefault();submit.disabled=true;try{ - const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>$('message').textContent=text})}); + const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>aviso(text)})}); if(!files.length)throw new Error('Selecione pelo menos um arquivo corrigido.'); await api('/customer/orders/'+id+'/corrections',{version:order.version,files,note:note.value}); - $('message').textContent='Correção enviada. Aguarde a conferência da equipe.';await details(id,container); - }catch(error){$('message').textContent=error.message;}finally{submit.disabled=false;}}; + aviso('Correção enviada. Aguarde a conferência da equipe.');await details(id,container,criado); + }catch(error){aviso(error.message);}finally{submit.disabled=false;}}; container.append(form); } } + async function migrateGuestCart(previous,next){ if(previous===next)return; const database=await new Promise((resolve,reject)=>{const r=indexedDB.open('dtf-local-cart',1);r.onupgradeneeded=()=>r.result.createObjectStore('cart');r.onsuccess=()=>resolve(r.result);r.onerror=()=>reject(r.error);}); @@ -65,13 +171,13 @@ async function migrateGuestCart(previous,next){ } async function authenticate(path,body){ const previous=scope,guest=!(await api('/account/me')).customer; - await api(path,body);forgetCheckout();$('message').textContent='Acesso confirmado.'; + await api(path,body);forgetCheckout();aviso('Acesso confirmado.'); const next=(await api('/session')).cart_scope; - if(guest)try{await migrateGuestCart(previous,next);}catch{$('message').textContent='Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.';} + if(guest)try{await migrateGuestCart(previous,next);}catch{aviso('Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.');} await load();$('password').value='';$('register-password').value=''; } -$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){$('message').textContent=e.message;}}; -$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){$('message').textContent=e.message;}}; -$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){$('message').textContent='Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.';}}; +$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){aviso(e.message);}}; +$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){aviso(e.message);}}; +$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){aviso('Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.');}}; $('refresh').onclick=load; load(); diff --git a/web/site-config.js b/web/site-config.js index 4220a1d..7cea92e 100644 --- a/web/site-config.js +++ b/web/site-config.js @@ -8,7 +8,6 @@ const rs=v=>'R$ '+v.toFixed(2).replace('.',','); // Ícones (Lucide, licença ISC) desenhados no próprio HTML: nada a carregar, e a // cor vem do texto em volta. Os que ficam no HTML estático são os mesmos. const ICONES={ - busca:'', conta:'', sacola:'', enviar:'', diff --git a/web/site-shell.css b/web/site-shell.css new file mode 100644 index 0000000..1aacd9f --- /dev/null +++ b/web/site-shell.css @@ -0,0 +1,80 @@ +/* Site DTF — what every page shares: the tokens, the base type, the stripe, + header, category menu and footer. The Site (index.html) and the order page + (portal.html) both load it before their own styles. */ +:root{ + /* tokens do site institucional */ + --font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif; + --font-color-base:#03060b; --font-color-title:#03060b; + --font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600; + --font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem; + --font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem; + --line-height:1.5; + --white:#fff; --black:#03060b; + --gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636; + --primary-color:#ffa81a; --secondary-color:#ff7f0a; + --white-transparency:#ffffffb3; --transition:all .4s ease; + /* apelidos usados nesta pagina, mapeados nos tokens acima */ + --marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1); + --tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6; + --laranja:var(--primary-color); --laranja2:var(--secondary-color); + --vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A; + --sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05); + --sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)} + +*{box-sizing:border-box;margin:0;padding:0} +html{scroll-behavior:smooth;font-size:62.5%} +body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base); + font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height); + -webkit-font-smoothing:antialiased} +h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title); + font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15} +.w{max-width:1020px;margin:0 auto;padding:0 22px} + +/* tarja rotativa, como no site */ +.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px; + font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em} +.tarja a{color:#111;text-decoration:none} + +/* topo */ +.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60} +.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px} +.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none} +.logo img{height:26px;width:auto;display:block} +.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black); + letter-spacing:-.03em} +.logotexto i{font-style:normal;color:var(--laranja)} +.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px} +.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px} +.acts a:hover{color:var(--laranja)} + +/* menu */ +.menu{background:#fff;border-bottom:1px solid var(--linha)} +.menu .w{display:flex;gap:0;flex-wrap:wrap} +.mi{position:relative} +.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600; + font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap} +.mi:hover>a{color:var(--laranja)} +.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)} +.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha); + border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70; + box-shadow:0 10px 26px rgba(0,0,0,.09)} +.mi:hover .sub,.mi:focus-within .sub{display:block} +.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none} +.sub a:hover{color:var(--laranja);background:var(--cinza)} +@media(max-width:820px){ + .menu .w{overflow-x:auto;flex-wrap:nowrap} + .sub{display:none!important} +} + +footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px} +.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px} +.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif; + font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap} +.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)} +footer a{color:#8D9AB0;text-decoration:none} +footer a:hover{color:var(--laranja2)} +.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px} +.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7} +@media(max-width:720px){.fcont{margin-left:0;text-align:left}} +.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex; + justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570} diff --git a/web/site-v2.css b/web/site-v2.css index 16a5059..1ddad08 100644 --- a/web/site-v2.css +++ b/web/site-v2.css @@ -340,8 +340,6 @@ section+section{border-top:0} 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} -.busca .lupa{display:flex;font-size:0} -.busca .lupa .ic{width:18px;height:18px} .acts a .ic{width:23px;height:23px} .cartIc{position:relative;display:inline-flex} .acts #cartLink{gap:11px}