/* ════════════════════════════════════════════════════════════════════════ * public/sports/css/painel.css — Moldura do painel do produto e entrada * (Painel Informa Sports v2 · pacote F12 · SPEC-v2 1.2, 1.3, 6.3, 7.1, 9) * ──────────────────────────────────────────────────────────────────────── * O que vive aqui: a moldura do painel.html (lateral, topo, faixas, * conteúdo, barra inferior do telemóvel, gaveta), o seletor de produto e a * entrada (index.html). As páginas (F16–F26) têm cada uma o seu * css/paginas/.css e só desenham DENTRO de .pn-pagina. * * Regras que atravessam o ficheiro: * • Só variáveis de 9.1 e tokens da base.css (F03). Nenhum hex: dentro do * painel manda o tema do clube, aplicado em linha no pelo tema.js. * • Texto pequeno só sobre --sp-bg/--sp-bg-2/--sp-surface; fundos cheios * de cor levam a -ink correspondente (base.css). O item ativo do menu * não depende só da cor: tem barra, peso de letra e aria-current. * • Classes com prefixo pn- (painel), estilo BEM em português, estados * por atributos ARIA/data (aria-current, aria-expanded, data-lateral, * data-gaveta), para o estilo e a acessibilidade nunca divergirem. * • Alvos de toque ≥ 44 px; a 360 px nada força scroll horizontal. * • Movimento 180–260 ms na curva da marca; com movimento reduzido a * base.css corta tudo para um fade de 150 ms. * ════════════════════════════════════════════════════════════════════════ */ /* ─── 0. Tokens da moldura ────────────────────────────────────────────── */ :root[data-area="painel"] { --pn-lateral-w: 272px; --pn-lateral-w-compacta: 76px; --pn-topo-h: 64px; --pn-barra-h: 64px; --pn-z-gaveta: 80; /* acima do topo fixo (30), abaixo do véu de carga (90) e dos modais (100) */ /* Uma faixa fina com as cores do clube no topo: cada ecrã sabe que clube é (1.1). */ --pn-fita: linear-gradient(90deg, var(--sp-primary), var(--sp-secondary) 55%, var(--sp-accent)); } /* 360 px: o topo encolhe e a margem fica nos 16 px da base. */ @media (max-width: 899px) { :root[data-area="painel"] { --pn-topo-h: 56px; /* F03: os toasts sobem acima da barra inferior do telemóvel. */ --sp-toast-base: calc(var(--pn-barra-h) + 12px); } } /* ─── 1. Moldura ──────────────────────────────────────────────────────── */ .pn { min-height: 100dvh; } .pn-app { display: grid; grid-template-columns: var(--pn-lateral-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns var(--sp-dur-3) var(--sp-curva); } .pn-app[data-lateral="compacta"] { grid-template-columns: var(--pn-lateral-w-compacta) minmax(0, 1fr); } .pn-principal { min-width: 0; display: flex; flex-direction: column; } /* Arranque falhado (sem produto): sem menu de um produto que não abriu. */ .pn-app[data-estado="falha"] { grid-template-columns: minmax(0, 1fr); } .pn-app[data-estado="falha"] .pn-lateral, .pn-app[data-estado="falha"] .pn-barra { display: none; } /* ─── 2. Lateral ──────────────────────────────────────────────────────── */ .pn-lateral { position: sticky; top: 0; z-index: var(--sp-z-fixo); display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 0; overflow: hidden; background: var(--sp-surface); border-right: 1px solid var(--sp-border); } /* A fita do clube desce pela lateral também (o topo tem a sua). */ .pn-lateral::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--sp-primary), var(--sp-secondary) 60%, var(--sp-accent)); opacity: 0.9; pointer-events: none; } /* Cabeça: a comunidade (7.1: "foto da comunidade, 48 px, ao lado do nome"). */ .pn-lateral__cabeca { flex: 0 0 auto; padding: var(--sp-esp-4) var(--sp-esp-4) var(--sp-esp-3) calc(var(--sp-esp-4) + 3px); border-bottom: 1px solid var(--sp-border); } .pn-produto { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-esp-3); min-height: 56px; } .pn-produto__foto { position: relative; display: grid; place-items: center; width: 48px; height: 48px; } /* Anel nas cores do clube à volta da foto: a comunidade "veste" o clube. */ .pn-produto__foto::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 2px; background: var(--pn-fita); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; } .pn-produto__textos { min-width: 0; } .pn-produto__nome { font-family: var(--sp-font-display); font-style: var(--sp-display-estilo); font-weight: var(--sp-display-peso); text-transform: var(--sp-display-caixa); letter-spacing: var(--sp-display-espaco); font-size: var(--sp-fs-l); line-height: 1.15; color: var(--sp-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pn-produto__sub { margin-top: 2px; font-size: var(--sp-fs-xs); color: var(--sp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-lateral__fechar { display: none; } /* Navegação. */ .pn-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-esp-3) var(--sp-esp-3) var(--sp-esp-4) calc(var(--sp-esp-3) + 3px); } .pn-nav__esqueleto { display: flex; flex-direction: column; gap: var(--sp-esp-3); padding: var(--sp-esp-2); } .pn-nav__esqueleto .sp-esqueleto { height: 14px; } .pn-grupo + .pn-grupo { margin-top: var(--sp-esp-3); } .pn-grupo__titulo { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; padding: 0 var(--sp-esp-3); border-radius: var(--sp-radius-s); font-size: var(--sp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-text-2); } .pn-grupo__titulo:hover { color: var(--sp-text); background: var(--sp-realce); } .pn-grupo__seta { display: inline-flex; transition: transform var(--sp-dur-2) var(--sp-curva); } .pn-grupo__titulo[aria-expanded="false"] .pn-grupo__seta { transform: rotate(-90deg); } .pn-grupo__lista { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding: 0; list-style: none; } .pn-item { position: relative; display: flex; align-items: center; gap: var(--sp-esp-3); min-height: 44px; padding: 0 var(--sp-esp-3); border-radius: var(--sp-radius-m); color: var(--sp-text-2); font-size: var(--sp-fs-m); font-weight: 500; text-decoration: none; transition: background-color var(--sp-dur-1) var(--sp-curva), color var(--sp-dur-1) var(--sp-curva); } .pn-item:hover { background: var(--sp-realce); color: var(--sp-text); text-decoration: none; } .pn-item:active { background: var(--sp-realce-forte); } .pn-item[aria-current="page"] { background: var(--sp-tinta-primaria); color: var(--sp-text); font-weight: 700; } /* Barra do item ativo, na cor do clube (não só a cor: também o peso). */ .pn-item[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sp-primary); } .pn-item__icone { flex: 0 0 auto; display: inline-flex; width: 20px; height: 20px; } .pn-item__icone svg { width: 20px; height: 20px; } .pn-item__rotulo { flex: 1 1 auto; min-width: 0; padding: 4px 0; line-height: 1.2; /* Até duas linhas ("Comunidades e torcedores" não cabe numa a 272 px). */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pn-item__selo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sp-primary); color: var(--sp-primary-ink); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .pn-item__ponto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-surface); } .pn-item__vivo { flex: 0 0 auto; display: inline-flex; align-items: center; } .pn-item__vivo-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-danger); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-danger) 50%, transparent); animation: pn-radar 1.6s var(--sp-curva) infinite; } /* Cartão do bloqueio (6.3): o que falta explica-se no próprio menu. */ .pn-bloqueio { display: flex; flex-direction: column; gap: var(--sp-esp-2); margin: var(--sp-esp-5) var(--sp-esp-1) 0; padding: var(--sp-esp-4); border: 1px dashed var(--sp-border-forte); border-radius: var(--sp-radius-l); background: var(--sp-bg-2); } .pn-bloqueio__icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border); } .pn-bloqueio__titulo { font-weight: 700; color: var(--sp-text); font-size: var(--sp-fs-m); } .pn-bloqueio__texto { font-size: var(--sp-fs-s); color: var(--sp-text-2); } .pn-bloqueio .sp-btn { margin-top: var(--sp-esp-1); text-decoration: none; } /* Pé: selo da marca (20 px, 1.2) e recolher. */ .pn-lateral__pe { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-esp-2); min-height: 56px; padding: var(--sp-esp-2) var(--sp-esp-3) var(--sp-esp-2) calc(var(--sp-esp-4) + 3px); border-top: 1px solid var(--sp-border); } .pn-lateral__marca { min-width: 0; min-height: 36px; } .pn-selo-marca__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-lateral__marca:hover .pn-selo-marca__texto { color: var(--sp-text); } /* ─── 3. Lateral compacta (ecrã largo) ────────────────────────────────── */ @media (min-width: 900px) { .pn-app[data-lateral="compacta"] .pn-produto { grid-template-columns: 48px; justify-content: center; } .pn-app[data-lateral="compacta"] .pn-lateral__cabeca { padding-inline: 14px 11px; } .pn-app[data-lateral="compacta"] .pn-produto__textos, .pn-app[data-lateral="compacta"] .pn-item__rotulo, .pn-app[data-lateral="compacta"] .pn-grupo__nome, .pn-app[data-lateral="compacta"] .pn-grupo__seta, .pn-app[data-lateral="compacta"] .pn-selo-marca__texto, .pn-app[data-lateral="compacta"] .pn-bloqueio__texto, .pn-app[data-lateral="compacta"] .pn-bloqueio__titulo, .pn-app[data-lateral="compacta"] .pn-bloqueio .sp-btn span:first-child { display: none; } .pn-app[data-lateral="compacta"] .pn-nav { padding-inline: 12px 9px; } .pn-app[data-lateral="compacta"] .pn-item { justify-content: center; padding: 0; } .pn-app[data-lateral="compacta"] .pn-grupo__titulo { justify-content: center; min-height: 12px; padding: 0; pointer-events: none; } .pn-app[data-lateral="compacta"] .pn-grupo__titulo::before { content: ''; width: 24px; height: 1px; background: var(--sp-border); } .pn-app[data-lateral="compacta"] .pn-grupo__lista[hidden] { display: flex !important; } .pn-app[data-lateral="compacta"] .pn-item__selo, .pn-app[data-lateral="compacta"] .pn-item__ponto, .pn-app[data-lateral="compacta"] .pn-item__vivo { position: absolute; top: 6px; right: 8px; } .pn-app[data-lateral="compacta"] .pn-item__selo { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; } .pn-app[data-lateral="compacta"] .pn-lateral__pe { flex-direction: column; padding-inline: 8px 5px; } .pn-app[data-lateral="compacta"] .pn-bloqueio { align-items: center; padding: var(--sp-esp-3) var(--sp-esp-2); } } /* ─── 4. Topo ─────────────────────────────────────────────────────────── */ .pn-topo { position: sticky; top: 0; z-index: var(--sp-z-fixo); display: flex; align-items: center; gap: var(--sp-esp-3); min-height: var(--pn-topo-h); padding: 3px var(--sp-margem) 0; background: color-mix(in srgb, var(--sp-bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--sp-border); } .pn-topo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pn-fita); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pn-topo { background: var(--sp-bg); } } .pn-topo__produto { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; } .pn-topo__meio { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; } .pn-topo__acoes { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-esp-2); } .pn-topo__esqueleto { width: 220px; max-width: 50vw; height: 40px; border-radius: 999px; } /* Seletor de produto (botão). */ .pn-trocar { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: min(420px, 100%); min-height: 44px; padding: 4px 12px 4px 6px; border: 1px solid var(--sp-border); border-radius: 999px; background: var(--sp-surface); color: var(--sp-text); box-shadow: var(--sp-shadow-1); transition: border-color var(--sp-dur-1) var(--sp-curva), box-shadow var(--sp-dur-2) var(--sp-curva), transform var(--sp-dur-2) var(--sp-curva); } .pn-trocar:hover { border-color: var(--sp-border-forte); box-shadow: var(--sp-shadow-2); } .pn-trocar:active { transform: scale(0.985); } .pn-trocar[aria-expanded="true"] { border-color: var(--sp-primary); } .pn-trocar > .sp-escudo { flex: 0 0 auto; } .pn-trocar__textos { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; } .pn-trocar__nome { font-weight: 700; font-size: var(--sp-fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-trocar__sub { font-size: var(--sp-fs-xs); color: var(--sp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-trocar__seta { flex: 0 0 auto; display: inline-flex; color: var(--sp-text-2); } /* Pílula "ao vivo" (sp:aovivo). Fundo cheio de perigo → a -ink dele. */ .pn-vivo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 4px 14px 4px 10px; border-radius: 999px; background: var(--sp-danger); color: var(--sp-danger-ink); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--sp-danger) 35%, transparent); animation: pn-vivo-entrar var(--sp-dur-3) var(--sp-curva) both; } a.pn-vivo:hover { text-decoration: none; filter: brightness(1.06); } .pn-vivo[data-estado="post"] { background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border-forte); box-shadow: var(--sp-shadow-1); } .pn-vivo__estado { display: inline-flex; align-items: center; gap: 6px; } .pn-vivo__ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: sp-pulsar 1.4s var(--sp-curva) infinite; } .pn-vivo__rotulo { font-size: var(--sp-fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .pn-vivo__jogo { display: inline-flex; align-items: center; gap: 8px; } .pn-vivo__jogo .sp-escudo { flex: 0 0 auto; } .pn-vivo__placar { font-family: var(--sp-font-num); font-size: 1.125rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--sp-num-espaco); white-space: nowrap; } .pn-vivo__relogio { font-family: var(--sp-font-num); font-size: var(--sp-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent); } /* Relógio no fuso do produto (+ fusos do público). */ .pn-relogio { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; padding: 0 var(--sp-esp-2); } .pn-relogio__linha { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .pn-relogio__hora { font-family: var(--sp-font-num); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: var(--sp-num-espaco); color: var(--sp-text); } .pn-relogio__fuso { font-size: var(--sp-fs-xs); color: var(--sp-text-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* Estado do WhatsApp (ponto + texto do F03). */ .pn-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--sp-surface); border: 1px solid var(--sp-border); font-size: var(--sp-fs-xs); font-weight: 600; color: var(--sp-text-2); max-width: 260px; } .pn-wa__icone { display: inline-flex; color: var(--sp-text-2); } .pn-wa .sp-estado-wa { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .pn-wa .sp-estado-wa > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tempo real em baixo: só aparece quando há problema. */ .pn-tr { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--sp-warning); color: var(--sp-text); background: var(--sp-surface); font-size: var(--sp-fs-xs); font-weight: 600; } .pn-tr__icone { display: inline-flex; color: var(--sp-text); } .pn-tr__icone svg { animation: sp-rodar 1.2s linear infinite; } /* Conta. */ .pn-conta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: transform var(--sp-dur-2) var(--sp-curva); } .pn-conta:hover .pn-conta__avatar { border-color: var(--sp-border-forte); } .pn-conta:active { transform: scale(0.96); } .pn-conta__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-surface-3); color: var(--sp-text); border: 2px solid var(--sp-border); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; } /* Ecrãs intermédios: menos texto no topo. */ @media (max-width: 1279px) { .pn-wa .sp-estado-wa > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .pn-wa { padding: 0 10px; } } @media (max-width: 1099px) { .pn-relogio__fuso { max-width: 110px; } .pn-tr__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* ─── 5. Faixas (bloqueio, preparo, falha, sem rede) ──────────────────── */ .pn-faixas { display: flex; flex-direction: column; gap: var(--sp-esp-2); width: 100%; max-width: var(--sp-largura-max); margin: var(--sp-esp-4) auto 0; padding-inline: var(--sp-margem); } .pn-faixas[hidden] { display: none; } .pn-faixas > * { animation: sp-subir var(--sp-dur-3) var(--sp-curva) both; } /* Preparo com progresso ao vivo (sp:tarefa). */ .pn-preparo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-esp-3) var(--sp-esp-4); padding: var(--sp-esp-4) var(--sp-esp-5); overflow: hidden; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-l); background: var(--sp-surface); box-shadow: var(--sp-shadow-1); } .pn-preparo::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pn-fita); } .pn-preparo__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-tinta-primaria); color: var(--sp-text); } .pn-preparo__icone svg { animation: sp-rodar 1.1s linear infinite; } .pn-preparo__corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pn-preparo__titulo { font-weight: 700; color: var(--sp-text); } .pn-preparo__etapa { font-size: var(--sp-fs-s); color: var(--sp-text-2); } .pn-preparo .sp-progresso { margin-top: 4px; } .pn-preparo__acoes { display: flex; gap: var(--sp-esp-2); } .pn-preparo__acoes .sp-btn { text-decoration: none; } @media (max-width: 640px) { .pn-preparo { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-esp-4); } .pn-preparo__acoes { grid-column: 1 / -1; } .pn-preparo__acoes .sp-btn { flex: 1 1 auto; } } /* ─── 6. Conteúdo e páginas ───────────────────────────────────────────── */ .pn-conteudo { position: relative; flex: 1 0 auto; width: 100%; max-width: var(--sp-largura-max); min-height: 60vh; margin-inline: auto; padding: var(--sp-esp-5) var(--sp-margem) var(--sp-esp-7); /* 12.3: "375 px sem scroll horizontal", mesmo que uma página se esqueça de um texto comprido. `clip` (e não hidden) não cria um contentor de rolagem: o que é sticky dentro das páginas continua a funcionar. As tabelas largas rolam dentro de si (.sp-rolar-x). */ overflow-x: clip; } .pn-conteudo:focus, .pn-conteudo:focus-visible { outline: none; } /* alvo do "saltar para o conteúdo" e da troca de página: não é um controlo */ .pn-pagina { min-width: 0; animation: pn-entrar var(--sp-dur-3) var(--sp-curva) both; } .pn-pagina--estado { display: grid; place-items: center; min-height: 50vh; } .pn-pagina--estado > .sp-estado { max-width: 520px; } /* O pré-carregamento do desporto cobre só o conteúdo (menu e topo ficam usáveis). Num conteúdo mais alto do que o ecrã, a cena fica à vista. */ .pn-conteudo > .sp-precarga--local { place-items: start center; border-radius: 0; } .pn-conteudo > .sp-precarga--local > .sp-precarga__caixa { position: sticky; top: calc(var(--pn-topo-h) + 18vh); margin-top: 14vh; } /* Esqueleto do arranque: a forma do painel antes dos dados (sem "saltos"). */ .pn-arranque { display: flex; flex-direction: column; gap: var(--sp-esp-5); } .pn-arranque__hero { height: clamp(200px, 32vh, 300px); border-radius: var(--sp-radius-xl); } .pn-arranque__grelha { display: grid; gap: var(--sp-esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .pn-arranque__cartao { height: 140px; border-radius: var(--sp-radius-l); } /* ─── 7. Rodapé ───────────────────────────────────────────────────────── */ .pn-rodape { display: none; justify-content: center; padding: var(--sp-esp-4) var(--sp-margem) calc(var(--pn-barra-h) + var(--sp-esp-4) + env(safe-area-inset-bottom)); } /* ─── 8. Telemóvel: barra inferior e gaveta ───────────────────────────── */ .pn-barra { display: none; } .pn-veu { display: none; } @media (max-width: 899px) { .pn-app, .pn-app[data-lateral="compacta"] { grid-template-columns: minmax(0, 1fr); } .pn-rodape { display: flex; } .pn-conteudo { padding: var(--sp-esp-4) var(--sp-margem) var(--sp-esp-6); } .pn-faixas { margin-top: var(--sp-esp-3); } /* A lateral passa a gaveta (aberta pelo "Mais"). */ .pn-lateral { position: fixed; inset: 0 auto 0 0; z-index: var(--pn-z-gaveta); width: min(86vw, 340px); height: 100%; transform: translateX(-104%); visibility: hidden; box-shadow: var(--sp-shadow-3); border-right: 0; border-radius: 0 var(--sp-radius-xl) var(--sp-radius-xl) 0; padding-bottom: env(safe-area-inset-bottom); transition: transform var(--sp-dur-3) var(--sp-curva), visibility 0s linear var(--sp-dur-3); } .pn-app[data-gaveta="aberta"] .pn-lateral { transform: none; visibility: visible; transition: transform var(--sp-dur-3) var(--sp-curva), visibility 0s; } .pn-lateral__fechar { display: inline-flex; } .pn-lateral__cabeca { padding-top: max(var(--sp-esp-4), env(safe-area-inset-top)); } .pn-veu { display: block; position: fixed; inset: 0; z-index: calc(var(--pn-z-gaveta) - 1); background: var(--sp-veu); animation: sp-aparecer var(--sp-dur-2) var(--sp-curva) both; } .pn-veu[hidden] { display: none; } .pn-barra { position: fixed; inset: auto 0 0 0; z-index: var(--sp-z-fixo); display: flex; align-items: stretch; height: calc(var(--pn-barra-h) + env(safe-area-inset-bottom)); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--sp-surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--sp-border); } .pn-barra[hidden] { display: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pn-barra { background: var(--sp-surface); } } .pn-trocar { max-width: 100%; } } .pn-barra__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 6px 2px; color: var(--sp-text-2); font-size: 11px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; } .pn-barra__item:hover { text-decoration: none; color: var(--sp-text); } .pn-barra__icone { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color var(--sp-dur-2) var(--sp-curva), transform var(--sp-dur-2) var(--sp-curva); } .pn-barra__icone svg { width: 22px; height: 22px; } .pn-barra__item:active .pn-barra__icone { transform: scale(0.92); } .pn-barra__item[aria-current="page"], .pn-barra__mais[data-ativo="1"] { color: var(--sp-text); font-weight: 800; } .pn-barra__item[aria-current="page"] .pn-barra__icone, .pn-barra__mais[data-ativo="1"] .pn-barra__icone { background: color-mix(in srgb, var(--sp-primary) 18%, transparent); } .pn-barra__rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; } .pn-barra__ponto, .pn-barra__vivo { position: absolute; top: 2px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--sp-primary); box-shadow: 0 0 0 2px var(--sp-surface); } .pn-barra__vivo { background: var(--sp-danger); animation: pn-radar 1.6s var(--sp-curva) infinite; } /* Topo no telemóvel: produto à esquerda, ao vivo compacto, conta à direita. */ @media (max-width: 899px) { .pn-topo { gap: var(--sp-esp-2); padding-inline: var(--sp-esp-3); } .pn-topo__meio { justify-content: flex-end; } .pn-relogio, .pn-topo__modo { display: none; } /* O estado do WhatsApp fica: ícone + ponto (o texto vai para o leitor). */ .pn-wa { padding: 0 10px; min-height: 36px; gap: 4px; } .pn-vivo { gap: 6px; padding: 4px 10px 4px 8px; min-height: 36px; } .pn-vivo__rotulo, .pn-vivo__relogio { display: none; } } @media (max-width: 480px) { .pn-trocar { padding-right: 8px; gap: 8px; } .pn-trocar__sub { display: none; } .pn-trocar__seta { display: none; } .pn-vivo__jogo .sp-escudo { display: none; } .pn-vivo__placar { font-size: 1rem; } } /* 5 itens a 360 px dão ~68 px por item: "Comunidades" e "Publicações" cabem a 10,5 px sem reticências. */ @media (max-width: 400px) { .pn-barra__item { padding-inline: 0; } .pn-barra__rotulo { font-size: 10.5px; letter-spacing: -0.01em; } } @media (max-width: 374px) { .pn-topo__produto { flex: 1 1 auto; } .pn-barra__rotulo { font-size: 10px; } } /* ─── 9. Seletor de produto (modal) ───────────────────────────────────── */ .pn-seletor { display: flex; flex-direction: column; gap: var(--sp-esp-4); min-height: min(52vh, 460px); } .pn-seletor__procura { position: relative; } .pn-seletor__lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--sp-text-2); pointer-events: none; } .pn-seletor__pesquisa { width: 100%; padding-left: 40px; } .pn-seletor__lista { display: flex; flex-direction: column; gap: var(--sp-esp-5); } .pn-seletor__empresa-nome { font-family: var(--sp-font-ui); font-style: normal; text-transform: uppercase; font-size: var(--sp-fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--sp-text-2); margin-bottom: var(--sp-esp-2); } .pn-seletor__nucleo + .pn-seletor__nucleo { margin-top: var(--sp-esp-3); } .pn-seletor__nucleo-nome { font-size: var(--sp-fs-s); font-weight: 700; color: var(--sp-text); margin: 0 0 var(--sp-esp-2) 2px; } .pn-seletor__produtos { display: flex; flex-direction: column; gap: var(--sp-esp-2); padding: 0; margin: 0; list-style: none; } .pn-seletor__produto { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-esp-3); width: 100%; min-height: 60px; padding: var(--sp-esp-2) var(--sp-esp-3); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-m); background: var(--sp-surface); color: var(--sp-text); text-align: left; transition: border-color var(--sp-dur-1) var(--sp-curva), background-color var(--sp-dur-1) var(--sp-curva), transform var(--sp-dur-2) var(--sp-curva); } .pn-seletor__produto:hover { border-color: var(--sp-border-forte); background: var(--sp-surface-2); } .pn-seletor__produto:active { transform: scale(0.99); } .pn-seletor__produto[aria-current="true"] { border-color: var(--sp-primary); box-shadow: inset 3px 0 0 var(--sp-primary); } .pn-seletor__produto[aria-busy="true"] { opacity: 0.7; cursor: progress; } .pn-seletor__textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .pn-seletor__nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-seletor__sub { font-size: var(--sp-fs-xs); color: var(--sp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-seletor__produto .sp-selo { justify-self: end; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-seletor__produto:hover .pn-seletor__sub { color: var(--sp-text-2); } @media (max-width: 480px) { .pn-seletor__produto { grid-template-columns: 40px minmax(0, 1fr); } .pn-seletor__produto .sp-selo { grid-column: 2; justify-self: start; } } /* ─── 10. Entrada (index.html) ────────────────────────────────────────── */ .pn-entrada { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--sp-esp-6) var(--sp-margem); overflow: hidden; isolation: isolate; background: var(--sp-grad-hero), var(--sp-bg); } /* A logomarca em marca-d'água, como no login (F06). */ .pn-entrada::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: url("../img/marca/simbolo-sports-transp.png") center / min(70vmin, 520px) no-repeat; opacity: 0.06; pointer-events: none; } .pn-entrada__caixa { display: flex; flex-direction: column; align-items: center; gap: var(--sp-esp-4); max-width: 420px; text-align: center; animation: sp-subir var(--sp-dur-3) var(--sp-curva) both; } .pn-entrada__marca { position: relative; width: 112px; height: 112px; display: grid; place-items: center; } .pn-entrada__marca img { width: 72px; height: 72px; object-fit: contain; } .pn-entrada__anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .pn-entrada__anel-fundo { fill: none; stroke: var(--sp-surface-3); stroke-width: 5; } .pn-entrada__anel-arco { fill: none; stroke: url(#pn-entrada-grad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 60 190; transform-origin: 50% 50%; animation: sp-rodar 1.4s var(--sp-curva) infinite; } .pn-entrada[data-estado="erro"] .pn-entrada__anel-arco { animation: none; stroke-dasharray: none; stroke: var(--sp-danger); } .pn-entrada__titulo { font-family: var(--sp-font-display); font-size: var(--sp-fs-xl); font-weight: 800; color: var(--sp-text); } .pn-entrada__texto { color: var(--sp-text-2); font-size: var(--sp-fs-m); } .pn-entrada__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-esp-2); } .pn-entrada__acoes .sp-btn { text-decoration: none; } /* ─── 11. Animações ───────────────────────────────────────────────────── */ @keyframes pn-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pn-vivo-entrar { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes pn-radar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-danger) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sp-danger) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-danger) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .pn-app, .pn-lateral { transition: none; } .pn-vivo__ponto, .pn-item__vivo-ponto, .pn-barra__vivo, .pn-preparo__icone svg, .pn-tr__icone svg, .pn-entrada__anel-arco { animation: none; } } :root[data-movimento="reduzido"] .pn-app, :root[data-movimento="reduzido"] .pn-lateral { transition: none; } :root[data-movimento="reduzido"] .pn-vivo__ponto, :root[data-movimento="reduzido"] .pn-item__vivo-ponto, :root[data-movimento="reduzido"] .pn-barra__vivo, :root[data-movimento="reduzido"] .pn-preparo__icone svg, :root[data-movimento="reduzido"] .pn-tr__icone svg, :root[data-movimento="reduzido"] .pn-entrada__anel-arco { animation: none; } /* ─── 12. Impressão: só o conteúdo da página ──────────────────────────── */ @media print { .pn-app { display: block; } .pn-lateral, .pn-topo, .pn-barra, .pn-veu, .pn-faixas, .pn-rodape { display: none !important; } .pn-conteudo { max-width: none; padding: 0; } }