/* ===================================================================== 4Menu — Menu público (cliente final). Mobile-first. A cor do estabelecimento entra via variável --tema (inline no ). ===================================================================== */ :root { --tema: #FF6B35; } /* Barra de scroll fina e moderna. */ * { scrollbar-width: thin; scrollbar-color: #c7ccd6 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #c7ccd6; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #a7aebc; } ::-webkit-scrollbar-corner { background: transparent; } * { box-sizing: border-box; } body.menu { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; background: #f6f7f9; color: #4e5658; -webkit-font-smoothing: antialiased; } /* ---------- Cabeçalho ---------- */ .menu__topo { color: #fff; padding: 32px 20px 44px; text-align: center; border-radius: 0 0 24px 24px; } .menu__topo--capa { padding-top: 44px; padding-bottom: 50px; } .menu__logo-link { display: inline-block; line-height: 0; margin-bottom: 14px; } .menu__logo { height: 72px; border-radius: 14px; background:#fff; padding:6px; display: block; } .menu__nome { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.4px; text-shadow: 0 1px 4px rgba(0,0,0,.15); } .menu__idiomas { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .chip { display: inline-block; padding: 8px 17px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .5px; backdrop-filter: blur(4px); } .chip--ativo { background: #fff; color: var(--tema); } /* ---------- Tabs ---------- */ .menu__tabs { display: flex; gap: 14px; justify-content: center; max-width: 720px; margin: -22px auto 0; padding: 0 16px; } .tab { flex: 1; min-width: 0; text-align: center; text-decoration: none; background: #fff; color: #6b7280; font-weight: 700; padding: 16px 14px; border-radius: 14px; box-shadow: 0 4px 14px rgba(16,24,40,.10); display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; } .tab--ativa { color: var(--tema); box-shadow: 0 6px 20px rgba(16,24,40,.16); } .tab i { font-size: 18px; } /* Mobile: tabs compactos (ícone em cima, texto pequeno em baixo) — 4 numa linha sem scroll horizontal. */ @media (max-width: 560px) { .menu__tabs { gap: 7px; } .tab { flex-direction: column; gap: 4px; padding: 11px 4px; font-size: 11.5px; letter-spacing: .2px; border-radius: 13px; } .tab i { font-size: 19px; } } /* ---------- Conteúdo ---------- */ .menu__conteudo { max-width: 720px; margin: 28px auto; padding: 0 16px 44px; } /* Com módulo de topo (ex.: horário), o espaço acima/abaixo do selo fica igual (controlado pela margem do próprio selo), sem somar a margem do conteúdo. */ .menu__topo-modulos:not(:empty) + .menu__conteudo { margin-top: 0; } .categoria { margin-bottom: 28px; } .categoria__titulo { font-size: 18px; font-weight: 800; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--tema); display: flex; align-items: center; gap: 8px; } .categoria__titulo i { color: var(--tema); } .item { display: flex; align-items: flex-start; gap: 14px; background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(16,24,40,.06); } .item__info { flex: 1 1 auto; min-width: 0; text-align: left; } .item__titulo { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; } .item__desc { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.45; } /* Coluna direita: foto (maior) + preço por baixo */ .item__media { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 108px; } .item__img { width: 108px; height: 108px; object-fit: cover; border-radius: 12px; } .item__preco { font-weight: 800; color: var(--tema); white-space: nowrap; font-size: 16px; text-align: center; } .item--clicavel { cursor: pointer; transition: transform .1s, box-shadow .15s; } .item--clicavel:hover { box-shadow: 0 4px 14px rgba(16,24,40,.12); } .item--clicavel:active { transform: scale(.99); } .item__alergenos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } /* ---------- Modal de item ---------- */ .item-modal { position: fixed; inset: 0; display: none; z-index: 100; } .item-modal.aberto { display: block; } .item-modal__fundo { position: absolute; inset: 0; background: rgba(15,23,42,.55); } .item-modal__caixa { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; padding: 22px; box-shadow: 0 -8px 30px rgba(0,0,0,.2); animation: subir .22s ease; } @media (min-width: 560px) { .item-modal__caixa { bottom: 50%; transform: translate(-50%, 50%); border-radius: 18px; } } @keyframes subir { from { transform: translate(-50%, 20px); opacity: .6; } } .item-modal__x { position: absolute; top: 12px; right: 14px; border: 0; background: #f1f3f6; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; color: #6b7280; } .item-modal__img { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; } .item-modal__titulo { margin: 0 0 4px; font-size: 20px; font-weight: 800; padding-right: 40px; } .item-modal__preco { color: var(--tema); font-weight: 800; font-size: 18px; margin-bottom: 10px; } .item-modal__desc { color: #4b5563; margin: 0 0 12px; line-height: 1.5; } .item-modal__alerg { display: flex; flex-wrap: wrap; gap: 6px; } .alergeno-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-size: 11px; font-weight: 600; } .menu__vazio { text-align: center; color: #9ca3af; padding: 40px 0; } /* ---------- PDF ---------- */ .pdf-wrap { display: flex; flex-direction: column; gap: 14px; } .pdf-viewer { width: 100%; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; } .pdf-pagina { width: 100%; height: auto; display: block; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.10); } .pdf-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: #6b7280; font-weight: 600; } .pdf-spin { width: 22px; height: 22px; border: 3px solid #e5e7eb; border-top-color: var(--tema); border-radius: 50%; animation: pdfgira 1s linear infinite; } @keyframes pdfgira { to { transform: rotate(360deg); } } .menu__download { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: var(--tema); color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 12px; font-weight: 700; } /* ---------- Botão Google Reviews ---------- */ .menu__google { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 26px auto 0; max-width: 320px; background: #fff; color: #4e5658; text-decoration: none; padding: 13px 20px; border-radius: 12px; font-weight: 700; border: 1px solid var(--linha, #e5e7eb); box-shadow: 0 1px 3px rgba(16,24,40,.08); } .menu__google i { color: #f59e0b; font-size: 18px; } .menu__google:active { transform: scale(.99); } /* ---------- Rodapé ---------- */ .menu__rodape { text-align: center; padding: 24px 16px; color: #9ca3af; font-size: 12.5px; } .menu__rodape span { opacity: .8; } /* ============ Navegação avançada (Business): categorias → subcategorias ============ */ .menu-nav__landing { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; } .cat-botao { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 20px; background: #fff; color: var(--tema); border: 1.5px solid var(--tema); border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, transform .06s; } .cat-botao:hover { background: var(--tema); color: #fff; } .cat-botao:active { transform: scale(.99); } .cat-botao [class^="icon-"] { font-size: 18px; } .cat-vista__topo { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; margin-bottom: 6px; border-bottom: 1px solid #eef0f3; } .cat-voltar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--tema); font-family: inherit; font-size: 14px; font-weight: 700; padding: 6px 4px; } .cat-vista__titulo { margin: 0; font-size: 18px; font-weight: 800; color: #1f2937; } .subcat-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subcat-tabs::-webkit-scrollbar { display: none; } .subcat-tab { flex: 0 0 auto; padding: 8px 16px; background: #f2f4f7; color: #4b5563; border: 0; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; } .subcat-tab.ativa { background: #1f2937; color: #fff; } .subcat-bloco { display: block; } /* Subcategorias como secções sempre visíveis (scroll) */ .subcat-grupo { margin-top: 22px; } .subcat-grupo:first-child { margin-top: 4px; } .subcat-titulo { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 8px; border-bottom: 1px solid #eef0f3; } /* ============ Separador Info (contactos, redes, apresentação) ============ */ .info-bloco { display: flex; flex-direction: column; gap: 20px; background: #fff; border-radius: 16px; padding: 18px; border: 1px solid #edeff2; box-shadow: 0 1px 3px rgba(16,24,40,.05); } .info-mapa { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #eef0f3; } .info-mapa iframe { display: block; width: 100%; height: 200px; border: 0; } .info-mapa__abrir { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--tema); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(16,24,40,.15); } .info-nome { margin: 0 2px; font-size: 21px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .6px; line-height: 1.2; } .info-lista { display: flex; flex-direction: column; } .info-linha { display: flex; align-items: center; gap: 15px; padding: 14px 2px; border-bottom: 1px solid #f1f3f6; } .info-linha:first-child { padding-top: 0; } .info-linha:last-child { border-bottom: 0; padding-bottom: 0; } .info-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #6b7280; font-size: 18px; } .info-rot { color: #9ca3af; font-size: 12px; font-weight: 500; margin-bottom: 1px; } .info-val { color: #1f2937; font-size: 15px; font-weight: 600; word-break: break-word; text-decoration: none; } a.info-val { color: #1f2937; } a.info-val:hover { color: var(--tema); } .info-copiar { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: #9ca3af; font-size: 18px; padding: 8px; } .info-copiar:hover { color: var(--tema); } .info-acao { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff3ec; color: var(--tema); font-size: 18px; text-decoration: none; transition: background .15s, color .15s, transform .06s; } .info-acao:hover { background: var(--tema); color: #fff; } .info-acao:active { transform: scale(.94); } .info-social { display: flex; flex-wrap: wrap; gap: 14px; padding: 0; } .info-social__ic { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #1f2937; font-size: 21px; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; } .info-social__ic:hover { box-shadow: 0 4px 12px rgba(16,24,40,.18); transform: translateY(-1px); } .info-social__ic:active { transform: scale(.94); } /* Cores de marca das redes sociais */ .info-social__ic--facebook { background: #1877f2; color: #fff; } .info-social__ic--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; } .info-social__ic--twitter { background: #000; color: #fff; } .info-social__ic--tiktok { background: #000; color: #fff; } .info-social__ic--youtube { background: #ff0000; color: #fff; } .info-social__ic--whatsapp { background: #25d366; color: #fff; } .info-social__ic--linkedin { background: #0a66c2; color: #fff; } .info-social__ic--tripadvisor { background: #34e0a1; color: #000; } .info-apre { color: #4b5563; font-size: 15px; line-height: 1.7; margin: 0; padding: 0 2px; white-space: pre-line; } /* Apresentação no ecrã de entrada do menu avançado */ .menu-nav__apre { margin-top: 22px; color: #4b5563; font-size: 15px; line-height: 1.7; } /* ============ Separador Avaliações ============ */ .rev-bloco { display: flex; flex-direction: column; gap: 12px; padding: 2px 0; } /* Cartão de resumo (nota média em destaque) */ .rev-resumo { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid #edeff2; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16,24,40,.05); } .rev-resumo__nota { font-size: 42px; font-weight: 800; color: #111827; line-height: 1; } .rev-resumo__dir { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rev-resumo__total { color: #6b7280; font-size: 13px; font-weight: 500; } /* Estrelas */ .rev-estrelas { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; } .rev-estrelas__vazio { color: #e2e5ea; } .rev-estrelas--lg { font-size: 21px; line-height: 1; } /* Cartão de cada avaliação */ .rev-card { background: #fff; border: 1px solid #edeff2; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(16,24,40,.05); } .rev-card__topo { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; } .rev-foto, .rev-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; } .rev-foto { object-fit: cover; } .rev-avatar { display: inline-flex; align-items: center; justify-content: center; background: #fff3ec; color: var(--tema); font-weight: 800; font-size: 18px; } .rev-card__id { flex: 1; min-width: 0; } .rev-autor { font-weight: 700; font-size: 15px; color: #1f2937; } .rev-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 3px; } .rev-data { color: #9ca3af; } .rev-texto { margin: 0; color: #4b5563; font-size: 14.5px; line-height: 1.65; } .rev-mais { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tema); font-family: inherit; font-size: 14px; font-weight: 700; } /* Correção: o atributo [hidden] tem de vencer as regras de display acima, senão a landing/subcategorias não escondem ao navegar. */ .menu-nav__landing[hidden], .cat-vista[hidden], .subcat-bloco[hidden] { display: none !important; }