/* Barra de instalação, modal do iOS, convite de notificações e bônus. * * As cores saem das variáveis --skin__* que o tema ativo injeta no * (tabela templates_cores). Cada uma tem um fallback, para o caso de a * página ser aberta antes de o tema ser aplicado. */ :root { --k777-bg: var(--skin__bg_2, #0c142d); --k777-bg-alt: var(--skin__bg_1, #12224a); --k777-borda: var(--skin__border, rgba(255, 255, 255, .14)); --k777-primaria: var(--skin__primary, #0096dd); --k777-btn-1: var(--skin__btn_color_1, #23b0ff); --k777-btn-2: var(--skin__btn_color_2, #0096dd); --k777-texto-btn: var(--skin__text_primary, #ffffff); --k777-texto: var(--skin__text_accent3, #ffffff); --k777-destaque: var(--skin__primary, #23e07a); } #k777-install-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 99998; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--k777-bg); border: 1px solid var(--k777-borda); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--k777-texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform: translateY(140%); transition: transform .32s ease; max-width: 520px; margin: 0 auto; } #k777-install-bar.visivel { transform: translateY(0); } #k777-install-bar img { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; } #k777-install-bar .k777-ib-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; } #k777-install-bar .k777-ib-txt strong { font-size: 14px; } #k777-install-bar .k777-ib-txt span { font-size: 11.5px; opacity: .72; } #k777-install-bar .k777-ib-btn { flex: 0 0 auto; border: 0; cursor: pointer; padding: 9px 16px; border-radius: 10px; background: linear-gradient(180deg, var(--k777-btn-1), var(--k777-btn-2)); color: var(--k777-texto-btn); font-weight: 700; font-size: 13px; } #k777-install-bar .k777-ib-btn:active { transform: scale(.96); } #k777-install-bar .k777-ib-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--k777-texto); opacity: .55; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; } #k777-ios-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: opacity .25s ease; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 20px; } #k777-ios-modal.visivel { opacity: 1; pointer-events: auto; } #k777-ios-modal .k777-ios-card { background: var(--k777-bg); color: var(--k777-texto); border: 1px solid var(--k777-borda); border-radius: 16px; padding: 22px; max-width: 330px; width: 100%; text-align: center; } #k777-ios-modal img { width: 62px; height: 62px; border-radius: 14px; margin-bottom: 10px; } #k777-ios-modal h3 { font-size: 17px; margin-bottom: 12px; } #k777-ios-modal ol { text-align: left; padding-left: 20px; font-size: 13.5px; line-height: 1.85; opacity: .9; } #k777-ios-modal button { margin-top: 16px; width: 100%; border: 0; cursor: pointer; padding: 11px; border-radius: 10px; background: linear-gradient(180deg, var(--k777-btn-1), var(--k777-btn-2)); color: var(--k777-texto-btn); font-weight: 700; font-size: 14px; } #k777-push-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 99997; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--k777-bg); border: 1px solid var(--k777-borda); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--k777-texto); font-size: 13px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform: translateY(140%); transition: transform .32s ease; max-width: 520px; margin: 0 auto; } #k777-push-bar.visivel { transform: translateY(0); } #k777-push-bar span { flex: 1 1 100%; margin-bottom: 4px; } #k777-push-bar button { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 12.5px; } #k777-push-bar .sim { background: linear-gradient(180deg, var(--k777-btn-1), var(--k777-btn-2)); color: var(--k777-texto-btn); } #k777-push-bar .nao { background: rgba(255, 255, 255, .1); color: var(--k777-texto); opacity: .75; } /* Modal do bônus por instalar o app. */ #k777-bonus-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .68); opacity: 0; pointer-events: none; transition: opacity .28s ease; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 20px; } #k777-bonus-modal.visivel { opacity: 1; pointer-events: auto; } #k777-bonus-modal .k777-bonus-card { background: linear-gradient(160deg, var(--k777-bg-alt), var(--k777-bg)); border: 1px solid var(--k777-borda); border-radius: 18px; padding: 26px 22px; max-width: 320px; width: 100%; text-align: center; color: var(--k777-texto); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); transform: scale(.92); transition: transform .28s cubic-bezier(.2, .9, .3, 1.2); } #k777-bonus-modal.visivel .k777-bonus-card { transform: scale(1); } #k777-bonus-modal .k777-bonus-emoji { font-size: 44px; line-height: 1; margin-bottom: 8px; } #k777-bonus-modal h3 { font-size: 18px; margin-bottom: 6px; } #k777-bonus-modal p { font-size: 13.5px; opacity: .78; line-height: 1.45; } #k777-bonus-modal .k777-bonus-valor { margin: 14px 0 4px; font-size: 30px; font-weight: 800; color: var(--k777-destaque); } #k777-bonus-modal button { margin-top: 14px; width: 100%; border: 0; cursor: pointer; padding: 12px; border-radius: 11px; background: linear-gradient(180deg, var(--k777-btn-1), var(--k777-btn-2)); color: var(--k777-texto-btn); font-weight: 700; font-size: 14.5px; } #k777-bonus-modal button:active { transform: scale(.97); } /* Respeita o notch/barra de gestos quando roda instalado. */ @media (display-mode: standalone) { #k777-install-bar, #k777-push-bar { bottom: calc(12px + env(safe-area-inset-bottom)); } }