/* ============================================================ TUA PELE — Padronização de interface Autor: Hacker 0 5 90 Última folha carregada em TODAS as páginas. Só uniformiza o que já existia em versões diferentes; não cria componentes novos nem altera funcionalidade. 1. Nome da página: centrado no header, na fonte de texto do sistema. 2. Cápsula única para filtros e interruptores de secção. 3. Camadas fixas que a barra inferior tapava. 4. Logótipo: mesmo desenho em todos os sítios do sistema. 5. Faixa de instalação da PWA. Sobre o peso dos selectores: as folhas de cada área declaram estes mesmos elementos com body[data-loja-page] + duas classes e !important. O prefixo `html body[class] ... [class]` existe apenas para igualar esse peso — sem ele a padronização não se aplicaria nas páginas que mais precisam dela. ============================================================ */ :root { /* Igual a --tp-bottom-h do app-redesign.css, repetido porque nem todas as páginas carregam essa folha. */ --tp-nav-h: 66px; --tp-nav-gap: calc(var(--tp-nav-h) + env(safe-area-inset-bottom)); /* Escala única das camadas flutuantes — ver a secção 3. */ --tp-z-nav: 2100; --tp-z-sheet: 3000; --tp-z-popup: 3600; --tp-z-confirm: 3800; /* Um único raio para filtros e interruptores de secção. */ --tp-pill: 999px; /* Nome da página no header, pedido em 10/08/2026: Times New Roman. Nota para quem vier a seguir: o Times não é usado em mais lado nenhum do sistema — a serif das restantes rubricas é a Cormorant Garamond (--fonte-titulo). Trocar aqui muda todos os headers de uma vez. */ --tp-page-title-font: 'Times New Roman', Times, Georgia, serif; /* A Times tem olho pequeno: ao mesmo tamanho lê-se menor que a DM Sans, por isso sobe um par de pontos. */ --tp-page-title-size: clamp(18px, 5vw, 22px); --tp-page-title-weight: 700; --tp-page-title-color: #5C3020; /* Logótipo. O "tua" é a script; o "pele" é a serif de título no peso mais forte que a família tem. O traço fino fecha a diferença para o desenho aprovado sem mexer em nenhum tamanho. */ --tp-logo-script: var(--fonte-script), 'Great Vibes', cursive; --tp-logo-serif: var(--fonte-titulo), 'Cormorant Garamond', Georgia, serif; --tp-logo-stroke: 0.022em; /* Cores trocadas entre si: até aqui o "tua" levava o castanho escuro e o "pele" o médio. Agora é ao contrário. */ --tp-logo-cor-tua: #8B4A2E; --tp-logo-cor-pele: #5C3020; } /* ------------------------------------------------------------ 1. NOME DA PÁGINA Antes desta folha havia sete tipografias diferentes para a mesma coisa: serif 26px no cliente, serif 20px nas páginas aprovadas, serif 21px no ADM e, nas páginas da loja em telemóvel, um rótulo cinzento de 10,5px em maiúsculas encostado à esquerda. ------------------------------------------------------------ */ html body[class] header[class] > .header-center > h1, html body[class] header[class] > h1, html body[class] header[class] .dv-header-inner > .header-center > h1 { margin: 0 !important; max-width: 100% !important; font-family: var(--tp-page-title-font) !important; font-size: var(--tp-page-title-size) !important; font-weight: var(--tp-page-title-weight) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: none !important; color: var(--tp-page-title-color) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* O h1 escondido (adm-estoque, listar-produtos) continua escondido: .visually-hidden usa !important em position/clip e não é tocado. */ /* Centragem real: colunas laterais iguais. Sem isto o título fica no centro da coluna do meio, que não é o centro do header sempre que um dos lados é a marca e o outro um botão de 40px. A condição repete-se em todos os blocos seguintes porque o CSS não permite dar nome a um selector. É sempre a mesma: headers que mostram o nome da página, seja em

ou na pastilha do checkout. */ html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)), html body[class] header[class]:has(> h1:not(.visually-hidden)) { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr) !important; } html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)) > .header-center { flex: 0 1 auto !important; justify-content: center !important; justify-self: center !important; min-width: 0 !important; width: auto !important; max-width: none !important; } /* Nos headers em flex (carrinho, checkout, loja) o mesmo efeito obtém-se com bases iguais. Em headers em grid estas declarações são inertes, e as de grid são inertes nos headers em flex. A largura fixa tem de cair junto: .loja-header .header-buttons trava o lado direito em 40px e sozinho o flex-grow não o liberta. */ html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)) > .header-left, html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)) > .header-right { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; } html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)) > .header-left { justify-content: flex-start !important; justify-self: start !important; } html body[class] header[class]:has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)) > .header-right { justify-content: flex-end !important; justify-self: end !important; } /* Headers com o h1 como filho directo (ADM, transferências, cardápio, perfil do cliente). */ html body[class] header[class]:has(> h1:not(.visually-hidden)) > h1 { justify-self: center !important; } /* O header sobe até debaixo da barra de estado. Com viewport-fit=cover a página passa a ocupar o ecrã todo, incluindo a faixa da barra de estado. Sem esta regra o header ficava a começar por baixo dela e via-se a junção das duas superfícies. Dando ao header o env(safe-area-inset-top) como preenchimento, é o próprio header que pinta essa faixa — deixa de haver duas superfícies e, portanto, linha nenhuma entre elas. Fora da app instalada o inset é 0 e nada muda. O fixed-app-headers.js mede a altura real do header a cada mudança, por isso a reserva de espaço no body acompanha sozinha. */ html body[class] header[class]:is( .loja-header, .admin-header, .cart-header, .checkout-header, .delivery-header, .adm-v2-header, .transfer-page-header, .cardapio-header, .profile-topbar, .approved-mobile-header, .app-header, .loja-v2-header ) { padding-top: calc(var(--tp-header-pad-top, 8px) + env(safe-area-inset-top, 0px)) !important; border-top: 0 !important; } /* Nos headers de duas linhas (Inventário e Financeiro do ADM) a altura vem das linhas da grelha, não do preenchimento. Somar 8px em cima abria uma faixa vazia por baixo da barra de estado — aqui só entra o desvio. */ html body[class] header[class]:is(:has(> section), :has(> .filters-wrapper)) { --tp-header-pad-top: 0px; } /* Altura única para os headers com nome de página. Estavam entre 50px (perfil do cliente) e 65px (loja e carrinho). Ficam de fora os headers de duas linhas — o Financeiro do ADM leva a barra de filtros dentro do próprio header e uma altura fixa cortá-la-ia. Os 8px em cima e em baixo são o mínimo que deixa passar um botão de 44px sem transbordar. A altura é mínima e não fixa: dentro da app instalada o header cresce o tanto da barra de estado, que ele próprio passa a pintar. */ @media (max-width: 768px) { html body[class] header[class]:not(:has(> section)):not(:has(> .filters-wrapper)):has(> .header-center > :is(h1:not(.visually-hidden), .page-title-pill)), html body[class] header[class]:not(:has(> section)):not(:has(> .filters-wrapper)):has(> h1:not(.visually-hidden)), /* Os headers que trocam o nome da página por um interruptor de secções (carrinho, produtos, inventário) e os do delivery, que embrulham as três partes num .dv-header-inner. */ html body[class] header[class]:not(:has(> section)):not(:has(> .filters-wrapper)):has(> .header-center > :is(.cart-section-switch, .stock-section-switch)), html body[class] header[class]:not(:has(> section)):not(:has(> .filters-wrapper)):has(> .dv-header-inner) { min-height: calc(62px + env(safe-area-inset-top, 0px)) !important; height: auto !important; padding-bottom: 8px !important; } /* Com a altura a deixar de ser fixa, o interruptor do carrinho passou a empurrar o header para 67px enquanto os outros ficavam em 62. Antes não se via porque a altura fixa o cortava. Encolhe-se o interruptor em vez de voltar a cortá-lo. */ html body.cart-body header[class] .cart-section-tab { min-height: 34px !important; } } /* O checkout e a política de reembolso mostravam o nome da página dentro de uma pastilha de 40px com ícone e texto de 13px. Passa a ser o mesmo título das outras páginas. */ html body[class] header[class] .page-title-pill { height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--tp-page-title-font) !important; font-size: var(--tp-page-title-size) !important; font-weight: var(--tp-page-title-weight) !important; color: var(--tp-page-title-color) !important; } html body[class] header[class] .page-title-pill > i { display: none !important; } /* Nota: houve aqui uma regra que dava 62px a todos os headers de .loja-v2-page. Cortava o Inventário, cujo header tem duas linhas — a segunda leva a barra de filtros. A regra de altura acima já cobre estas páginas e conhece essa excepção. */ /* O fixed-app-headers.js já reserva a altura do header no . O carrinho, o checkout e a política de reembolso somavam por cima a sua própria reserva de 78-80px e abriam uma faixa vazia por baixo do cabeçalho. As restantes páginas já tinham essa reserva anulada — só que a regra original exigia um companheiro fixo, que estas não têm. */ html body.app-fixed-header-page > :is(.cart-page-shell, .checkout-shell) { padding-top: 8px !important; margin-top: 0 !important; } /* ------------------------------------------------------------ 2. CÁPSULA ÚNICA — filtros e interruptores de secção O sistema já usava 999px na maioria dos sítios (carrinho, entregas, pedidos, delivery, caixa-histórico). Ficavam de fora: 12px no ADM, 7px e 11px no cliente, 18px e 22px nos anúncios e no caixa. ------------------------------------------------------------ */ html body[class] :is( .filter-btn, .order-filter-btn, .purchase-filter-btn, .transfer-filter-btn, .transfer-history-filter-btn, .transfer-tab-btn, .tab-btn, .adm-v2-tab, .adm-section-btn, .stock-section-tab, .cart-section-tab, .anuncios-tab-btn, .client-tab-btn, .profile-tab-btn, .profile-tab, .dv-tab ) { border-radius: var(--tp-pill) !important; } /* O invólucro acompanha o botão: cápsula dentro de cápsula. */ html body[class] :is( .cart-section-switch, .stock-section-switch, .client-section-tabs, .anuncios-section-tabs, .dv-tabs-inner ) { border-radius: var(--tp-pill) !important; } /* .adm-section-switch e .profile-tabs são grelhas sem fundo próprio: o raio pertence só aos botões, senão aparece uma moldura fantasma. */ /* ------------------------------------------------------------ 4. LOGÓTIPO O mesmo "tuapele" estava declarado em vinte folhas com pesos diferentes: o "tua" ora a 300 ora a 400 (a Great Vibes só tem 400, o 300 era inventado pelo navegador), o "pele" ora a 600, ora a 650, ora a 900 — e o 900 nunca existiu, a família vai só até 700 e nem esse era descarregado. Daí umas páginas terem um "pele" fino e outras um "pele" borrado pelo -webkit-text-stroke que tentava compensar. Aqui fica um só desenho: "tua" na script, "pele" na serif a 700 com um traço fino. Os TAMANHOS não são tocados — cada contexto (header, gaveta, rodapé, loader, hero do login) mantém o seu, e a proporção entre as duas metades continua a que já estava desenhada. ------------------------------------------------------------ */ html body[class] span.logo-tua[class] { font-family: var(--tp-logo-script) !important; font-weight: 400 !important; font-style: normal !important; color: var(--tp-logo-cor-tua) !important; -webkit-text-stroke-width: 0 !important; } html body[class] span.logo-pele[class] { font-family: var(--tp-logo-serif) !important; font-weight: 700 !important; font-style: normal !important; color: var(--tp-logo-cor-pele) !important; letter-spacing: -0.03em !important; /* currentColor para o traço seguir a cor da própria palavra. */ -webkit-text-stroke: var(--tp-logo-stroke) currentColor !important; paint-order: stroke fill; } /* ------------------------------------------------------------ 11. BATIMENTO DAS FAIXAS DE AVISO Duas pulsações seguidas e uma pausa longa, como um coração. O movimento é para a frente e para trás — escala, não deslocação — para a faixa não empurrar nada à volta enquanto bate. 1,6% de crescimento chega para o olho apanhar sem ser irritante: estas faixas ficam no ecrã até serem resolvidas, e uma animação forte a repetir-se sem fim cansa depressa. ------------------------------------------------------------ */ @keyframes tpBatimento { 0% { transform: scale(1); } 8% { transform: scale(1.016); } 16% { transform: scale(1); } 24% { transform: scale(1.012); } 32% { transform: scale(1); } 100% { transform: scale(1); } /* a pausa entre batimentos */ } .pwa-install-bar, .perfil-incompleto-bar { transform-origin: center; will-change: transform; animation: tpBatimento 2.6s ease-in-out infinite; } /* Enquanto o dedo está em cima, o batimento pára: ninguém quer acertar num alvo que se mexe. */ .pwa-install-bar:hover, .pwa-install-bar:focus-within, .pwa-install-bar:active, .perfil-incompleto-bar:hover, .perfil-incompleto-bar:focus-within, .perfil-incompleto-bar:active { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pwa-install-bar, .perfil-incompleto-bar { animation: none; } } /* ------------------------------------------------------------ 10. FAIXA DE PERFIL INCOMPLETO Quem entra pelo Google, Apple ou Microsoft chega sem telefone, sem província e sem ponto de entrega. A faixa vive no fluxo normal, logo abaixo do header — nada de position:fixed a tapar produtos. ------------------------------------------------------------ */ .perfil-incompleto-bar { width: 100%; margin: 0 0 16px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(192, 154, 43, .32); border-radius: 18px; background: #FDF7E8; color: #5C3020; } .perfil-incompleto-icone { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #F4E6C3; color: #8A6A17; font-size: 15px; } .perfil-incompleto-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .perfil-incompleto-texto strong { font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; color: #5C3020; } .perfil-incompleto-texto span { font-size: 11.5px; line-height: 1.35; color: #7A6154; } .perfil-incompleto-bar .perfil-incompleto-btn { flex: 0 0 auto; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border: 0 !important; border-radius: 999px !important; background: #5C3020 !important; color: #FFFFFF !important; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; } @media (max-width: 380px) { .perfil-incompleto-texto span { display: none; } .perfil-incompleto-bar { gap: 9px; padding: 9px 10px; } } /* ------------------------------------------------------------ 9. ABAS DO PERFIL DO CLIENTE A barra estava com padding 0: as pastilhas encostavam ao header em cima, à linha em baixo e às margens dos lados. Ganha o mesmo ar que a barra de abas do vendedor já tinha. ------------------------------------------------------------ */ html body.profile-body .profile-tabs { padding: 9px 16px 10px !important; gap: 8px !important; } html body.profile-body .profile-tab-btn { min-height: 40px !important; } /* As iniciais do avatar eram a única coisa em serif nesta zona. */ html body.profile-body .profile-avatar-initials { font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em !important; } /* ------------------------------------------------------------ 6. RESUMO DA COMISSÃO DO GATEWAY (cadastro e edição de produto) Mostra ao vendedor as três parcelas em jogo: o que o cliente paga, o que a PaySuite retém e o que sobra para a loja. ------------------------------------------------------------ */ .gateway-hint { margin: 10px 0 4px; padding: 10px 12px; display: grid; gap: 5px; border: 1px solid #EDE3D9; border-radius: 14px; background: #F7F1EA; } .gateway-hint[hidden] { display: none !important; } .gateway-hint-linha { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.3; color: #7A6154; } .gateway-hint-linha i { width: 15px; flex: 0 0 auto; text-align: center; font-size: 11px; color: #A8887A; } .gateway-hint-linha strong { margin-left: auto; font-size: 13px; font-weight: 700; color: #5C3020; white-space: nowrap; } .gateway-hint-linha.is-total { margin-top: 3px; padding-top: 7px; border-top: 1px solid #EDE3D9; color: #5C3020; } .gateway-hint-linha.is-total i { color: #6E7F63; } .gateway-hint-linha.is-total strong { font-size: 15px; } /* Interruptor de linha: usado no "frete grátis" das páginas de produto. */ .switch-linha { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 2px; cursor: pointer; } /* A `.switch-linha` deixou de ser usada: o frete e o reembolso passaram a usar o mesmo `.switch` + `.slider` de "Status e Visibilidade", para não haver dois desenhos de interruptor na mesma página. A regra fica para o caso de alguma página antiga ainda a usar. */ .switch-linha input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #5C3020; cursor: pointer; } .switch-linha span { font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 500; color: #3A2118; } /* ------------------------------------------------------------ 7. PONTO NO MAPA (endereço do cliente) O endereço escrito continua a mandar; o mapa é um extra que dá ao motoboy o sítio exacto e à loja a zona de frete certa. ------------------------------------------------------------ */ .local-mapa-ajuda { margin: 0 0 8px; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.45; color: #7A6154; } .local-mapa { width: 100%; height: 210px; border-radius: 16px; border: 1px solid #EDE3D9; background: #F7F1EA; overflow: hidden; } /* O aviso que o mapa.js escreve quando não há chave ou o Google recusa. */ .local-mapa .mapa-aviso { height: 100%; display: grid; place-items: center; gap: 8px; padding: 18px; text-align: center; color: #7A6154; font-size: 12.5px; line-height: 1.5; } .local-mapa .mapa-aviso i { font-size: 20px; color: #A8887A; } .local-mapa-acoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .local-mapa-acoes .local-mapa-btn { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #EDE3D9 !important; border-radius: 999px !important; background: #FFFFFF !important; color: #5C3020 !important; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; } .local-mapa-acoes .local-mapa-btn.is-primary { border-color: #5C3020 !important; background: #5C3020 !important; color: #FFFFFF !important; } .local-mapa-acoes .local-mapa-btn:disabled { opacity: 0.6; cursor: progress; } .local-mapa-acoes .local-mapa-btn[hidden] { display: none !important; } .local-mapa-estado { margin: 9px 0 0; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 11.5px; line-height: 1.45; color: #7A6154; } .local-mapa-estado.is-ok { color: #43533B; font-weight: 600; } .label-opcional { font-weight: 500; opacity: 0.7; } /* Dentro do modal de Minhas Compras o mapa é mais baixo: o cartão já está apertado entre a barra de título e o botão de confirmar. */ .tua-modal .local-mapa { height: 180px; } .tua-modal .local-mapa-campo { margin: 4px 0 2px; } /* ------------------------------------------------------------ 8. ÁREAS DE FRETE (página do gestor) O gestor desenha o contorno de cada bairro em vez de contar com o nome que o cliente escreve. ------------------------------------------------------------ */ .zona-linha { padding: 10px 0; border-top: 1px solid rgba(92, 48, 32, .10); display: grid; gap: 8px; } .zona-linha-topo { display: grid; grid-template-columns: 10px minmax(0, 1fr) 92px; gap: 8px; align-items: center; } /* A cor com que esta zona é desenhada no mapa. É o que liga a linha da tabela ao contorno lá em baixo: com cinco bairros desenhados ao mesmo tempo, sem isto ninguém sabe qual é qual. */ .zona-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--zona-cor, #8b4a2e); } .zona-linha-acoes { display: flex; flex-wrap: wrap; gap: 6px; } .area-mapa { width: 100%; height: 300px; margin-top: 4px; border-radius: 16px; border: 1px solid #EDE3D9; background: #F7F1EA; overflow: hidden; } .area-mapa .mapa-aviso { height: 100%; display: grid; place-items: center; gap: 8px; padding: 18px; text-align: center; color: #7A6154; font-size: 12.5px; line-height: 1.5; } .area-mapa .mapa-aviso i { font-size: 20px; color: #A8887A; } .area-acoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .area-acoes .area-btn { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #EDE3D9 !important; border-radius: 999px !important; background: #FFFFFF !important; color: #5C3020 !important; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; } .area-acoes .area-btn.is-primary { border-color: #5C3020 !important; background: #5C3020 !important; color: #FFFFFF !important; } .area-acoes .area-btn[hidden] { display: none !important; } /* ---------- o cursor do raio da zona de frete ---------- Fica por baixo do mapa e não dentro dele: um cursor por cima do mapa partilha o gesto de arrastar com o próprio mapa, e cada tentativa de abrir o raio saía a mexer o mapa. */ .raio-controlo { margin-top: 12px; padding: 12px 14px; border: 1px solid #EDE3D9; border-radius: 16px; background: #FFFFFF; } .raio-etiqueta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #7A6154; } /* O número tem de ser o que mais se vê: é ele que o gestor lê enquanto arrasta, não a palavra "raio". */ .raio-valor { font-size: 16px; font-weight: 700; color: #5C3020; font-variant-numeric: tabular-nums; } .raio-cursor { width: 100%; margin: 10px 0 0; accent-color: #5C3020; cursor: pointer; } /* Alvo de 28px de altura: o polegar não acerta na linha de 4px que o navegador desenha por omissão. */ .raio-cursor { height: 28px; background: transparent; } .raio-atalhos { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .raio-atalhos .area-btn { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #EDE3D9; border-radius: 999px; background: #FFFFFF; color: #5C3020; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; } .area-estado { margin: 9px 0 0; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 11.5px; line-height: 1.45; color: #7A6154; } .area-estado.is-ok { color: #43533B; font-weight: 600; } #freightOverlapWarn { margin-top: 8px; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(192, 57, 43, .28); background: #FBEDEB; color: #A93428 !important; line-height: 1.45; } #freightOverlapWarn[hidden] { display: none !important; } /* ------------------------------------------------------------ 5. FAIXA DE INSTALAÇÃO DA PWA Vive no fluxo normal do index, logo abaixo do header. Nada de position:fixed — era assim que taparia o primeiro produto. ------------------------------------------------------------ */ .pwa-install-bar { width: 100%; margin: 0 0 16px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; border: 1px solid #EDE3D9; border-radius: 18px; background: #F7EDE3; color: #5C3020; } .pwa-install-bar[hidden] { display: none !important; } .pwa-install-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #EDE3D9; background: #FFFFFF; object-fit: contain; } .pwa-install-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pwa-install-texto strong { font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #5C3020; } .pwa-install-texto span { font-size: 11.5px; line-height: 1.35; color: #7A6154; } .delivery-body .pwa-install-btn, .loja-body .pwa-install-btn, .pwa-install-bar .pwa-install-btn { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border: 0 !important; border-radius: 999px !important; background: #5C3020 !important; color: #FFFFFF !important; font-family: var(--fonte-corpo), 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .pwa-install-bar .pwa-install-btn:disabled { opacity: 0.6; cursor: progress; } .pwa-install-bar .pwa-install-fechar { flex: 0 0 auto; width: 30px; height: 30px; min-width: 30px; display: inline-grid; place-items: center; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #7A6154 !important; font-size: 14px; cursor: pointer; } .pwa-install-bar .pwa-install-fechar:hover, .pwa-install-bar .pwa-install-fechar:focus-visible { outline: none; background: #EDE3D9 !important; } /* Ecrãs estreitos: o texto de apoio sai antes de espremer o botão. */ @media (max-width: 380px) { .pwa-install-texto span { display: none; } .pwa-install-bar { gap: 9px; padding: 9px 10px; } } /* Dentro da app instalada a faixa não faz sentido nenhum. O pwa.js já a esconde; isto garante que nem pisca antes de o script correr. */ @media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) { .pwa-install-bar { display: none !important; } } /* ------------------------------------------------------------ 3. CAMADAS FIXAS vs. BARRA INFERIOR A barra inferior (.tua-bottom-nav) está em z-index 2100 e ocupa os 66px de baixo do ecrã em telemóvel. Tudo o que é fixo em baixo tem de a contornar — ou por cima dela em z-index (modais e folhas), ou acima dela em geometria (barras de acção permanentes). ------------------------------------------------------------ */ /* Uma escala só para tudo o que flutua. O que havia antes: z-index entre 1600 e 25000 espalhados por vinte folhas, e a barra inferior em 2100 — excepto nas dez páginas da loja, onde o loja-v2.css a punha em 5000. Qualquer folha abaixo disso ficava tapada por ela, e em pedidos a lista de motoboys (2200) nascia por baixo da folha de detalhes do pedido (7000). Quatro degraus, e nada fora deles: barra inferior 2100 folhas 3000 primeiro nível popups 3600 o que abre POR CIMA de uma folha confirmações 3800 o "tens a certeza?" de um popup Fica de fora, de propósito: .tp-select-popup (40000, tem de cobrir tudo, incluindo popups) e .image-modal (10000, a foto em ecrã inteiro na página de produto). */ html body[class] .tua-bottom-nav { z-index: var(--tp-z-nav) !important; } html body[class] :is( .bottom-sheet, .sheet-overlay, .sheet-backdrop, .ad-bottom-sheet, .product-options-sheet, .product-picker-sheet, .transfer-product-sheet, .expense-bottom-sheet, .adm-v2-sheet, .cash-products-sheet, .countdown-picker-sheet, .dashboard-sheet-overlay, .period-overlay, .period-modal, .adm-chat-painel ) { z-index: var(--tp-z-sheet) !important; } html body[class] :is( .selection-modal, .modal-overlay, .sale-detail-modal, .tua-inline-modal, .tp-popup-overlay, .welcome-card-overlay, .meta-overlay, .transfer-history-sheet ) { z-index: var(--tp-z-popup) !important; } /* A confirmação abre por cima do popup que a pediu — em pedidos, o "tens a certeza?" nasce com a lista de motoboys ainda aberta. */ html body[class] :is( #confirm-modal, .profile-confirm-modal, .tp-confirm-card, .tua-confirm-overlay ) { z-index: var(--tp-z-confirm) !important; } /* Um popup é um popup: centrado e com os quatro cantos arredondados. O loja-v2.css transformava os da página de pedidos em folhas — encostados em baixo e com os cantos de baixo a direito. */ html body[class] .selection-modal { align-items: center !important; justify-content: center !important; padding: 18px !important; } html body[class] .selection-modal > :is( .selection-modal-content, .delivery-modal-content, .confirm-content ) { width: min(560px, 100%) !important; max-width: min(560px, 100%) !important; margin: 0 auto !important; border-radius: 22px !important; padding-bottom: 0 !important; } /* O punho de arrastar é de folhas. Num popup centrado não serve para nada e ainda sugere que se puxa para baixo para fechar. */ html body[class] .selection-modal .selection-modal-header::before { display: none !important; } /* A barra do carrinho era a única barra de acção permanente sem o desvio: ficava em bottom:0 e z-index 1080, por baixo da barra inferior, e o botão "Continuar" desaparecia em telemóvel. Passa a usar o mesmo desvio de .profile-save-bar e .adm-v2-fab. */ @media (max-width: 768px) { html body.cart-body.has-tua-bottom-nav .cart-bottom-bar { bottom: var(--tp-nav-gap) !important; z-index: 2099 !important; } /* Espaço para a barra + a navegação, senão o último produto da lista fica escondido por baixo das duas. */ html body.cart-body.has-tua-bottom-nav .cart-page-shell { padding-bottom: calc(var(--tp-nav-h) + 168px + env(safe-area-inset-bottom)) !important; } /* Em pagamentos pendentes a barra não existe (regra do carrinho.css) e essa reserva toda deixaria um vazio no fim da lista. */ html body.cart-body.pending-mode.has-tua-bottom-nav .cart-page-shell { padding-bottom: calc(var(--tp-nav-h) + 24px + env(safe-area-inset-bottom)) !important; } } /* ========================================================= Pedido de permissões pós-login (js/permissoes.js) Abre acima de tudo: é a primeira coisa que se vê depois de entrar. ========================================================= */ .tp-permissoes-fundo { position: fixed; inset: 0; z-index: var(--tp-z-confirm); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(28, 14, 8, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s ease; } .tp-permissoes-fundo.is-aberto { opacity: 1; } .tp-permissoes-cartao { width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 20px 18px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(28, 14, 8, 0.35); transform: translateY(14px) scale(0.98); transition: transform 0.22s ease; } .tp-permissoes-fundo.is-aberto .tp-permissoes-cartao { transform: translateY(0) scale(1); } .tp-permissoes-topo { text-align: center; } .tp-permissoes-selo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(92, 48, 32, 0.09); color: var(--marrom, #5c3020); font-size: 1.25rem; } .tp-permissoes-topo h2 { margin: 12px 0 6px; font-family: var(--tp-page-title-font); font-size: 1.2rem; color: var(--marrom, #5c3020); } .tp-permissoes-topo p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--texto-medio, #6b5a52); } .tp-permissoes-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .tp-permissoes-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(92, 48, 32, 0.05); border: 1px solid rgba(92, 48, 32, 0.12); } .tp-permissoes-icone { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: #fff; color: var(--marrom, #5c3020); } .tp-permissoes-texto { font-size: 0.8rem; line-height: 1.45; color: var(--texto-medio, #6b5a52); } .tp-permissoes-texto strong { display: block; margin-bottom: 2px; font-size: 0.87rem; color: var(--texto-escuro, #3b2a22); } .tp-permissoes-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .tp-permissoes-btn { padding: 13px 12px; border: 0; border-radius: var(--tp-pill); font-weight: 900; font-size: 0.88rem; cursor: pointer; } .tp-permissoes-btn.is-primario { background: linear-gradient(135deg, #7a3f26, #5c3020); color: #fff; } .tp-permissoes-btn.is-primario:disabled { opacity: 0.7; cursor: default; } .tp-permissoes-btn.is-secundario { background: rgba(92, 48, 32, 0.08); color: var(--marrom, #5c3020); } .tp-permissoes-link { display: block; margin-top: 12px; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--texto-medio, #6b5a52); text-decoration: underline; } /* ========================================================= Contador do carrinho na barra inferior (js/bottom-nav.js) Só aparece com alguma coisa dentro — um "0" permanente é ruído. ========================================================= */ html body[class] .tua-bottom-nav > a { position: relative; } html body[class] .tua-bottom-nav .tua-nav-conta { position: absolute; top: 2px; left: 50%; margin-left: 3px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; border: 2px solid #fff; background: #c0392b; color: #fff; font-size: 9.5px; font-weight: 900; line-height: 1; pointer-events: none; } /* O `hidden` da folha do browser perde para o `display` acima. */ html body[class] .tua-bottom-nav .tua-nav-conta[hidden] { display: none !important; } /* ========================================================= SEM LIGAÇÃO (js/sem-ligacao.js) Cobre tudo, inclusive a confirmação: se não há rede, não há acção nenhuma por baixo que valha a pena tocar. ========================================================= */ .tp-offline { position: fixed; inset: 0; z-index: calc(var(--tp-z-confirm) + 100); display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 14, 8, 0.94); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.24s ease, visibility 0.24s ease; } .tp-offline.is-aberto { opacity: 1; visibility: visible; } .tp-offline-caixa { width: min(340px, 100%); text-align: center; color: #F7F1EA; transform: translateY(12px); transition: transform 0.26s ease; } .tp-offline.is-aberto .tp-offline-caixa { transform: none; } /* O símbolo: o Wi-Fi com um traço por cima, desenhado com um pseudo-elemento em vez de um ícone próprio — o Font Awesome grátis não traz "wifi-slash". */ .tp-offline-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: rgba(247, 241, 234, 0.08); color: rgba(247, 241, 234, 0.55); font-size: 2.1rem; } .tp-offline-corte { position: absolute; top: 50%; left: 50%; width: 74px; height: 3px; border-radius: 3px; background: #E0645A; box-shadow: 0 0 0 2px rgba(28, 14, 8, 0.94); transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; } .tp-offline.is-aberto .tp-offline-corte { animation: tpOfflineCorta 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } .tp-offline.is-aberto .tp-offline-icone i { animation: tpOfflinePulsa 2.4s ease-in-out infinite; } .tp-offline-caixa h2 { margin: 18px 0 8px; font-family: var(--tp-page-title-font); font-size: 1.35rem; color: #F7F1EA; } .tp-offline-caixa p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(247, 241, 234, 0.72); } .tp-offline-btn { margin-top: 20px; padding: 13px 26px; border: 0; border-radius: var(--tp-pill, 999px); background: #F7F1EA; color: #5C3020; font-size: 0.9rem; font-weight: 900; cursor: pointer; } .tp-offline-btn:disabled { opacity: 0.6; cursor: default; } .tp-offline-nota { margin-top: 12px !important; font-size: 0.76rem !important; color: rgba(247, 241, 234, 0.5) !important; } @keyframes tpOfflineCorta { from { width: 0; opacity: 0; } to { width: 74px; opacity: 1; } } @keyframes tpOfflinePulsa { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.24; } } @media (prefers-reduced-motion: reduce) { .tp-offline, .tp-offline-caixa, .tp-offline .tp-offline-corte, .tp-offline .tp-offline-icone i { animation: none !important; transition: opacity 0.01s linear, visibility 0.01s linear !important; transform: none !important; } .tp-offline-corte { transform: translate(-50%, -50%) rotate(-45deg) !important; } } /* ========================================================= PRODUTO A VOAR PARA O CARRINHO (js/voar-carrinho.js) A cópia vive no em position:fixed: dentro do cartão, qualquer overflow:hidden pelo caminho cortava-a a meio do trajecto. ========================================================= */ .tp-voa-carrinho { position: fixed; z-index: calc(var(--tp-z-confirm) + 50); object-fit: cover; border-radius: 14px; box-shadow: 0 12px 30px rgba(28, 14, 8, 0.28); pointer-events: none; /* Curva com sobreimpulso no início: o produto "salta" antes de partir. */ transition: transform 0.72s cubic-bezier(0.32, 0.8, 0.24, 1), opacity 0.72s ease-in, border-radius 0.72s ease; will-change: transform, opacity; } /* O ícone do carrinho responde à chegada — sem isto, a viagem acaba no vazio. */ .tua-bottom-nav a.tp-carrinho-recebe i, .header-cart-btn.tp-carrinho-recebe i { animation: tpCarrinhoRecebe 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes tpCarrinhoRecebe { 0% { transform: scale(1); } 35% { transform: scale(1.42) rotate(-8deg); } 60% { transform: scale(0.92) rotate(4deg); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .tp-voa-carrinho { display: none !important; } .tua-bottom-nav a.tp-carrinho-recebe i, .header-cart-btn.tp-carrinho-recebe i { animation: none !important; } } /* ========================================================= CAMPOS SEM CLASSE ------------------------------------------------------------ O reset do global.css põe `padding: 0` em tudo, e as regras de campo do sistema são todas por classe (.input, .form-control, .tp-search-input...). Um escrito sem classe nenhuma — como os da página Frete por Zona — fica com a caixa desenhada mas o texto colado à borda esquerda. `:not([class])` é de propósito: não toca em nenhum campo já estilizado. Em particular não toca nos campos de login e cadastro, que são de linha (sem caixa) e têm 2px à esquerda de propósito, para o texto assentar sobre o traço. ========================================================= */ html body[class] :is(input, select, textarea):not([class]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]) { padding: 11px 14px; min-height: 44px; line-height: 1.3; } /* Um