/* ========================================================= PWA Fase 2a — modo-app (app-shell + bottom nav). Tudo abaixo só age quando (app instalado ou ?appmode=1) E (membro da comunidade). No navegador comum / p/ visitante, NADA aqui aplica. ========================================================= */ /* Bottom nav e sheet ficam escondidos fora do modo-app. */ .hero-bnav{display:none} /* Botão "Ativar notificações" (dentro do painel do sino — vale no navegador e no app). */ .hero-push-cta{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 24px);margin:8px 12px 2px;padding:9px 12px;border:none;border-radius:9px;background:var(--lime,#A3D900);color:#1a1a1a;font-weight:800;font-size:12.5px;cursor:pointer;line-height:1.2} .hero-push-cta:hover{background:#b6ef1a} .hero-push-cta:disabled{opacity:.6;cursor:default} .hero-push-cta i{font-size:16px} html.hero-appmode body.hero-appmember{ /* respiro pro conteúdo não ficar sob a bottom nav (+ notch). */ padding-bottom:calc(64px + env(safe-area-inset-bottom))!important; } /* ---- App-bar: encolhe a navbar de marketing ---- */ html.hero-appmode body.hero-appmember #navbar{ height:54px!important;min-height:54px;padding:0 12px!important; background:var(--card-bg,#fff)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; box-shadow:0 1px 0 rgba(0,0,0,.06)!important; } html.hero-appmode body.hero-appmember #navbar .nav-links, html.hero-appmode body.hero-appmember #navbar .mobile-menu, html.hero-appmode body.hero-appmember #hero-userbar .hub-wrap--msg, html.hero-appmode body.hero-appmember #hub-bell-btn{display:none!important} /* o wrap do sino continua no DOM (o painel é filho dele e é acionado pela aba Alertas) */ html.hero-appmode body.hero-appmember #navbar .nav-right{margin-left:auto} /* some o rodapé de marketing */ html.hero-appmode body.hero-appmember #footer, html.hero-appmode body.hero-appmember .footer{display:none!important} /* ---- Bottom nav ---- */ html.hero-appmode body.hero-appmember .hero-bnav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9998; background:var(--card-bg,#fff);border-top:1px solid rgba(0,0,0,.08); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around;align-items:stretch; } .hero-bnav__t{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:none;border:none;cursor:pointer;font:inherit;font-size:10.5px;font-weight:700; color:var(--text-muted,#8a8a92);text-decoration:none;padding:4px 0;position:relative; transition:color .15s,transform .1s;-webkit-tap-highlight-color:transparent; } .hero-bnav__t i{font-size:23px;line-height:1} .hero-bnav__t:active{transform:scale(.92)} .hero-bnav__t.is-active{color:var(--lime-dark,#5a7a00)} .hero-bnav__b{ position:absolute;top:-1px;left:calc(50% + 6px);background:#e23b3b;color:#fff; font-size:10px;font-weight:800;line-height:1;min-width:16px;height:16px;border-radius:9px; display:flex;align-items:center;justify-content:center;padding:0 4px; } /* ---- Painel de Notificações (reusa o dropdown do sino, vira bottom sheet) ---- */ html.hero-appmode body.hero-appmember #hub-bell-dd:not([hidden]){ position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important; width:100%!important;max-width:none!important;max-height:76vh!important; margin:0!important;border-radius:18px 18px 0 0!important;z-index:9999!important; box-shadow:0 -10px 34px rgba(0,0,0,.3)!important;overflow:auto; padding-bottom:calc(10px + env(safe-area-inset-bottom))!important; animation:heroSheetUp .22s cubic-bezier(.2,.7,.3,1); } html.hero-appmode body.hero-appmember #hub-bell-dd:not([hidden])::before{ content:"";display:block;width:40px;height:4px;border-radius:3px;background:rgba(0,0,0,.2); margin:8px auto 4px; } @keyframes heroSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} /* ---- Modo escuro ---- */ [data-theme="dark"] html.hero-appmode body.hero-appmember #navbar, [data-theme="dark"] html.hero-appmode body.hero-appmember .hero-bnav{ background:#141414!important;border-color:#262626; } [data-theme="dark"] html.hero-appmode body.hero-appmember .hero-bnav{border-top-color:#262626} [data-theme="dark"] .hero-bnav__t.is-active{color:var(--lime,#A3D900)} [data-theme="dark"] html.hero-appmode body.hero-appmember #hub-bell-dd:not([hidden])::before{background:rgba(255,255,255,.25)}