/* ════════════════════════════════════════════════════════════════════════ * public/sports/css/base.css — Fundação visual do Painel Informa Sports v2 * (pacote F03 · SPEC-v2 1.2, 1.3, 9.1, 9.4, 11.3) * ──────────────────────────────────────────────────────────────────────── * O que vive aqui (e só aqui): * • os valores POR OMISSÃO das variáveis de 9.1 — o tema da marca, nos dois * modos. Dentro do painel o tema do clube chega do servidor (B07) e é * aplicado pelo js/nucleo/tema.js como estilo em linha no , que * ganha sempre a estas regras; no login, lobby e admin (onde "manda a * marca", 1.2) são estas que se veem; * • tokens internos de ritmo (espaço, tipo, movimento, camadas), que não * são contrato mas evitam 60 pacotes com 60 escalas diferentes; * • reposição (reset), tipografia, foco, seleção, barras de rolagem, * movimento reduzido, textura do desporto e utilitários de disposição. * * PORQUÊ os valores da marca estão escritos aqui e não pedidos ao servidor: * o login e a manutenção não têm sessão para pedir um tema, e uma página * sem variáveis durante 200 ms é branco-sobre-branco (proibido, 9.3). Os * números abaixo são a SAÍDA do sports/v2/tema.js (B07) para * calcular({presetId:'marca', modo, desporto:'generico'}) a 24/09/2026 — * copiados, não reinventados, para o login e o painel da marca serem o * mesmo pixel. Se o B07 mudar a marca, regenerar este bloco (ver o "o que * falta" no fim do ui.js: há um script de verificação em .tmp-testes/F03). * * Marca (1.2): os hex foram confirmados com conta-gotas sobre * logo-sports.png (1254×1254). A logo é um degradê contínuo; medidos os * 20 % de píxeis mais vivos de cada zona: roxo #8E1FF4/#7E2CD8 (matiz * 268–271°), azul #116CD6 (212°), ciano #04CBFE/#00B8D8 (188–192°), verde * #02DD31/#00C889 (132–161°). Os tokens do contrato (#7C3AED 262°, #2563EB * 221°, #06B6D4 188°, #22C55E 142°) estão a menos de 10° de matiz de cada * zona e são mais equilibrados em luminância, por isso ficam como estão. * * Regras para quem usa estas variáveis: * • As páginas usam SÓ variáveis; hex só nas texturas (9.1). * • Texto pequeno na cor do clube (--sp-primary/secondary/accent e estados) * só sobre --sp-bg, --sp-bg-2 ou --sp-surface; em --sp-surface-2/3 só * ícones, contornos e texto grande (é aí que o B07 garante 3:1 e não * 4,5:1). Texto sobre --sp-grad-hero: --sp-text / --sp-text-2. * • Cor de fundo cheia → texto com a -ink correspondente. * * Ganchos para os pacotes de desporto (F13–F15), sem tocar neste ficheiro: * --sp-textura imagem da textura (none por omissão) * --sp-display-estilo normal | italic (Barlow no futebol) * --sp-display-peso 700 | 800 * --sp-display-caixa none | uppercase * --sp-display-espaco letter-spacing dos títulos * --sp-num-espaco letter-spacing dos placares * Definam-nos em [data-desporto=""] (NÃO só em :root[data-desporto]), * para os cartões do passo "desporto" e as miniaturas mostrarem a textura * e a letra de cada desporto dentro de uma página com outro desporto. * ════════════════════════════════════════════════════════════════════════ */ /* As nove famílias OFL do P00. O @import garante as fontes em qualquer página que carregue a base, mesmo que o se esqueça do ; o navegador só descarrega cada woff2 quando algum texto o usa. */ @import url("../vendor/fontes/fontes.css"); /* ─── 1. Tokens: marca, modo claro (omissão) ──────────────────────────── */ :root { color-scheme: light; /* 9.1 — valores do tema 'marca' (B07), modo claro */ --sp-bg: #EFEEF7; --sp-bg-2: #E7E6F0; --sp-surface: #FDFDFF; --sp-surface-2: #F6F6F8; --sp-surface-3: #EFEFF2; --sp-border: #E1E1E4; --sp-border-forte: #848484; --sp-text: #151422; --sp-text-2: #4E4D59; --sp-text-3: #686868; --sp-primary: #7C3AED; --sp-primary-ink: #FFFFFF; --sp-secondary:#2563EB; --sp-secondary-ink: #FFFFFF; --sp-accent:#0590A7; --sp-accent-ink:#0B0B0C; --sp-success: #147739; --sp-success-ink: #FFFFFF; --sp-warning: #A84D08; --sp-warning-ink: #FFFFFF; --sp-danger: #C81E1E; --sp-danger-ink: #FFFFFF; --sp-info: #1B66C6; --sp-info-ink: #FFFFFF; --sp-vitoria: #12883E; --sp-empate: #6E7784; --sp-derrota: #DC2626; --sp-focus: #7C3AED; --sp-destaque-linha: #EEE6FD; --sp-grad-hero: radial-gradient(110% 130% at 0% 0%, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0) 62%), radial-gradient(80% 100% at 100% 0%, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0) 58%), radial-gradient(90% 110% at 100% 100%, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0) 58%), radial-gradient(70% 90% at 0% 100%, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0) 55%), linear-gradient(160deg, #F7F3FE 0%, #EFEEF7 72%); --sp-chart-1: #7C3AED; --sp-chart-2:#2563EB; --sp-chart-3: #D714C0; --sp-chart-4: #D7142D; --sp-chart-5: #B67711; --sp-chart-6: #60910D; --sp-chart-7: #0E981E; --sp-chart-8: #0E9382; --sp-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sp-font-display: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sp-font-num: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sp-radius-s: 6px; --sp-radius-m: 10px; --sp-radius-l: 16px; --sp-radius-xl: 24px; --sp-shadow-1: 0 1px 2px rgba(15, 18, 28, 0.06), 0 1px 3px rgba(15, 18, 28, 0.1); --sp-shadow-2: 0 4px 12px rgba(15, 18, 28, 0.08), 0 2px 4px rgba(15, 18, 28, 0.06); --sp-shadow-3: 0 16px 40px rgba(15, 18, 28, 0.14), 0 4px 12px rgba(15, 18, 28, 0.08); --sp-textura: none; --sp-textura-opacidade: 0.04; --sp-campo-1: #2B3140; --sp-campo-2: #252B38; --sp-campo-linha: #E6E9EF; --sp-marca-1: #7C3AED; --sp-marca-2: #2563EB; --sp-marca-3: #06B6D4; --sp-marca-4: #22C55E; --sp-marca-grad: linear-gradient(90deg, var(--sp-marca-1), var(--sp-marca-2) 35%, var(--sp-marca-3) 65%, var(--sp-marca-4)); /* Degradê da marca para TEXTO (.sp-marca-texto). O --sp-marca-grad serve superfícies e contornos; como letra, o ciano e o verde da logo dão ~2,2:1 sobre fundo claro. Aqui os mesmos quatro tons, um degrau mais escuros no claro (≥ 4,3:1) e mais claros no escuro (≥ 6,2:1). */ --sp-marca-grad-texto: linear-gradient(90deg, #6D28D9, #1D4ED8 35%, #0E7490 65%, #15803D); /* ── tokens internos (não são contrato; usem-nos em vez de números) ── */ /* Espaço: escala de 4 px. */ --sp-esp-1: 4px; --sp-esp-2: 8px; --sp-esp-3: 12px; --sp-esp-4: 16px; --sp-esp-5: 24px; --sp-esp-6: 32px; --sp-esp-7: 48px; --sp-esp-8: 64px; /* Margem lateral da página: 16 px no telemóvel (360 px), até 32 px. */ --sp-margem: clamp(16px, 4vw, 32px); --sp-largura-max: 1280px; --sp-largura-texto: 68ch; /* Tipo: escala fluida (telemóvel → ecrã largo), razão ~1,2. */ --sp-fs-xs: 0.75rem; /* 12 */ --sp-fs-s: 0.8125rem; /* 13 */ --sp-fs-m: 0.9375rem; /* 15 — corpo */ --sp-fs-l: 1.0625rem; /* 17 */ --sp-fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* 19–22 */ --sp-fs-2xl: clamp(1.4rem, 1.25rem + 0.8vw, 1.75rem); /* 22–28 */ --sp-fs-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem); /* 28–40 */ --sp-fs-4xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem); /* 36–60 */ --sp-lh-apertado: 1.15; --sp-lh: 1.5; /* Letra dos títulos: o desporto pode mudar (ver ganchos no topo). */ --sp-display-estilo: normal; --sp-display-peso: 800; --sp-display-caixa: none; --sp-display-espaco: -0.01em; --sp-num-espaco: 0; /* Movimento (1.2): 180–260 ms, uma só curva. */ --sp-curva: cubic-bezier(.2, .8, .2, 1); --sp-dur-1: 180ms; --sp-dur-2: 220ms; --sp-dur-3: 260ms; /* Camadas: uma escala, para nenhum menu ficar por baixo de um cabeçalho. O véu do pré-carregamento cobre a página, mas fica POR BAIXO dos diálogos: um diálogo espera por uma pessoa, não pela rede — com o véu acima (era 110), o modal da senha do 428 ficava tapado e o clique não chegava ao "Confirmar". Menus e dicas ficam ACIMA dos modais: um menu aberto por um botão dentro de um modal desenhava-se por trás do fundo dele (era 60/70). */ --sp-z-fixo: 30; --sp-z-precarga: 90; --sp-z-modal: 100; --sp-z-menu: 104; --sp-z-dica: 106; --sp-z-toast: 120; /* Alvos de toque ≥ 44 px (WCAG 2.5.5 / guias iOS e Android). */ --sp-altura-controlo: 44px; --sp-altura-controlo-p: 36px; /* Véus e realces derivados das variáveis (seguem o tema sozinhos). */ --sp-veu: rgba(12, 12, 20, 0.52); } /* Os derivados declaram-se TAMBÉM no escopo das miniaturas: uma propriedade personalizada resolve os var() no elemento onde é declarada e os filhos herdam o valor já calculado. Só em :root, dentro de uma miniatura com outro tema (SP.tema.previsualizar) o realce e a tinta continuavam com as cores da página — realce claro num preview escuro, tinta roxa num preview do Flamengo. */ :root, .sp-tema-escopo { --sp-realce: color-mix(in srgb, var(--sp-text) 6%, transparent); --sp-realce-forte: color-mix(in srgb, var(--sp-text) 11%, transparent); --sp-tinta-primaria: color-mix(in srgb, var(--sp-primary) 10%, var(--sp-surface)); --sp-xadrez: repeating-conic-gradient(color-mix(in srgb, var(--sp-text) 8%, var(--sp-surface)) 0% 25%, var(--sp-surface) 0% 50%) 50% / 16px 16px; } /* ─── 2. Tokens: marca, modo escuro ───────────────────────────────────── */ /* Antes de o tema.js correr, o não tem data-modo e segue o sistema. Depois, data-modo manda (a escolha do topo é por produto, 9.4). As duas regras têm os mesmos valores — saída do B07 para modo:'escuro'. */ @media (prefers-color-scheme: dark) { :root:not([data-modo]) { color-scheme: dark; --sp-bg: #10101B; --sp-bg-2: #161621; --sp-surface: #1B1B25; --sp-surface-2: #22222C; --sp-surface-3: #2A2A34; --sp-border: #363640; --sp-border-forte: #747474; --sp-text: #EEEEF7; --sp-text-2: #B4B4BE; --sp-text-3: #929292; --sp-primary:#8A4FEF; --sp-primary-ink:#FFFFFF; --sp-secondary:#316BEC; --sp-secondary-ink:#FFFFFF; --sp-accent: #06B6D4; --sp-accent-ink: #0B0B0C; --sp-success: #22C55E; --sp-success-ink: #0B0B0C; --sp-warning: #F59E0B; --sp-warning-ink: #0B0B0C; --sp-danger: #F05252; --sp-danger-ink: #0B0B0C; --sp-info: #3B9BF5; --sp-info-ink: #0B0B0C; --sp-vitoria: #12883E; --sp-empate: #6E7784; --sp-derrota: #DC2626; --sp-focus: #8A4FEF; --sp-destaque-linha:#31254D; --sp-grad-hero: radial-gradient(110% 130% at 0% 0%, rgba(124, 58, 237, 0.42) 0%, rgba(124, 58, 237, 0) 62%), radial-gradient(80% 100% at 100% 0%, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 58%), radial-gradient(90% 110% at 100% 100%, rgba(6, 182, 212, 0.26) 0%, rgba(6, 182, 212, 0) 58%), radial-gradient(70% 90% at 0% 100%, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0) 55%), linear-gradient(160deg, #251E39 0%, #10101B 72%); --sp-chart-1:#8A4FEF; --sp-chart-2:#316BEC; --sp-chart-3: #EF4DDC; --sp-chart-4: #EF4D63; --sp-chart-5: #EFB14D; --sp-chart-6: #B3EF4D; --sp-chart-7: #4DEF61; --sp-chart-8: #4DEFDA; --sp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --sp-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --sp-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); --sp-textura-opacidade: 0.05; --sp-campo-1: #262B38; --sp-campo-2: #212631; --sp-veu: rgba(0, 0, 0, 0.66); --sp-marca-grad-texto: linear-gradient(90deg, #A78BFA, #60A5FA 35%, #22D3EE 65%, #4ADE80); } } :root[data-modo="escuro"] { color-scheme: dark; --sp-bg: #10101B; --sp-bg-2: #161621; --sp-surface: #1B1B25; --sp-surface-2: #22222C; --sp-surface-3: #2A2A34; --sp-border: #363640; --sp-border-forte: #747474; --sp-text: #EEEEF7; --sp-text-2: #B4B4BE; --sp-text-3: #929292; --sp-primary:#8A4FEF; --sp-primary-ink:#FFFFFF; --sp-secondary:#316BEC; --sp-secondary-ink:#FFFFFF; --sp-accent: #06B6D4; --sp-accent-ink: #0B0B0C; --sp-success: #22C55E; --sp-success-ink: #0B0B0C; --sp-warning: #F59E0B; --sp-warning-ink: #0B0B0C; --sp-danger: #F05252; --sp-danger-ink: #0B0B0C; --sp-info: #3B9BF5; --sp-info-ink: #0B0B0C; --sp-vitoria: #12883E; --sp-empate: #6E7784; --sp-derrota: #DC2626; --sp-focus: #8A4FEF; --sp-destaque-linha:#31254D; --sp-grad-hero: radial-gradient(110% 130% at 0% 0%, rgba(124, 58, 237, 0.42) 0%, rgba(124, 58, 237, 0) 62%), radial-gradient(80% 100% at 100% 0%, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 58%), radial-gradient(90% 110% at 100% 100%, rgba(6, 182, 212, 0.26) 0%, rgba(6, 182, 212, 0) 58%), radial-gradient(70% 90% at 0% 100%, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0) 55%), linear-gradient(160deg, #251E39 0%, #10101B 72%); --sp-chart-1:#8A4FEF; --sp-chart-2:#316BEC; --sp-chart-3: #EF4DDC; --sp-chart-4: #EF4D63; --sp-chart-5: #EFB14D; --sp-chart-6: #B3EF4D; --sp-chart-7: #4DEF61; --sp-chart-8: #4DEFDA; --sp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --sp-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --sp-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); --sp-textura-opacidade: 0.05; --sp-campo-1: #262B38; --sp-campo-2: #212631; --sp-veu: rgba(0, 0, 0, 0.66); --sp-marca-grad-texto: linear-gradient(90deg, #A78BFA, #60A5FA 35%, #22D3EE 65%, #4ADE80); } /* O véu dos modais depende só do modo, não das cores do clube: com um tema de clube (vars em linha) basta o data-modo. */ [data-modo="claro"] { --sp-veu: rgba(12, 12, 20, 0.52); --sp-marca-grad-texto: linear-gradient(90deg, #6D28D9, #1D4ED8 35%, #0E7490 65%, #15803D); } [data-modo="escuro"] { --sp-veu: rgba(0, 0, 0, 0.66); --sp-marca-grad-texto: linear-gradient(90deg, #A78BFA, #60A5FA 35%, #22D3EE 65%, #4ADE80); } /* ─── 3. Reposição ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 72px; /* âncoras não ficam por baixo do topo fixo */ hanging-punctuation: first last; } body { min-height: 100vh; min-height: 100dvh; background: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font-ui); font-size: var(--sp-fs-m); line-height: var(--sp-lh); font-feature-settings: 'cv11', 'ss01'; /* Inter: 1 e l distintos, a de um andar desligado */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* nunca scroll horizontal da página (12.3, 375 px) */ transition: background-color var(--sp-dur-3) var(--sp-curva), color var(--sp-dur-3) var(--sp-curva); } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } a { color: var(--sp-primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } p, h1, h2, h3, h4, h5, h6, li, dd, figcaption { overflow-wrap: break-word; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border: 0; padding: 0; min-width: 0; } legend { padding: 0; } hr { border: 0; border-top: 1px solid var(--sp-border); } [hidden] { display: none !important; } summary { cursor: pointer; } dialog { color: inherit; } /* SVG com traço herdam a cor do texto (ícones do SP.ico, 24×24, traço 2). */ svg:not([fill]) { fill: none; } /* ─── 4. Tipografia ───────────────────────────────────────────────────── */ h1, h2, h3, .sp-display, .sp-t1, .sp-t2, .sp-t3 { 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); line-height: var(--sp-lh-apertado); color: var(--sp-text); } h1, .sp-t1 { font-size: var(--sp-fs-3xl); } h2, .sp-t2 { font-size: var(--sp-fs-2xl); } h3, .sp-t3 { font-size: var(--sp-fs-xl); } h4, .sp-t4 { font-size: var(--sp-fs-l); font-weight: 700; line-height: 1.3; } .sp-t0 { 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-4xl); line-height: 1.02; } .sp-sobretitulo { font-size: var(--sp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-text-2); } .sp-texto-2 { color: var(--sp-text-2); } .sp-texto-3 { color: var(--sp-text-3); } .sp-texto-p { font-size: var(--sp-fs-s); } .sp-texto-xs { font-size: var(--sp-fs-xs); } .sp-texto-g { font-size: var(--sp-fs-l); } .sp-forte { font-weight: 700; } .sp-medio { font-weight: 600; } .sp-prosa { max-width: var(--sp-largura-texto); } .sp-prosa > * + * { margin-top: 0.75em; } /* Números: placares, contagens, tabelas. Algarismos de largura fixa para os dígitos não "dançarem" quando o relógio conta. */ .sp-num { font-family: var(--sp-font-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--sp-num-espaco); } .sp-tabular { font-variant-numeric: tabular-nums; } .sp-marca-texto { background: var(--sp-marca-grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Sem suporte de background-clip:text o texto fica na cor normal (legível). */ @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .sp-marca-texto { color: var(--sp-primary); -webkit-text-fill-color: currentColor; } } code, kbd, samp, pre { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; font-size: 0.92em; } kbd { display: inline-block; padding: 0 0.4em; border: 1px solid var(--sp-border-forte); border-bottom-width: 2px; border-radius: var(--sp-radius-s); background: var(--sp-surface-2); color: var(--sp-text); line-height: 1.5; } /* ─── 5. Foco, seleção, rolagem ───────────────────────────────────────── */ /* Anel de foco só com teclado (:focus-visible), sempre ≥ 3:1 (9.1). */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; border-radius: var(--sp-radius-s); } /* Navegadores sem :focus-visible mantêm o anel em qualquer foco. */ @supports not selector(:focus-visible) { :focus { outline: 2px solid var(--sp-focus); outline-offset: 2px; } } ::selection { background: color-mix(in srgb, var(--sp-primary) 28%, transparent); color: var(--sp-text); } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sp-text) 24%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sp-text) 22%, transparent); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--sp-text) 36%, transparent); } /* ─── 6. Acessibilidade ───────────────────────────────────────────────── */ /* Só para leitores de ecrã (rótulos de ícones, regiões vivas). */ .sp-so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* "Saltar para o conteúdo": invisível até receber foco. */ .sp-saltar { position: fixed; top: var(--sp-esp-2); left: var(--sp-esp-2); z-index: calc(var(--sp-z-toast) + 1); padding: var(--sp-esp-2) var(--sp-esp-4); border-radius: var(--sp-radius-m); background: var(--sp-primary); color: var(--sp-primary-ink); font-weight: 700; text-decoration: none; transform: translateY(-150%); transition: transform var(--sp-dur-1) var(--sp-curva); } .sp-saltar:focus-visible { transform: none; } /* Movimento reduzido (1.2): tudo passa a fade de 150 ms, os efeitos param. O tema.js põe data-movimento="reduzido" quando a pessoa o pede no painel (ou o sistema o pede), para o mesmo corte valer sem a media query. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-property: opacity, background-color, border-color, color !important; scroll-behavior: auto !important; } } :root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before, :root[data-movimento="reduzido"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-property: opacity, background-color, border-color, color !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: no-preference) { :root:not([data-movimento="reduzido"]) { scroll-behavior: smooth; } } /* Troca de tema (tema.js): sem transições durante a troca — ver o porquê em semTransicoes(). */ :root.sp-tema-a-mudar, :root.sp-tema-a-mudar *, :root.sp-tema-a-mudar *::before, :root.sp-tema-a-mudar *::after { transition: none !important; } /* Alto contraste do sistema (Windows): contornos visíveis em tudo. */ @media (forced-colors: active) { .sp-btn, .sp-entrada, .sp-escolha, .sp-pilula, .sp-cartao { border: 1px solid CanvasText; } :focus-visible { outline: 2px solid Highlight; } } /* ─── 7. Textura do desporto ──────────────────────────────────────────── */ /* A imagem é do CSS do desporto (F13–F15, --sp-textura); a opacidade vem do tema (B07). .sp-textura põe-na por trás do conteúdo de qualquer bloco; .sp-fundo-textura faz o mesmo na página inteira, fixa ao ecrã. */ .sp-textura { position: relative; isolation: isolate; } .sp-textura::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sp-textura); background-repeat: repeat; opacity: var(--sp-textura-opacidade); border-radius: inherit; } .sp-fundo-textura::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sp-textura); background-repeat: repeat; opacity: var(--sp-textura-opacidade); } .sp-fundo-textura { isolation: isolate; } /* Hero: gradiente do clube (lista de camadas, 9.1) + textura. O texto por cima usa --sp-text/--sp-text-2 (o B07 garante 4,5:1 no pior ponto). */ .sp-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sp-grad-hero), var(--sp-bg); color: var(--sp-text); border-radius: var(--sp-radius-xl); border: 1px solid var(--sp-border); } .sp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sp-textura); opacity: var(--sp-textura-opacidade); } /* ─── 8. Disposição (utilitários pequenos e previsíveis) ─────────────── */ .sp-contentor { width: 100%; max-width: var(--sp-largura-max); margin-inline: auto; padding-inline: var(--sp-margem); } .sp-pilha { display: flex; flex-direction: column; gap: var(--sp-gap, var(--sp-esp-4)); } .sp-pilha-p { display: flex; flex-direction: column; gap: var(--sp-esp-2); } .sp-pilha-g { display: flex; flex-direction: column; gap: var(--sp-esp-6); } .sp-linha { display: flex; align-items: center; gap: var(--sp-gap, var(--sp-esp-3)); min-width: 0; } .sp-linha-quebra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-gap, var(--sp-esp-2)); } .sp-entre { justify-content: space-between; } .sp-fim { justify-content: flex-end; } .sp-centro { display: grid; place-items: center; } .sp-cresce { flex: 1 1 auto; min-width: 0; } .sp-nao-encolhe { flex-shrink: 0; } .sp-grelha { display: grid; gap: var(--sp-gap, var(--sp-esp-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sp-grelha-min, 260px)), 1fr)); } .sp-grelha-2 { display: grid; gap: var(--sp-gap, var(--sp-esp-4)); grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-grelha-3 { display: grid; gap: var(--sp-gap, var(--sp-esp-4)); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 720px) { .sp-grelha-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sp-grelha-2, .sp-grelha-3 { grid-template-columns: minmax(0, 1fr); } } .sp-truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sp-linhas-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-rolar-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .sp-so-telemovel { display: none !important; } @media (max-width: 720px) { .sp-so-telemovel { display: revert !important; } .sp-so-largo { display: none !important; } } /* Miniatura com outro tema (passo "tema", cartões): o SP.tema.previsualizar põe as variáveis no contentor; aqui ganha o fundo e a letra delas. */ .sp-tema-escopo { background: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font-ui); } .sp-tema-escopo[data-modo="escuro"] { color-scheme: dark; } .sp-tema-escopo[data-modo="claro"] { color-scheme: light; } /* Selo de 20 px da marca dentro do painel (1.2). */ .sp-selo-marca { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sp-fs-xs); font-weight: 600; color: var(--sp-text-2); text-decoration: none; } .sp-selo-marca img { width: 20px; height: 20px; object-fit: contain; } /* Áreas seguras (iPhone com entalhe, barra de gestos do Android). */ .sp-seguro-baixo { padding-bottom: max(var(--sp-esp-3), env(safe-area-inset-bottom)); } .sp-seguro-topo { padding-top: max(var(--sp-esp-3), env(safe-area-inset-top)); } /* Impressão: sem fundos escuros nem elementos de navegação. */ @media print { :root { color-scheme: light; } body { background: #FFFFFF; color: #000000; } .sp-toasts, .sp-precarga, .sp-modal-fundo, .sp-nao-imprimir { display: none !important; } .sp-cartao, .sp-hero { box-shadow: none !important; border-color: #BBBBBB !important; } }