/* ========================================================== PAINEL DE ACESSIBILIDADE Ajustes que a própria pessoa escolhe e o sistema guarda no aparelho: tamanho do texto, contraste, destaque de links e redução de animações. As classes são aplicadas na tag , então valem para a tela inteira, inclusive dentro das janelas. ========================================================== */ /* ---------------- Botão que abre o painel ---------------- */ .botao-acessibilidade { position: fixed; /* Canto ESQUERDO. A direita e o lado das acoes principais — no cardapio e ali que fica o "Ver carrinho" —, e o canto esquerdo deixa o botao longe do caminho de quem esta comprando. Vale so para as telas publicas: nas internas o botao mora na barra de cima, e nem chega a flutuar. */ left: 16px; /* Sobe o suficiente para não ficar atrás do rodapé fixo */ bottom: calc(16px + var(--altura-rodape) + env(safe-area-inset-bottom)); z-index: 1090; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--acai-branco); background: var(--acai-roxo); color: var(--acai-sobre-escuro); font-size: 1.5rem; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(84, 58, 107, .38); transition: transform .15s ease, background .15s ease; } .botao-acessibilidade:hover, .botao-acessibilidade:focus-visible { background: var(--acai-roxo-escuro); color: var(--acai-sobre-escuro); transform: scale(1.06); } /* No cardápio, acima da barra do carrinho e do rodapé */ body.tela-cardapio .botao-acessibilidade { bottom: calc(96px + var(--altura-rodape) + env(safe-area-inset-bottom)); } /* ---------------- Painel ---------------- */ .painel-acessibilidade { position: fixed; /* Alinhado com o botao que o abre, no canto esquerdo */ left: 16px; bottom: calc(80px + var(--altura-rodape) + env(safe-area-inset-bottom)); z-index: 1091; width: min(310px, calc(100vw - 32px)); background: var(--acai-branco); border: 1px solid var(--acai-borda); border-radius: 16px; box-shadow: 0 12px 40px rgba(44, 35, 51, .28); padding: 1rem; display: none; } .painel-acessibilidade.aberto { display: block; } /* Aberto a partir do botão na barra superior: desce do topo. Continua à direita porque é onde está o botão que o abre — nas telas internas o gatilho fica na barra, e não flutuando no canto. */ .painel-acessibilidade.na-barra { top: calc(66px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 16px; } body.tela-cardapio .painel-acessibilidade { bottom: calc(160px + var(--altura-rodape) + env(safe-area-inset-bottom)); } /* No PDV a tela não rola: o painel precisa caber sozinho */ body.tela-pdv .painel-acessibilidade { max-height: calc(100vh - 90px); overflow-y: auto; } .painel-acessibilidade h2 { font-size: 1rem; font-weight: 700; color: var(--acai-roxo-escuro); display: flex; align-items: center; gap: .45rem; margin-bottom: .9rem; } .painel-acessibilidade .grupo { margin-bottom: .95rem; } .painel-acessibilidade .rotulo-grupo { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--acai-texto-suave); margin-bottom: .4rem; } /* Botões de tema: automático, claro e escuro */ .escolha-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; } .escolha-tema button { border: 1px solid var(--acai-borda); background: var(--acai-branco); border-radius: 10px; padding: .55rem .2rem; color: var(--acai-texto); display: grid; gap: .18rem; place-items: center; line-height: 1.1; } .escolha-tema button i { font-size: 1.15rem; } .escolha-tema button span { font-size: .72rem; font-weight: 600; } .escolha-tema button.ativo { background: var(--acai-roxo); border-color: var(--acai-roxo); color: var(--acai-sobre-escuro); } /* Botões de tamanho do texto */ .escala-texto { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; } .escala-texto button { border: 1px solid var(--acai-borda); background: var(--acai-branco); border-radius: 9px; padding: .45rem .2rem; font-weight: 700; color: var(--acai-texto); line-height: 1; } .escala-texto button.ativo { background: var(--acai-roxo); border-color: var(--acai-roxo); color: var(--acai-sobre-escuro); } /* Interruptores */ .opcao-acessibilidade { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--acai-borda); } .opcao-acessibilidade:last-of-type { border-bottom: none; } .opcao-acessibilidade .descricao { font-size: .88rem; line-height: 1.3; } .opcao-acessibilidade .descricao small { display: block; color: var(--acai-texto-suave); font-size: .76rem; } /* ========================================================== AJUSTES APLICADOS PELA PESSOA ========================================================== */ /* --- Tamanho do texto --- O sistema usa medidas relativas, então mudar a base aumenta proporcionalmente textos, botões e espaçamentos. */ html { font-size: 100%; } html.texto-115 { font-size: 115%; } html.texto-130 { font-size: 130%; } html.texto-150 { font-size: 150%; } /* --- Alto contraste --- Preto sobre branco, bordas fortes e roxo escurecido, para quem tem baixa visão ou usa a tela sob sol forte no balcão. */ html.contraste-alto { --acai-roxo: #3F2B52; --acai-roxo-escuro: #2A1C38; --acai-roxo-claro: #5A4173; --acai-roxo-suave: #FFFFFF; --acai-verde: #2F6B00; --acai-verde-escuro: #24520B; --acai-verde-suave: #FFFFFF; --acai-texto: #000000; --acai-texto-suave: #1A1A1A; --acai-borda: #000000; --acai-fundo: #FFFFFF; --bs-body-color: #000000; --bs-body-bg: #FFFFFF; } html.contraste-alto body, html.contraste-alto .card, html.contraste-alto .modal-content, html.contraste-alto .cartao-indicador { background: #FFFFFF; color: #000000; } html.contraste-alto .card, html.contraste-alto .form-control, html.contraste-alto .form-select, html.contraste-alto .btn, html.contraste-alto .cartao-produto, html.contraste-alto .item-cardapio { border: 2px solid #000000 !important; } html.contraste-alto .text-muted, html.contraste-alto small { color: #1A1A1A !important; } html.contraste-alto .badge { border: 1px solid #000000; } /* Some com sombras e degradês, que reduzem o contraste */ html.contraste-alto * { box-shadow: none !important; text-shadow: none !important; } html.contraste-alto .barra-superior, html.contraste-alto .capa-loja, html.contraste-alto .pdv-pedido .cabecalho, html.contraste-alto .tela-login { background: #2A1C38 !important; } /* --- Destaque de links --- Deixa evidente o que é clicável, sem depender só da cor. */ html.links-destacados a:not(.btn) { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600; } html.links-destacados button:not(.btn-close), html.links-destacados .cartao-produto, html.links-destacados .item-cardapio { outline: 2px solid var(--acai-roxo-claro); outline-offset: 1px; } /* --- Sem animação --- Escolha manual, além do que o sistema operacional já informa. */ html.sem-animacao *, html.sem-animacao *::before, html.sem-animacao *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* --- Espaçamento entre letras --- Ajuda na leitura de quem tem dislexia. */ html.leitura-facil body { letter-spacing: .04em; word-spacing: .12em; line-height: 1.75; } html.leitura-facil .nome, html.leitura-facil .form-label, html.leitura-facil label { letter-spacing: .05em; } /* Nada disso aparece na impressão do cupom */ @media print { .botao-acessibilidade, .painel-acessibilidade { display: none !important; } }