/* ====================================================================== ESTILO VIDRO (plano 27/09 — docs/PLANO-VISUAL-VIDRO-2026-09-27.md) Opcional por usuário: só vale com . Regra da casa: VIDRO NA MOLDURA (topo, cartões de número, avisos, menus, pílulas do PDV), SÓLIDO NO CONTEÚDO (tabelas, formulários, carrinho) — vidro atrás de texto corrido cansa a vista no balcão. Os tokens antigos (--kinpaku etc.) ganham valores novos aqui, então as telas que já usam tokens mudam sozinhas; o que está escrito à mão nas telas fica para a varredura (item 7 do plano). ====================================================================== */ :root[data-estilo="vidro"] { --bg: #F3F2EE; --surface: rgba(255, 255, 255, .95); /* sólido: conteúdo */ --surface-2: rgba(240, 239, 234, .95); --ink: #1B1A17; --muted: #5F5D55; --rule: rgba(27, 26, 23, .12); --kinpaku: #FFDD00; /* amarelo do logo = ação */ --kinpaku-deep: #7A5B00; /* amarelo escuro legível como texto */ --kinpaku-vein: rgba(230, 190, 0, .45); --patina: #157A3E; /* ok / subiu */ --patina-pale: rgba(21, 122, 62, .12); --vermilion: #C62D23; /* erro / caiu */ --vermilion-pale: rgba(198, 45, 35, .10); --font: "Figtree", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif; --font-display: var(--font); --vidro: rgba(255, 255, 255, .58); /* moldura translúcida */ --vidro-linha: rgba(255, 255, 255, .85); --vidro-sombra: 0 8px 24px rgba(60, 50, 20, .08), inset 0 1px 0 rgba(255, 255, 255, .9); --cartao-sombra: 0 1px 2px rgba(60, 50, 20, .05), 0 8px 24px rgba(60, 50, 20, .05); --desfoque: blur(18px) saturate(1.5); --brilho: radial-gradient(60% 50% at 8% 0%, rgba(255, 221, 0, .45), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(255, 170, 60, .28), transparent 70%), radial-gradient(40% 40% at 70% 20%, rgba(120, 200, 255, .20), transparent 70%); } :root[data-estilo="vidro"][data-theme="dark"] { --bg: #0C0C0B; --surface: rgba(24, 24, 22, .94); --surface-2: rgba(36, 36, 33, .94); --ink: #F3F2EE; --muted: #A9A79E; --rule: rgba(255, 255, 255, .10); --kinpaku-deep: #E6C200; --kinpaku-vein: rgba(255, 221, 0, .35); --patina: #4ADE80; --patina-pale: rgba(74, 222, 128, .14); --vermilion: #FF7A6E; --vermilion-pale: rgba(255, 100, 80, .16); --vidro: rgba(34, 33, 30, .55); --vidro-linha: rgba(255, 255, 255, .09); --vidro-sombra: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); --cartao-sombra: 0 8px 24px rgba(0, 0, 0, .25); --brilho: radial-gradient(60% 50% at 8% 0%, rgba(255, 221, 0, .22), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(255, 140, 40, .16), transparent 70%), radial-gradient(40% 40% at 70% 20%, rgba(90, 160, 255, .12), transparent 70%); } /* Modo leve (manual no menu, ou ligado sozinho quando a tela engasga — ver medidor em base.html) e navegador sem suporte a desfoque: a moldura vira sólida e o brilho some. Mesmas cores e formas — só sai o que pesa na placa de vídeo. NÃO obedece `prefers-reduced-transparency` de propósito (decisão do Arthur, 27/09): o Windows com "Efeitos de transparência" desligado mandava esse aviso, e quem LIGOU o vidro no menu via tudo sem brilho, achando que não tinha funcionado. A escolha explícita da pessoa vale mais. */ :root[data-estilo="vidro"][data-leve] { --vidro: var(--surface); --desfoque: none; --brilho: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-estilo="vidro"] { --vidro: var(--surface); } } /* fundo: o brilho mora numa camada FIXA própria (::before) — o navegador a pinta uma vez e só desliza o conteúdo por cima; `background-attachment: fixed` no body repintaria a cada rolagem, que é o que pesa em notebook. */ /* A cor lisa vai no e o body fica transparente: com a cor no body, o navegador a pinta POR CIMA da camada do brilho (z-index -1) e o fundo colorido some — foi o que a primeira prova em tela mostrou. */ :root[data-estilo="vidro"] { background: var(--bg); } :root[data-estilo="vidro"] body { background: transparent; } :root[data-estilo="vidro"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--brilho); } :root[data-estilo="vidro"] ::selection { background: rgba(255, 221, 0, .45); } /* moldura de vidro: topo, menus, cartões de número, avisos, pílulas do PDV */ :root[data-estilo="vidro"] header.topo, :root[data-estilo="vidro"] .nav-menu, :root[data-estilo="vidro"] .dash-kpis > .painel, :root[data-estilo="vidro"] button.pill, :root[data-estilo="vidro"] #caixa-aviso [role="status"], :root[data-estilo="vidro"] #dre-aviso > div > div { background: var(--vidro) !important; /* os avisos trazem cor inline */ border: 1px solid var(--vidro-linha) !important; box-shadow: var(--vidro-sombra); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); } /* Topo em pílula flutuante. A ALTURA TOTAL continua 54px (8 de margem + 46 de pílula): a tela fixa do PDV desconta exatamente 54px do topo. */ :root[data-estilo="vidro"] header.topo { top: 8px; margin: 8px 16px 0; height: 46px; border-radius: 999px; padding: 0 10px 0 18px; } :root[data-estilo="vidro"] .wordmark .marca-pin { height: 28px; } :root[data-estilo="vidro"] header .nav a, :root[data-estilo="vidro"] .nav-trigger { padding: 7px 12px; border-bottom: 0; border-radius: 999px; } :root[data-estilo="vidro"] header .nav a.ativo, :root[data-estilo="vidro"] .nav-trigger.ativo { background: var(--kinpaku); color: #1B1A17; } :root[data-estilo="vidro"] .nav-menu { top: calc(100% + 8px); border-radius: 14px; } :root[data-estilo="vidro"] header .nav .nav-menu a { border-radius: 8px; padding: 9px 12px; } :root[data-estilo="vidro"] header .nav .nav-menu a.ativo, :root[data-estilo="vidro"] .loja-opcao.ativa { background: rgba(255, 221, 0, .28); color: var(--ink); } :root[data-estilo="vidro"] .menu-acao { border-radius: 8px; } :root[data-estilo="vidro"] .tema-btn { border-color: var(--rule); background: transparent; border-radius: 50%; } @media (max-width: 920px) { :root[data-estilo="vidro"] header .nav { top: 52px; border-radius: 18px; background: var(--surface); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); } :root[data-estilo="vidro"] .nav-menu { background: transparent !important; border: 0 !important; box-shadow: none; } } /* avisos do topo: cantos e o vermelho do caixa vencido continua vermelho */ :root[data-estilo="vidro"] #caixa-aviso [role], :root[data-estilo="vidro"] #dre-aviso > div > div { border-radius: 12px !important; } /* conteúdo sólido, com cantos e sombra suave */ :root[data-estilo="vidro"] .painel, :root[data-estilo="vidro"] .form-card { border-radius: 18px; box-shadow: var(--cartao-sombra); } :root[data-estilo="vidro"] table { border-radius: 14px; } :root[data-estilo="vidro"] input, :root[data-estilo="vidro"] select, :root[data-estilo="vidro"] textarea, :root[data-estilo="vidro"] button { border-radius: 10px; } :root[data-estilo="vidro"] input:focus, :root[data-estilo="vidro"] select:focus, :root[data-estilo="vidro"] textarea:focus { border-color: #E0C200; box-shadow: 0 0 0 3px rgba(255, 221, 0, .45); } :root[data-estilo="vidro"] .btn-primario { color: #1B1A17; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .10); } :root[data-estilo="vidro"] .btn-primario:hover { background: #F2D000; color: #1B1A17; } :root[data-estilo="vidro"] button.pill { border-radius: 999px; } :root[data-estilo="vidro"] .tag, :root[data-estilo="vidro"] .badge-sim, :root[data-estilo="vidro"] .badge-modo { border-radius: 999px; } :root[data-estilo="vidro"] .tag-st { background: rgba(255, 221, 0, .30); color: var(--ink); } :root[data-estilo="vidro"] .erros, :root[data-estilo="vidro"] .resultado-ok, :root[data-estilo="vidro"] .resultado-erro, :root[data-estilo="vidro"] .pos-confirmar, :root[data-estilo="vidro"] .pos-autorizar, :root[data-estilo="vidro"] .cons-atual { border-radius: 14px; } :root[data-estilo="vidro"] .item-busca, :root[data-estilo="vidro"] .pos-desc-toggle label, :root[data-estilo="vidro"] .blocos .bloco { border-radius: 10px; } :root[data-estilo="vidro"] .blocos .bloco.ativo { background: rgba(255, 221, 0, .28); } /* PDV: o amarelo fica no que se aperta; o total volta para a tinta cheia (amarelo escuro como texto grande parecia sujo ao lado do botão amarelo) */ :root[data-estilo="vidro"] .pos-subtotal .valor, :root[data-estilo="vidro"] .pos-confirmar-valor .valor { color: var(--ink); } /* número em letra de corpo não pode sair fino: a Figtree começa em 400, e os pesos 300 da fonte antiga viram 600 aqui */ :root[data-estilo="vidro"] .dash-kpi-valor, :root[data-estilo="vidro"] .totais .total, :root[data-estilo="vidro"] .pos-contador .valor, :root[data-estilo="vidro"] .pos-fim-cerimonia .valor { font-weight: 600; letter-spacing: -.02em; } /* modal: painel sólido (tem formulário e tabela), fundo da página borrado */ :root[data-estilo="vidro"] .modal-painel { border-radius: 18px; box-shadow: var(--cartao-sombra); } :root[data-estilo="vidro"] .modal::backdrop { background: rgba(20, 18, 10, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } :root[data-estilo="vidro"][data-leve] .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } @media print { :root[data-estilo="vidro"] body::before { display: none; } }