/* Youpi v141 · convite para instalar o app (install-app.mjs). Cartão flutuante, NÃO modal: não bloqueia o GPS nem a partida. * Só aparece quando o navegador oferece instalação (Chrome/Edge/Samsung) ou no Safari do iPhone; nunca no app Android (TWA), * no app instalado, na administração, em links de acompanhamento/chegada ou com menu, busca, gaveta ou viagem abertos. * Celular (até 600 px): logo acima do menu inferior, largura total menos as margens; os botões do mapa sobem junto. * Tablet e desktop: canto inferior esquerdo, até 420 px, acima do menu inferior e da legenda. Carregar por último no . */ .install-banner[hidden] { display: none !important; } html body .install-banner { position: fixed; z-index: 1150; left: max(var(--shell-gap, 12px), env(safe-area-inset-left, 0px)); right: max(var(--shell-gap, 12px), env(safe-area-inset-right, 0px)); bottom: calc(var(--shell-bottom, 114px) + 2px); margin: 0; padding: 0; pointer-events: none; } @media (min-width: 601px) { html body .install-banner { right: auto; width: min(420px, calc(100vw - 2 * max(var(--shell-gap, 20px), env(safe-area-inset-left, 0px)))); } } .install-banner-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; column-gap: 10px; padding: 10px 2px 10px 12px; border: 1px solid color-mix(in srgb, var(--l360-blue) 16%, var(--l360-line)); border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--l360-blue-soft) 92%, transparent) 0, transparent 58%), var(--l360-paper); color: var(--l360-ink); box-shadow: 0 14px 34px rgba(48, 13, 131, .16), 0 2px 6px rgba(15, 26, 46, .07); font-family: 'DM Sans', sans-serif; pointer-events: auto; animation: install-banner-in .34s cubic-bezier(.2, .8, .2, 1) both; } .install-banner-icon { display: block; width: 44px; height: 44px; border-radius: 22.5%; box-shadow: 0 4px 12px rgba(69, 23, 174, .18); } .install-banner-copy { display: grid; gap: 2px; min-width: 0; margin: 0; } .install-banner-copy strong { font: 700 15px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif; letter-spacing: -.01em; color: var(--l360-ink); } .install-banner-copy span { font-size: 12.5px; line-height: 1.35; color: var(--l360-muted); text-wrap: pretty; } .install-banner-action { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 14px; background: var(--l360-blue); color: #fff; font: 700 14px/1.1 'DM Sans', sans-serif; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 14px rgba(109, 40, 217, .26); -webkit-tap-highlight-color: transparent; } .install-banner-action[hidden] { display: none; } .install-banner-action:active { transform: translateY(1px); } @media (hover: hover) { .install-banner-action:hover { background: var(--l360-blue-strong); } .install-banner-close:hover { background: color-mix(in srgb, var(--l360-ink) 7%, transparent); color: var(--l360-ink); } } .install-banner-close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--l360-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; } .install-banner-close svg { width: 20px; height: 20px; } html body .install-banner :is(.install-banner-action, .install-banner-close):focus-visible { outline: 3px solid var(--l360-blue); outline-offset: 2px; } /* Celulares estreitos (até 379 px): margens do menu inferior (8 px), ícone de 40 px e texto de 12 px, para a frase caber * em duas linhas a partir de 360 px. */ @media (max-width: 379px) { html body .install-banner { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); } .install-banner-card { grid-template-columns: 40px minmax(0, 1fr) auto 44px; column-gap: 8px; padding-left: 10px; } .install-banner-icon { width: 40px; height: 40px; } .install-banner-copy strong { font-size: 14.5px; } .install-banner-copy span { font-size: 12px; } .install-banner-action { padding: 0 12px; } } /* 320–339 px: ícone menor e botão mais justo, para o título caber numa linha. */ @media (max-width: 339px) { .install-banner-card { grid-template-columns: 32px minmax(0, 1fr) auto 44px; } .install-banner-icon { width: 32px; height: 32px; } .install-banner-copy strong { font-size: 14px; } .install-banner-action { padding: 0 10px; } } /* "Baixar na Google Play" é mais longo: a ação desce para uma linha própria, alinhada ao texto. */ html body .install-banner[data-variant="play"] .install-banner-card { grid-template-columns: 44px minmax(0, 1fr) 44px; row-gap: 8px; padding-bottom: 12px; } html body .install-banner[data-variant="play"] .install-banner-icon { grid-row: 1; align-self: start; } html body .install-banner[data-variant="play"] .install-banner-close { grid-column: 3; grid-row: 1; align-self: start; } html body .install-banner[data-variant="play"] .install-banner-play { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-right: 8px; } /* Tema escuro */ :root[data-theme="dark"] .install-banner-card { border-color: #3a3170; background: radial-gradient(120% 140% at 0% 0%, rgba(124, 58, 237, .26) 0, transparent 58%), var(--l360-paper); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); } :root[data-theme="dark"] .install-banner-icon { box-shadow: 0 4px 12px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .install-banner-action { background: var(--l360-button); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); } @media (hover: hover) { :root[data-theme="dark"] .install-banner-action:hover { background: #7c3aed; } :root[data-theme="dark"] .install-banner-close:hover { background: rgba(255, 255, 255, .08); } } :root[data-theme="dark"] .install-banner :is(.install-banner-action, .install-banner-close):focus-visible { outline-color: var(--l360-link); } /* Movimento: entra deslizando de leve; sem animação com "Reduzir animações" ou a preferência do sistema. */ @keyframes install-banner-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .install-banner-card { animation: none; } } body.reduce-motion .install-banner-card { animation: none; } /* Celular: a coluna de botões do mapa (Círculo, zoom, GPS, Trânsito) e o botão de recolher sobem acima do cartão. * --install-banner-h é a altura medida pelo install-app.mjs. Em telas baixas (install-banner-tight) o zoom sai de cena * enquanto o convite estiver aberto (a pinça continua ampliando) e o Círculo desce para o lugar dele. */ @media (max-width: 600px) { html body.map-shell.install-banner-open { --v138-ctrl-base: calc(var(--shell-bottom) + var(--install-banner-h, 76px) + 10px); } html body.map-shell.install-banner-open:not(.map-shell-dock-collapsed) .map-shell-navigation .map-shell-dock-toggle { bottom: calc(var(--shell-bottom) + var(--install-banner-h, 76px) + 10px); } html body.map-shell.install-banner-open.install-banner-tight .map-panel .maplibregl-ctrl-top-right { display: none; } html body.map-shell.install-banner-open.install-banner-tight .map-panel .circle-pill { bottom: calc(var(--v138-ctrl-base) + var(--v138-ctrl, 44px) + var(--v138-ctrl-gap, 8px)); } } /* Avisos rápidos (toast) aparecem acima do cartão, nunca por cima dele. */ html body.map-shell.install-banner-open:not(.travel-active):not(.travel-map-mini):not(.journey-navigation-active):not(.map-shell-arrivals-open) .toast { bottom: calc(var(--shell-bottom) + var(--install-banner-h, 76px) + 14px); }