/* ============================================================================
IDENTIDADE VISUAL DO EUPHORIA — ponto único de controle
----------------------------------------------------------------------------
Todas as cores, fontes e espaçamentos do site saem daqui. Mudar um valor
nesta lista muda o site inteiro — não é mais preciso editar dezenas de
arquivos.
Antes desta organização: 641 cores escritas na mão, espalhadas por 47
arquivos, com tons repetidos por engano (havia três roxos e dois verdes
quase idênticos).
COMO MEXER: troque só o valor depois dos dois-pontos. Exemplo, pra mudar
o roxo da marca:
--ep-roxo: #9f18d9; -> --ep-roxo: #5b21b6;
========================================================================== */
:root {
/* ========================================================================
ETAPA 1 DO REDESIGN — FUNDAMENTOS DO FIGMA APLICADOS (leva 2, 2026)
Os valores abaixo foram lidos do arquivo "EUPHORIA_NOVA UI", página
"00 - Fundamentos". As cores não foram estimadas de olho: foram medidas
pixel a pixel nas amostras exportadas, então são exatas.
Referência de tamanho: o Figma foi desenhado em frames de 390px
(celular) e 1440px (computador), exportados em 2x. Ou seja, todo
número escrito aqui em px é o número do Figma dividido por 2 —
já convertido, é só usar.
COMO MEXER: troque só o valor depois dos dois-pontos.
====================================================================== */
/* ---------- Cores da marca: roxos ----------
O roxo principal do Figma é EXATAMENTE o mesmo que o site já usava
(#9f18d9). A identidade da marca não mudou de cor. */
--ep-roxo: #9f18d9; /* Figma: "Roxo" (Primária) — inalterado */
--ep-roxo-claro: #9815d0;
--ep-roxo-escuro: #621085; /* Figma: "Roxo Escuro" — ERA #8700c1.
Mudança visível: é o roxo do mouse em
cima dos botões. Ficou bem mais escuro. */
--ep-roxo-profundo: #7a00ae;
--ep-roxo-noturno: #4a148c;
--ep-roxo-quase-preto: #3a0647;
--ep-violeta: #6907f2; /* usado em degradês */
--ep-lilas-claro: #efd9f8; /* Figma: "neutral-4" — pílula/selo claro,
primeiro uso no ConfigPainel (leva 33) */
--ep-lilas-neblina: #fbf2fd; /* Figma: "neutral-2" — fundo de painel
de destaque, mais claro que o lilás
acima. Primeiro uso em /frete (leva 35) */
/* ---------- Cores da marca: verdes e azuis ---------- */
--ep-verde: #07f29c; /* Figma: "Verde" — era #07f19e.
Diferença invisível a olho nu; só
alinha o site ao valor oficial. */
--ep-verde-claro: #00f3a1;
--ep-verde-escuro: #06d18b;
--ep-verde-agua: #1ed9b7;
--ep-turquesa: #01ddb7;
--ep-azul-claro: #ade0e6;
--ep-azul-medio: #58a8c5;
/* ---------- Neutros (os do site, ainda em uso) ----------
ATENÇÃO: estes NÃO foram trocados pela escala de cinzas do Figma.
Motivo: o Figma define uma escala de cinza puro (preto com opacidade),
mas não diz qual cinza é "fundo de página" ou "borda". Trocar às cegas
mudaria o site inteiro sem eu ter como conferir contra o desenho.
Eles serão reapontados tela por tela, conforme cada tela for migrada. */
--ep-branco: #ffffff;
--ep-preto: #000000;
--ep-cinza-100: #f2f2f2; /* fundo de página */
--ep-cinza-200: #eeeeee;
--ep-cinza-300: #dddddd;
--ep-cinza-borda: #d7d7d7; /* bordas e divisores */
--ep-cinza-400: #cccccc;
--ep-cinza-500: #888888;
--ep-cinza-600: #666666;
--ep-cinza-700: #555555;
--ep-cinza-800: #333333;
--ep-cinza-texto: #6c757d; /* textos secundários, legendas */
/* ---------- Escala de cinzas OFICIAL do Figma ----------
"Greyscale": preto (#000000) em cinco opacidades. É esta escala que as
telas novas usam. Está disponível desde já para as telas migradas. */
--ds-cinza-100: #000000; /* 100% */
--ds-cinza-75: #404040; /* 75% */
--ds-cinza-50: #808080; /* 50% */
--ds-cinza-25: #bfbfbf; /* 25% */
--ds-cinza-15: #d9d9d9; /* 15% */
/* ---------- Estados / avisos (valores oficiais do Figma) ---------- */
--ep-sucesso: #00a41f; /* Figma: "Verde Sucesso" — era #28a745 */
--ep-sucesso-claro: #e2fbef; /* fundo de selo/pílula claro — já usado
(sem token) em .inventory-qtd-positivo
e .estoque-massa-aviso--ok; formalizado
aqui na 3ª vez, /orders (leva 36) */
--ep-aviso: #ffba00; /* Figma: "Amarelo" — era #ffc107 */
--ep-aviso-escuro: #b38300; /* Figma: "Dark Amarelo" — novo */
--ep-aviso-claro: #fff6de; /* fundo de selo/pílula claro (ex.: status
"Pendente pagamento" em /orders, leva 36) */
--ep-erro: #ff0000; /* Figma: "Vermelho Erro" — era #ff4d4f */
--ep-erro-escuro: #d9363e; /* sem equivalente no Figma; mantido */
--ep-erro-forte: #e50000; /* sem equivalente no Figma; mantido */
--ep-erro-claro: #ffe2e2; /* fundo de selo/pílula claro — já usado
(sem token) em .inventory-qtd-zero;
formalizado aqui na 2ª vez, /orders
(leva 36) */
--ep-info: #007bff; /* sem equivalente no Figma; mantido */
/* ---------- Papéis (apontam para as cores acima) ----------
Esta parte diz ONDE cada cor é usada. Numa troca de identidade,
às vezes basta reapontar aqui. */
--cor-primaria: var(--ep-roxo);
--cor-primaria-hover: var(--ep-roxo-escuro);
--cor-secundaria: var(--ep-verde);
--cor-fundo: var(--ep-cinza-100);
--cor-fundo-card: var(--ep-branco);
--cor-texto: var(--ep-cinza-800);
--cor-texto-suave: var(--ep-cinza-texto);
--cor-borda: var(--ep-cinza-borda);
/* ---------- Tipografia ----------
O Figma pede duas fontes: "Obviously Wide" (títulos) e "Obviously"
(corpo). As duas JÁ ESTÃO no site, em wwwroot/fonts — não há fonte
nova para comprar nem carregar.
Como funciona aqui: é a mesma família. O peso "bold" carrega o arquivo
Obviously-WideBold; o peso "normal" carrega o Obviously-Regular.
Então "Wide Bold" = font-weight: bold. */
--fonte-titulo: 'Obviously', sans-serif;
--fonte-corpo: 'Obviously', sans-serif;
/* Escala de títulos — sempre em peso bold (o "Wide" do Figma) */
--titulo-1: 60px; /* Headline 1 */
--titulo-2: 52px; /* Headline 2 */
--titulo-3: 44px; /* Headline 3 */
--titulo-4: 36px; /* Headline 4 */
--titulo-5: 28px; /* Headline 5 — é o título de página no celular */
--subtitulo: 22px; /* Subtítulo 1 */
/* Escala de textos — sempre em peso normal */
--corpo-1: 28px;
--corpo-2: 22px;
--texto-peq: 16px;
--legenda: 14px; /* rótulos de campo no celular */
--legenda-2: 12px;
--entrelinha: 1.25; /* 125% em tudo, do maior título à menor legenda */
/* Apelidos antigos, mantidos para nada quebrar caso apareçam por aí */
--texto-xg: var(--titulo-5);
--texto-g: var(--subtitulo);
--texto-m: var(--corpo-2);
--texto-p: var(--texto-peq);
--texto-pp: var(--legenda);
/* ---------- Espaçamento ----------
Figma: múltiplos de 4 — 4, 8, 16, 24, 32, 48, 56, 60, 64. */
--espaco-1: 4px;
--espaco-2: 8px;
--espaco-3: 16px;
--espaco-4: 24px;
--espaco-5: 32px;
--espaco-6: 48px;
--espaco-7: 56px;
--espaco-8: 60px;
--espaco-9: 64px;
/* ---------- Cantos arredondados (Figma — confirmado em 27/07/2026) ---------- */
--canto-botao: 999px; /* botão: 100% arredondado, formato pílula */
--canto-campo: 999px; /* campo de digitação: também pílula */
--canto-card: 16px; /* card, modal e caixas que abrem por cima */
/* Apelidos antigos, mantidos para nada quebrar */
--canto-redondo: 999px;
--canto-p: 4px;
--canto-m: 8px;
--canto-g: var(--canto-card);
/* ---------- Sombras ----------
Figma, "Sombra padrão card": X=0, Y=4, blur 7.6, preto 25%. */
--sombra-card: 0 4px 7.6px rgba(0, 0, 0, 0.25);
--sombra-suave: 0 1px 3px rgba(0, 0, 0, 0.08);
--sombra-media: var(--sombra-card);
--sombra-forte: 0 8px 24px rgba(0, 0, 0, 0.18);
/* ---------- Medidas de layout ----------
Medidas tiradas dos desenhos das 14 telas de celular (frame de 390px).
Confirmadas com você em 27/07/2026. */
/* Margem lateral do conteúdo no celular.
Medi as 14 telas: 40px em 12 delas. */
--margem-lateral: 40px;
/* Exceção: /myorders e /mycoupons foram desenhadas com 24px, porque são
listas de cards com conteúdo denso e precisam de mais largura útil.
Se um dia virar 40 também, é só apagar o uso deste token. */
--margem-lateral-lista: 24px;
/* Largura útil resultante no celular: 390 - 40 - 40 = 310px.
Atenção no iPhone SE (375px de tela): cai para 295px. */
/* Margem lateral do conteúdo no COMPUTADOR (definida em 27/07/2026).
O desenho é feito sobre um frame de 1440px, e a regra combinada é
"110px de margem de cada lado" — o que sobra de conteúdo é 1220px.
Antes a regra era o contrário ("1216px de conteúdo"); agora quem manda
é a margem, porque ela é o que precisa ser respeitado quando a janela
encolhe. */
--margem-lateral-desktop: 110px;
/* Até onde o conteúdo cresce em monitores grandes. É o frame do Figma:
acima de 1440px o bloco inteiro fica centralizado em vez de esticar,
senão a ilustração viraria um painel gigante num monitor de 27". */
--largura-frame-desktop: 1440px;
/* Figma: largura máxima de conteúdo no computador (sobre 1440px).
Continua valendo para as telas que ainda não foram migradas. */
--largura-max-conteudo: 1216px;
--altura-campo: 44px; /* medida no desenho da tela /signin */
--altura-botao: 40px; /* medida no desenho da tela /signin */
}
@font-face {
font-family: 'Obviously';
src: url('fonts/Obviously-WideBold.woff2') format('woff2'), url('fonts/Obviously-WideBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Obviously';
src: url('fonts/Obviously-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
font-family: 'Obviously', sans-serif;
font-style: normal;
}
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: var(--ep-branco);
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid var(--ep-erro-forte);
}
.validation-message {
color: var(--ep-erro-forte);
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
/* =============================================================================
PAINÉIS DE MENU — leva 6b (2026)
=============================================================================
POR QUE ISTO ESTÁ AQUI E NÃO NOS CINCO ARQUIVOS DE MENU:
O site tem CINCO painéis (visitante, cliente, administrador, entregador e o
do hambúrguer) e, até esta leva, cada um repetia as mesmas regras no seu
próprio ".razor.css". Era o mesmo problema que o carrinho tinha antes da
leva 6a: um comportamento só, escrito cinco vezes — e quando um mudava, os
outros ficavam para trás (foi exatamente assim que o painel do cliente
acabou sem altura, corrigido na 6a-c).
Escrito aqui, é uma regra só para os cinco. E some junto a armadilha do
"::deep" da seção 14 do briefing: CSS global não tem escopo, então não há
dúvida sobre qual arquivo manda.
TODAS AS MEDIDAS ABAIXO FORAM MEDIDAS no "Menus.png" do Figma, que veio em
escala 1x (painéis de 431px de largura). Onde o desenho e a decisão de
projeto divergem, o comentário diz qual venceu e por quê.
============================================================================= */
:root {
/* Largura do painel: 390 − 80 de folga à mostra. É a mesma largura da
Nav_Bar, então o menu nasce alinhado com a barra. Usada também no
computador (29/07/2026) — os 431px do desenho original ficavam
grandes demais e pareciam bug ao lado do resto da tela. */
--menu-largura: 310px;
/* Recuo do conteúdo: 40px, mesmo valor no celular e no computador. */
--menu-recuo: var(--margem-lateral); /* 40px */
/* Topo do painel até o título. Medido: 65px nos três painéis. */
--menu-topo: 65px;
/* Canto arredondado do painel: ~56px medidos. É o mesmo canto do card da
ilustração da /signin — não é número novo no projeto. */
--menu-canto: 56px;
/* RITMO DA LISTA: 62px de um item ao seguinte. Bateu exato nos três
painéis desenhados. Como o mínimo de área de toque do projeto é 44px,
cada item ocupa 44 e sobram 18 de vão: 44 + 18 = 62. Assim o ritmo do
desenho e o dedo do cliente cabem no mesmo número. */
--menu-alvo: 44px;
/* VÃO ENTRE ITENS — revisto no teste da 6b (28/07/2026).
No celular o item ocupa 44px (área de toque), então o vão se SOMA aos
12px de folga que a caixa já tem em cima e embaixo do texto.
No computador não há dedo: o item tem a altura natural da linha. */
--menu-vao: 24px;
--menu-vao-desktop: 8px;
/* Botão do painel: 49px medidos, arredondados para 48 (múltiplo de 8 e
acima do mínimo de toque). Largura = a faixa útil do painel. */
--menu-botao-altura: 48px;
/* Largura do painel do CARRINHO no computador (leva 6c, 29/07/2026):
40 de margem + 310 de área útil + 40 de margem = 390. É DIFERENTE de
--menu-largura (310) de propósito — o carrinho carrega cartões de
produto, os menus só uma lista de texto. Ver ai/SPRINT.md. */
--carrinho-largura: 390px;
}
/* ---------- O painel ---------- */
.ep-menu {
position: fixed;
top: 0;
/* O "bottom" é o que faz o painel ir até o fim da janela — a correção da
leva 6a-c, que veio junto para cá. NÃO trocar por "height: 100vh": no
celular o 100vh conta o pedaço escondido atrás da barra de endereço do
navegador e o último item cai atrás dela. */
bottom: 0;
width: var(--menu-largura);
box-sizing: border-box;
z-index: 1000; /* acima da Nav_Bar (30), abaixo dos modais */
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background-color: var(--ep-roxo);
color: var(--ep-branco);
/* A folga do topo respeita o notch quando o site está instalado como app.
A primeira linha é o valor puro, para navegadores sem env(): sem ela, a
declaração inteira seria descartada. */
padding: var(--menu-topo) var(--menu-recuo) var(--espaco-4);
padding: calc(var(--menu-topo) + env(safe-area-inset-top))
var(--menu-recuo)
calc(var(--espaco-4) + env(safe-area-inset-bottom));
overflow-x: hidden;
overflow-y: auto; /* o menu do admin é longo e rola */
visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease, visibility 0.3s;
transition: transform 0.3s ease, visibility 0.3s;
}
/* ABRIR E FECHAR É POR DESLIZAMENTO, NÃO POR LARGURA.
Antes o painel abria animando a largura de 0 até 250px. Funcionava, mas o
texto era espremido durante a animação, porque um bloco de largura 0 quebra
as palavras letra a letra. Deslizando, o painel mantém a largura o tempo
todo e só entra na tela.
As classes "sidebar-open/closed" continuam vindo do SidebarStateService,
sem mudança nenhuma no C#. */
.ep-menu-dir {
right: 0;
border-radius: var(--menu-canto) 0 0 var(--menu-canto);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.ep-menu-esq {
left: 0;
border-radius: 0 var(--menu-canto) var(--menu-canto) 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.ep-menu.sidebar-open,
.ep-menu.sidebar-open-left {
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* CELULAR: o menu do hambúrguer abre pela ESQUERDA (leva 21, 04/08/2026).
Até aqui abria pela DIREITA (leva 6a-c) — o hambúrguer era o último
ícone da direita da Nav_Bar, então o painel abria embaixo do próprio
botão. Como o hambúrguer do celular passou a ficar à esquerda da barra
(mesmo lugar do computador, ver Header.razor), o painel não precisa
mais de um override aqui: a regra padrão de ".ep-menu-esq" já abre pela
esquerda em qualquer tamanho de tela. */
/* FUNDO — o que fecha o menu (e o carrinho) ao clicar fora (28/07 e
29/07/2026).
POR QUE PRECISOU EXISTIR: o MainLayout já tinha um "clique fora fecha",
mas ele NUNCA funcionou. O do App.razor não declara
@rendermode, então o MainLayout é renderizado de forma estática e os
@onclick dele não chegam a virar evento no navegador. Ninguém percebeu
porque cada painel tinha o seu próprio botão de fechar — que saiu nesta
leva, seguindo o desenho.
A correção é uma folha que cobre a tela ATRÁS do painel, dentro de um
componente interativo de verdade (SidebarCategories para os 5 menus,
CarrinhoPainel para o carrinho — a classe é a mesma, global, sem escopo).
Fica em z-index 999: abaixo dos painéis (1000) e acima de todo o resto,
inclusive da Nav_Bar (30) — então, com o painel aberto, o primeiro toque
em qualquer lugar da tela fecha ele, que é o comportamento esperado de
uma gaveta.
ESCURECIMENTO (leva 6c, 29/07/2026): até aqui esta folha não escurecia
nada, por decisão da leva 6b ("o desenho não mostra escurecimento"). A
leva 6c do carrinho traz o escurecimento no desenho e o critério de
aceite pede que valha para os SEIS painéis — não só o carrinho — para o
fundo não ficar claro atrás de um painel e escuro atrás de outro. */
.ep-menu-fundo {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
}
/* ---------- Título do painel ---------- */
.ep-menu-topo {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
gap: var(--espaco-2); /* 8px entre o ícone e o texto (05/08/2026) */
margin-bottom: var(--espaco-4); /* 24 daqui + 24 da lista = 48 medidos */
}
/* O ícone ganhou caixa fixa de 24x24 e centralização própria.
ANTES ele era só um solto: a altura dele vinha da fonte de ícones, que
reserva espaço para descidas de letra que ícone nenhum usa. O resultado era
o ícone assentando alguns pixels fora da linha da palavra ao lado — foi o
"descentralizado" que você viu. Com caixa fixa, o alinhamento não depende
mais da métrica da fonte. */
.ep-menu-icone {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 24px;
height: 24px;
-webkit-flex: 0 0 24px;
flex: 0 0 24px;
color: var(--ep-verde);
font-size: 24px;
line-height: 1;
}
/* A saudação é REGULAR, não negrito — medi a densidade de tinta no desenho
(0.12 contra 0.33 dos itens). O nome também: no site antigo ele era negrito;
no desenho não é. */
/* TAMANHO DO TEXTO: 16px (--texto-peq).
O desenho traz 28px, e foi o que a primeira versão desta leva usou. Você
testou na tela e achou grande demais nos dois tamanhos — decidido em
28/07/2026 baixar para 16px em celular E computador. É o único ponto em que
o menu se afasta do Figma de propósito; vale anotar no arquivo. */
.ep-menu-titulo {
font-size: var(--texto-peq);
font-weight: normal;
line-height: var(--entrelinha);
color: var(--ep-branco);
}
/* Só o título do painel do hambúrguer é verde. "Olá, fulano." é branco. */
.ep-menu-titulo-verde {
color: var(--ep-verde);
}
/* O glifo "ph-list" (hamburguer) fica com o desenho baixo dentro do próprio
quadrado do ícone, mesmo com a caixa de 24x24 centralizada — problema do
desenho da fonte Phosphor, não da nossa centralização. Nudge só neste
ícone; os outros 4 painéis usam ph-user e já ficam certos sem isso. */
.ep-menu-icone.ph-list {
transform: translateY(-2px);
}
/* ---------- Lista de itens ---------- */
.ep-menu-lista {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
gap: var(--menu-vao);
margin-top: var(--espaco-4);
}
.ep-menu-item {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
min-height: var(--menu-alvo); /* área de toque de 44px */
font-size: var(--texto-peq);
/* REGULAR, não negrito (28/07/2026). No desenho os itens são negrito,
mas com o texto menor o negrito ficou pesado demais na tela. */
font-weight: normal;
line-height: var(--entrelinha);
color: var(--ep-branco);
text-align: left;
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
/* O desenho não mostra estado de "mouse em cima" nem de página atual.
Escolhi o verde da marca para os dois — é a única cor que o painel já usa
além do branco, e some se você preferir outra coisa. */
.ep-menu-item:hover,
.ep-menu-item:focus,
.ep-menu-item.active {
color: var(--ep-verde);
}
/* Título de grupo do menu do administrador ("Gerenciamento", "Configurações",
"Entrega"). O desenho não prevê grupos, porque o menu do admin não foi
desenhado. Segui o mesmo tratamento do título "Menu" do hambúrguer: verde e
regular, para separar sem competir com os itens. */
.ep-menu-grupo {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
min-height: var(--menu-alvo);
margin-top: var(--espaco-4);
font-size: var(--texto-peq);
font-weight: normal;
line-height: var(--entrelinha);
color: var(--ep-verde);
}
/* ---------- Botões do painel ---------- */
.ep-menu-botao,
.ep-menu-botao-vazado {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: var(--menu-botao-altura);
box-sizing: border-box;
border-radius: var(--canto-botao); /* pílula */
/* 16px também nos botões, para acompanhar os itens (28/07/2026). */
font-size: var(--texto-peq);
font-weight: normal;
text-decoration: none;
cursor: pointer;
-webkit-transition: 0.2s;
transition: 0.2s;
}
/* ENTRAR (painel do visitante): verde cheio, texto no roxo escuro.
É o mesmo par de cores do botão "Entrar" da /signin. */
.ep-menu-botao {
background-color: var(--ep-verde);
border: none;
color: var(--ep-roxo-escuro);
margin-bottom: var(--espaco-4); /* +24 da lista = 48 até o 1º item */
}
.ep-menu-botao:hover {
background-color: var(--ep-verde-escuro);
color: var(--ep-roxo-escuro);
}
/* SAIR (cliente, admin, entregador): vazado, borda de 1px.
Medi a borda no desenho: é 1px, não 2 — igual à do "Novo por aqui?" da
/signin. */
.ep-menu-botao-vazado {
background: none;
border: 1px solid var(--ep-verde);
color: var(--ep-verde);
margin-top: var(--espaco-7); /* 56px depois do último item */
}
.ep-menu-botao-vazado:hover {
background-color: rgba(7, 242, 156, 0.12);
color: var(--ep-verde);
}
/* ---------- COMPUTADOR ----------
Acima de 1000px muda o aperto da lista (largura do painel é a mesma do
celular desde 29/07/2026 — ver --menu-largura). O TAMANHO DO TEXTO NÃO
MUDA: são 16px nos dois. Até o primeiro teste desta leva o computador
usava os 28px do desenho; ficou grande na tela e foi abandonado nos dois
tamanhos (28/07/2026). */
@media (min-width: 1000px) {
/* No computador não existe dedo: o item perde a altura mínima de 44px e
fica com a altura natural da linha (20px). É por isso que o vão pode
cair para 8px sem os itens colarem — dá 28px de um item ao seguinte. */
.ep-menu-item,
.ep-menu-grupo {
min-height: 0;
}
.ep-menu-lista {
gap: var(--menu-vao-desktop);
}
.ep-menu-grupo {
margin-top: var(--espaco-3);
}
.ep-menu-topo {
gap: var(--espaco-2);
}
}
/* =============================================================================
PAINEL DO CARRINHO — visual novo (leva 6c, 2026)
=============================================================================
O carrinho é a ÚNICA exceção à regra "no celular tudo abre pela direita"
(ver ai/DESIGN_SYSTEM.md): no celular ele é uma folha que sobe de baixo; no
computador é um painel lateral pela direita, na mesma família visual dos
menus (--menu-canto, o fundo escurecido de .ep-menu-fundo), mas com 390px
de largura em vez dos 310 deles — ver o comentário de --carrinho-largura.
Antes desta leva o carrinho era um do Bootstrap (BlazorBootstrap),
travado em Placement.Bottom nos dois tamanhos de tela — nunca existiu painel
lateral no computador. Esta leva substitui o Offcanvas por este painel
próprio porque o Bootstrap não troca de lado sozinho conforme a largura da
janela; o CarrinhoPainel.razor agora controla abertura/fechamento com um
bool, do mesmo jeito que o SidebarStateService já faz para os menus.
O conteúdo (lista de itens e o rodapé roxo) mora em
CartComponent.razor.css; aqui só o "envelope" que desliza. */
.ep-carrinho {
position: fixed;
z-index: 1000; /* mesma camada dos painéis de menu */
box-sizing: border-box;
background-color: var(--ep-branco);
display: flex;
flex-direction: column;
visibility: hidden;
transition: transform 0.3s ease, visibility 0.3s;
/* Sem isto, o bloco roxo do rodapé (que tem só os cantos DE CIMA
arredondados, colado na borda de baixo do painel) pinta por cima do
canto arredondado do painel com um quadrado — no computador isso
"quadrava" visualmente o canto inferior esquerdo, mesmo ele já
pedindo o mesmo raio do canto superior. Recortar pelo formato do
próprio painel resolve de vez, em vez de caçar números. */
overflow: hidden;
/* CELULAR: folha de baixo, largura cheia. Cresce com o conteúdo até
~85% da altura da tela — combinado em 29/07/2026, já que o desenho só
mostra 2 itens e não diz se ela é fixa ou cresce. Passado isso, quem
rola é a lista de dentro (.cart-items, em CartComponent.razor.css); o
rodapé roxo fica sempre visível. */
left: 0;
right: 0;
bottom: 0;
max-height: 85vh;
border-radius: var(--menu-canto) var(--menu-canto) 0 0;
transform: translateY(100%);
}
.ep-carrinho.ep-carrinho-aberto {
visibility: visible;
transform: translateY(0);
}
@media (min-width: 1000px) {
.ep-carrinho {
/* COMPUTADOR: painel lateral pela direita, altura da janela inteira
— igual aos menus, só que 390px em vez de 310. */
left: auto;
top: 0;
width: var(--carrinho-largura);
max-height: none;
border-radius: var(--menu-canto) 0 0 var(--menu-canto);
transform: translateX(100%);
}
.ep-carrinho.ep-carrinho-aberto {
transform: translateX(0);
}
}
/* ---------- Cabeçalho: seta "<" + título centralizado ---------- */
.ep-carrinho-topo {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
/* Folga de baixo reduzida (29/07/2026): somada ao padding de cima da
lista de cards (.cart-items, em CartComponent.razor.css), o título
"Carrinho" ficava longe demais do primeiro cartão no teste. */
padding: var(--menu-topo) var(--margem-lateral) var(--espaco-2);
padding-top: calc(var(--menu-topo) + env(safe-area-inset-top));
}
.ep-carrinho-voltar {
display: flex;
align-items: center;
justify-content: center;
width: 44px; /* área de toque mínima do projeto */
height: 44px;
margin-left: -10px; /* ícone de 24px centralizado nos 44px de toque, sem empurrar a borda visual dos 40px de margem */
background: none;
border: none;
color: var(--ep-roxo);
font-size: 24px;
cursor: pointer;
}
.ep-carrinho-titulo {
position: absolute;
left: 0;
right: 0;
text-align: center;
font-size: var(--texto-peq); /* 16px — mesmo tamanho dos itens de menu */
font-weight: bold;
color: var(--ep-roxo);
pointer-events: none; /* não roubar o clique do botão de voltar, que fica embaixo no DOM */
}
@media (max-width: 999.98px) {
/* Pedido do dono: no celular, título/seta mais colados no topo (24px
de vão, em vez dos 65px de --menu-topo compartilhado com os outros
4 painéis de menu) — libera mais espaço pro conteúdo do carrinho
logo abaixo. Só o celular muda; o computador continua com
--menu-topo, igual aos outros painéis. */
.ep-carrinho-topo {
padding-top: calc(24px + env(safe-area-inset-top));
}
}
/* ---------- Corpo: quem rola é a lista; o rodapé roxo não ---------- */
.ep-carrinho-corpo {
flex: 1;
min-height: 0; /* sem isto o flex item não encolhe e o overflow do filho não funciona */
display: flex;
flex-direction: column;
}
/* =============================================================================
GRADE DE MODELOS — leva 21 (2026)
=============================================================================
POR QUE ISTO SAIU DO Model.razor.css: a leva 21 fez a /models/sale
(PromotionModels.razor) reaproveitar o MESMO visual da /models/{id}
(Sprint 08). CSS de escopo do Blazor só vale para o arquivo onde o
ELEMENTO está escrito — se as duas telas usam as classes "models-*", mas
o CSS morasse só em Model.razor.css, a PromotionModels.razor renderizaria
sem estilo nenhum. Mesmo raciocínio da leva 6b (painéis de menu).
Nada mudou no CSS em si — só o endereço. Documentação de cada regra
continua a mesma de quando foi medida na Sprint 08.
============================================================================= */
.models-pagina {
background-color: var(--ep-verde);
min-height: 100vh;
padding-left: var(--margem-lateral);
padding-right: var(--margem-lateral);
padding-bottom: var(--espaco-6);
}
/* ---------- Banner do título ---------- */
.models-hero {
background-color: var(--ep-roxo);
border-radius: 0 0 56px 56px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: var(--espaco-4);
padding-left: var(--margem-lateral);
padding-right: var(--margem-lateral);
padding-bottom: var(--espaco-6);
/* Sobe por baixo da Nav_Bar fixa (backlog 5.8) — mesma técnica do
CategoriaHero/brend-hero. */
margin-top: calc(-1 * (max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-4)));
padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-4) + var(--espaco-3));
}
.models-caminho {
display: block;
text-align: left; /* alinhado com a Nav_Bar, não centralizado com o título */
min-height: 1em; /* reserva a linha mesmo sem categoria carregada ainda */
font-size: var(--legenda); /* 14px — não muda no computador */
/* Segunda camada de recuo da Nav_Bar — ver o comentário equivalente em
Brend.razor.css (.brend-caminho): a pílula fica a --margem-lateral
da borda, e o conteúdo de dentro dela tem mais --espaco-4 (24px)
de padding próprio. Sem isso o "<" alinhava só com a borda da
pílula, não com o que aparece dentro dela. */
padding-left: var(--espaco-4);
}
.models-caminho a {
color: var(--ep-branco);
text-decoration: none;
font-family: var(--fonte-corpo);
}
.models-caminho a:hover {
text-decoration: underline;
}
.models-titulo {
font-family: var(--fonte-titulo);
font-weight: bold;
font-size: var(--titulo-4); /* 36px — leva 21: pedido do dono, era --titulo-3 (44px) */
line-height: var(--entrelinha);
color: var(--ep-branco);
text-align: center; /* centralizado na página, não à esquerda como o caminho */
margin: 0;
}
/* ---------- Grade de modelos ---------- */
/* flex, não grid: com colunas 1fr, uma linha incompleta (menos modelos
que colunas) preenche da esquerda e sobra vazio à direita. Com flex +
wrap, "justify-content:center" centraliza de verdade — pedido do dono,
testado primeiro em /brend e /models. */
.models-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--espaco-6);
}
.models-card {
position: relative;
background-color: var(--ep-roxo);
border-radius: 25px;
height: 304px; /* igual ao cartão de categoria/marca — decisão do dono:
o Figma mede 290px, mas manter 304 evita mais uma
variável (diferença de 14px) */
width: 100%; /* celular: 1 coluna */
margin-top: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: var(--espaco-5);
cursor: pointer;
overflow: visible;
transition: filter .15s, transform .15s ease;
}
.models-card:hover {
filter: brightness(1.08);
transform: scale(1.03);
}
/* Leva 21: mesmo efeito de /category e /brend — a foto sobe um pouco
além do zoom do cartão inteiro. Junta com o "translateX(-50%)" de
sempre, senão a foto perde a centralização. */
.models-card:hover .models-card-imagem {
transform: translate(-50%, -10px);
}
/* Modelo sem estoque — mantém funcionando, sem desenho no Figma: apagado
e sem clique, mesmo raciocínio do card antigo (.card-inactive). */
.models-card-inativo {
cursor: default;
filter: grayscale(100%) opacity(0.6);
}
.models-card-inativo:hover {
filter: grayscale(100%) opacity(0.6);
transform: none; /* sem clique, sem zoom também */
}
.models-card-imagem {
position: absolute;
bottom: 104px;
left: 50%;
transform: translateX(-50%);
height: 250px; /* ajustado no teste ao vivo */
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
transition: transform .15s ease; /* leva 21: acompanha o hover abaixo */
}
.models-card-imagem img {
max-height: 100%;
width: auto;
object-fit: contain;
}
.models-card-nome, .models-card-preco {
position: relative;
z-index: 1;
color: var(--ep-branco);
font-family: var(--fonte-corpo);
font-size: 20px; /* medido no Figma — sem token correspondente (--corpo-2 é 22px) */
line-height: var(--entrelinha);
text-align: center;
}
.models-card-nome {
font-weight: normal;
}
.models-card-preco {
font-weight: bold; /* Wide Bold — pedido do dono no teste */
}
/* Etiqueta de promoção — estilo inventado (não desenhado no Figma), a
partir do resto da identidade visual do site. Anotado para ajustar no
teste ao vivo. */
.models-desconto {
position: absolute;
top: var(--espaco-3);
right: var(--espaco-3);
z-index: 2;
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
font-family: var(--fonte-corpo);
font-weight: bold;
font-size: var(--legenda-2); /* 12px */
border-radius: var(--canto-botao);
padding: var(--espaco-1) var(--espaco-2);
}
.models-vazio {
text-align: center;
padding: var(--espaco-6) 0;
}
.models-vazio h3 {
color: var(--ep-roxo-escuro);
margin-top: var(--espaco-3);
}
.models-carregando {
display: flex;
justify-content: center;
padding: var(--espaco-6) 0;
}
/* ============================================================================
COMPUTADOR
========================================================================== */
@media (min-width: 1000px) {
.models-pagina {
padding-left: var(--margem-lateral-desktop);
padding-right: var(--margem-lateral-desktop);
}
.models-hero {
padding-left: var(--margem-lateral-desktop);
padding-right: var(--margem-lateral-desktop);
padding-bottom: 80px;
margin-bottom: 64px;
margin-top: calc(-1 * (var(--espaco-4) + 62px + var(--espaco-4)));
padding-top: calc(var(--espaco-4) + 62px + var(--espaco-4) + var(--espaco-3));
}
.models-titulo {
font-size: var(--titulo-1); /* 60px — medido no Figma (computador) */
}
/* No computador o padding interno da pílula da Nav_Bar é --espaco-5
(32px), não --espaco-4 (24px) — ver Header.razor.css. */
.models-caminho {
padding-left: var(--espaco-5);
}
.models-grid {
gap: var(--espaco-5); /* 32px */
}
.models-card {
width: calc((100% - 3 * var(--espaco-5)) / 4);
}
}
/* ============================================================================
MODAIS DE CADASTRO DO ADMIN (visual novo) — Categoria/Marca/Modelo/Sabor
============================================================================
O do BlazorBootstrap desenha seu próprio cabeçalho (título + X)
por fora do arquivo que o declara — CSS isolado (::deep) não alcança essa
parte, só uma regra global. Presa à classe "cadastro-modal-wrapper"
(parâmetro Class do ) pra não afetar as outras modais do site, que
continuam usando o cabeçalho padrão (ex.: "Loja fechada!"). */
.cadastro-modal-wrapper .modal-header,
.cadastro-modal-wrapper .btn-close {
display: none;
}
.cadastro-modal-wrapper .modal-content {
border: none;
border-radius: var(--canto-card);
box-shadow: var(--sombra-card);
}
.cadastro-modal-wrapper .modal-body {
padding: 0;
}
/* Centraliza verticalmente — o do BlazorBootstrap não tem parâmetro
pra isso (só existe IsScrollable); mesma regra que o Bootstrap usa na
classe ".modal-dialog-centered", aplicada aqui porque não dá pra garantir
que o parâmetro Class do coloca essa classe certinho no lugar. */
.cadastro-modal-wrapper.modal-dialog,
.cadastro-modal-wrapper .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
/* Modal de checkout do admin (Ver detalhes, Orders.razor/OrdersFinish.razor)
— no celular ela colava nas bordas da tela, sem sobrar fundo escuro pra
clicar fora e fechar. A regra antiga vivia no CSS isolado do
OrderComponent (não alcança o .modal-dialog de verdade — mesmo problema
do item 1 do LESSONS.md). Só o celular ganha margem aqui; o tamanho do
computador já estava bom (confirmado com o dono).
Achado leva 38: o comentário acima já dizia "só o celular", mas a regra
valia pra qualquer tamanho de tela — margem FIXA nos dois lados substitui
o "margin: auto" que o Bootstrap usa pra centralizar a modal, então no
computador ela parava de ficar centralizada (a "Liberar entrega" ficou
grudada na esquerda). Preso ao mesmo ponto de corte de 1000px do resto
do projeto, sem tocar no comportamento do celular. */
@media (max-width: 999px) {
.custom-modal-size.modal-dialog,
.custom-modal-size .modal-dialog {
margin-left: var(--espaco-4);
margin-right: var(--espaco-4);
}
}
/* Modal do checkout do admin (OrderComponent, leva 36) — modal PRÓPRIA,
separada da "custom-modal-size" de cima (que o PlansComponent/"Liberar"
ainda usa), porque só esta precisa do cabeçalho escondido + X próprio.
Mesma receita da cadastro-modal-wrapper (item 1 do LESSONS.md: o
cabeçalho do nasce fora do arquivo que o declara, só regra
global alcança). */
.admincheckout-modal-wrapper .modal-header,
.admincheckout-modal-wrapper .btn-close {
display: none;
}
.admincheckout-modal-wrapper .modal-content {
border: none;
border-radius: var(--canto-card);
box-shadow: var(--sombra-card);
}
.admincheckout-modal-wrapper .modal-body {
padding: 0;
}
.admincheckout-modal-wrapper.modal-dialog,
.admincheckout-modal-wrapper .modal-dialog {
margin-left: var(--espaco-4);
margin-right: var(--espaco-4);
}
@media (min-width: 1000px) {
/* Centraliza vertical E horizontalmente no computador (pedido do
dono) — o do BlazorBootstrap não tem parâmetro pra isso. */
.admincheckout-modal-wrapper.modal-dialog,
.admincheckout-modal-wrapper .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
}