/* ============================================================ BT Club — folha de estilo do app Bootstrap 5.3 + Bootstrap Icons + Poppins (self-hosted via libman, ver App.razor). Concentra reset, variáveis, moldura e os componentes reaproveitados entre telas; o que é específico de uma única tela vive no Component.razor.css correspondente (CSS isolation do Blazor). ============================================================ */ /* ---- 0. UI de erro do Blazor ---- Sem display:none o Blazor não esconde essa div por padrão (só o template base inclui essa regra); ela fica ~24px visível no fim da página, o body passa a exceder o viewport e a página inteira rola esse tanto, arrastando hero/topo junto. */ #blazor-error-ui{display:none} /* Conteúdo de fallback do LoggingErrorBoundary (ver MainLayout) — some no lugar da tela quando um componente lança uma exceção não tratada durante o circuito interativo, sem derrubar a conexão SignalR (diferente do banner acima, que é do próprio Blazor e só aparece se a conexão cair de vez). */ .error-boundary-ui{ height:100vh;height:100dvh; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;text-align:center;padding:0 24px; background:var(--bt-bg);color:var(--bt-text);font-family:Poppins,sans-serif; } .error-boundary-ui a{color:var(--bt-green);font-weight:600} /* ---- 1. Variáveis de marca ---- */ :root{ --bt-bg:#0b0b0b; /* fundo das telas */ --bt-surface:#1c1c1c; /* cards */ --bt-surface-2:#242424; /* pílulas / caixas internas */ --bt-line:#262626; /* divisores */ --bt-border:#3a3a3a; /* bordas de campo */ --bt-green:#52c08d; /* verde da marca */ --bt-green-soft:#9fdcc0; /* verde de apoio (labels) */ --bt-green-ink:#0f2419; /* texto sobre verde */ --bt-text:#ffffff; --bt-text-2:#cfcfcf; --bt-text-3:#8f8f8f; --bt-radius:10px; } /* ---- 2. Reset ---- */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; /* mesma cor do .bt-viewport — se algum aparelho real tiver 1-2px de diferença do max-width (arredondamento, notch/safe-area), esse fundo funde com o app em vez de aparecer como um friso branco na lateral. */ background:var(--bt-bg); font-family:Poppins,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} button{font-family:inherit} /* ---- 3. Links ---- */ a{color:var(--bt-green);text-decoration:none} a:hover{color:#7fd3aa} /* ---- 4. Moldura de tela cheia ---- Cada tela do protótipo virou uma rota Blazor própria; o roteador já garante que só uma fica montada por vez. Trava a largura na medida do maior celular comum — 440px, o viewport CSS do iPhone Pro Max (440x956, mesma medida do 16 Pro Max ao 17 Pro Max) — igual à referência estática, que também usa uma largura fixa em vez de esticar pra tela toda. Em celulares até essa largura, width:100% já cabe exatamente sem sobrar nada (por isso o valor tem que bater com o maior aparelho real, senão sobra uma friso da cor do body nas laterais); em desktop/tablet, centraliza como uma coluna em vez de esticar o conteúdo mobile pela janela inteira. */ .bt-frame{min-height:100%;display:flex;justify-content:center} .bt-viewport{ position:relative; width:100%; max-width:440px; height:100vh; height:100dvh; overflow:hidden; background:var(--bt-bg); } .bt-screen{ display:flex; flex-direction:column; height:100vh; height:100dvh; padding-bottom:78px; /* espaço p/ o rodapé fixo (.bt-bottom-nav) não cobrir o conteúdo; nas 2 telas sem rodapé (Regras, Atendimento detalhe) sobra um respiro extra no fim da tela, sem problema visual. */ background:var(--bt-bg); color:var(--bt-text); font-family:Poppins,sans-serif; } /* ---- 4b. Transição de tela ---- O router do Blazor troca @Body inteiro na navegação e, sem transição, isso passa a sensação de "piscar". @key="Nav.Uri" no wrapper (MainLayout) força o Blazor a recriar o elemento a cada rota (em vez de só atualizar o que mudou), o que reinicia esta animação no navegador. */ .page-fade{animation:page-fade-in .22s ease-out} @keyframes page-fade-in{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .page-fade{animation:none} } /* ---- 4c. Rodapé fixo ----------------------------------------- position:absolute (relativo ao .bt-viewport, que é position:relative) — não fixed/relativo à viewport real, senão o rodapé ficaria esticado pela largura da janela inteira em vez de ficar preso à coluna do "celular" quando .bt-viewport está com max-width (ver seção 4 acima). */ .bt-bottom-nav{ position:absolute; left:0; right:0; bottom:0; z-index:15; } /* ---- 5. Rolagem ---- .bt-scroll é sempre a última seção da tela: ocupa o espaço restante e rola por baixo do cabeçalho (position/z-index), sem barra de rolagem visível. */ .bt-scroll{ flex:1; overflow-y:auto; position:relative; z-index:2; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .bt-scroll::-webkit-scrollbar{display:none} .bt-x{overflow-x:auto;scrollbar-width:none} .bt-x::-webkit-scrollbar{display:none} /* ---- 6. Imagens de conteúdo (heros, cards, avatares) ---- */ .bt-img{width:100%;height:100%;object-fit:cover} .bt-img-circle{border-radius:50%} .bt-logo{object-fit:contain;padding:2px;background:#111} /* ---- 7. Campos ---- */ .bt-search::placeholder, textarea::placeholder{color:#8a8a8a} .bt-select{background-image:none} .bt-select option{background:var(--bt-surface);color:var(--bt-text)} input:focus,textarea:focus,select:focus{border-color:var(--bt-green)!important} /* ---- 8. Chips de filtro ---- */ .bt-chip{cursor:pointer;user-select:none;white-space:nowrap} /* ---- 9. Acessibilidade ---- */ @media (prefers-reduced-motion:reduce){ .bt-scroll{scroll-behavior:auto} } /* ================================================================ 10. Componentes reaproveitados entre telas Extraídos do style="" inline original — os valores (px, cores) são os mesmos, só passaram a viver em classes nomeadas. ================================================================ */ /* Cabeçalho com imagem de fundo (hero) */ .hero{position:relative;background:#1b1b1b;z-index:1} .hero--sm{height:210px} .hero--md{height:250px} .hero--lg{height:310px} .hero--xl{height:370px} .hero__bg{position:absolute;inset:0} .hero__link{position:absolute;inset:0;display:block} .hero__gradient{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,0) 35%,rgba(11,11,11,.9) 100%); } .hero__bar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:14px} .hero__back{position:absolute;top:58px;left:16px;color:#fff;z-index:4;display:flex} .hero__back i{font-size:26px} /* Cabeçalho sem imagem (fundo escuro liso) */ .screen-header{position:relative;z-index:2;background:#0b0b0b;padding-bottom:6px} .screen-header__bar{display:flex;align-items:center;gap:14px;padding:16px 16px 0} .menu-icon{font-size:24px;color:#fff;cursor:pointer} .screen-title{flex:1;color:var(--bt-green);font-size:19px;font-weight:400} /* Área de conteúdo que sobrepõe o hero (margin-top negativo) */ .content-pull{position:relative;z-index:2;background:#0b0b0b} .content-pull--64{margin-top:-64px} .content-pull--80{margin-top:-80px} .content-pull--120{margin-top:-120px} /* Busca com ícone */ .search-box{padding:14px 16px 0;position:relative} .search-box input{ width:100%;background:transparent;border:1px solid var(--bt-border);border-radius:8px; padding:12px 14px 12px 42px;color:#fff;font-size:13px;font-family:Poppins,sans-serif;outline:none; } .search-box i{position:absolute;left:32px;top:27px;font-size:15px;color:#9a9a9a} /* Abas (Disponíveis/Resgatados, Em aberto/Encerrados) */ .tabs{display:flex;margin-top:20px;border-bottom:1px solid var(--bt-line)} .tabs__item{flex:1;text-align:center;padding:10px 0 11px;font-size:14px;font-weight:400;color:var(--bt-text-2);border-bottom:2px solid transparent;cursor:pointer} .tabs__item.is-active{font-weight:400;color:var(--bt-text);border-bottom-color:var(--bt-text)} /* Chip de categoria (FAQ) */ .chip-toggle{flex:none;background:transparent;color:#fff;border:1px solid var(--bt-green);border-radius:20px;padding:5px 16px;font-size:12px;font-weight:400;cursor:pointer} .chip-toggle.is-active{background:var(--bt-green);color:var(--bt-green-ink);font-weight:600} /* Cartão padrão */ .card{background:var(--bt-surface);border-radius:10px;padding:16px} /* Badge/pill de status (borda + texto na mesma cor via currentColor) */ .pill{display:inline-block;border:1px solid currentColor;border-radius:12px;padding:1px 9px;font-size:9.5px} /* Anel de progresso circular (nível / desafio) */ .progress-ring{position:relative;width:82px;height:82px;flex:none} .progress-ring__track{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -45deg,#52c08d 0deg 90deg,#52c08d 90deg 180deg,#3a3a3a 180deg 270deg,#52c08d 270deg 360deg)} .progress-ring__notch{position:absolute;left:50%;top:50%;width:7px;height:100%;background:var(--bt-surface)} .progress-ring__notch--a{transform:translate(-50%,-50%) rotate(45deg)} .progress-ring__notch--b{transform:translate(-50%,-50%) rotate(-45deg)} .progress-ring__label{position:absolute;inset:19px;border-radius:50%;background:var(--bt-surface);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#fff} /* Divisor fino */ .divider{height:1px;background:var(--bt-line)} /* Botão de ação cheio — branco (pedido do cliente: verde só em detalhes pontuais, botões/fontes seguem a mesma lógica de bodytech.com.br) — vira "estado ativo" (outline) via .is-on */ /* display/text-align/text-decoration cobrem tanto