/* ============================================================ VII Torneio Inter-Lugares — Folha de estilos Mobile-first. Tokens de design em :root, depois componentes. Nota: as fontes (Barlow Condensed / Inter) já não são importadas aqui com @import — um @import é sempre bloqueante e escondia um "round trip" extra dentro da cadeia crítica (CSS -> CSS das fontes -> ficheiros .woff2). Agora são carregadas de forma assíncrona a partir de index.html (ver ), com preconnect às origens. ============================================================ */ :root { /* Cor — mantém a identidade azul/dourado original, com mais contraste */ --cor-fundo: #0a2138; --cor-fundo-alt: #0e2c47; --cor-superficie: #123a5c; --cor-superficie-alt: #16324a; --cor-primaria: #f4e736; --cor-primaria-escura: #d9c92b; --cor-acento: #2d5bd7; --cor-texto: #f3f6fa; --cor-texto-suave: #a9c0d6; --cor-borda: rgba(244, 231, 54, 0.28); --cor-live: #ef4444; --cor-intervalo: #f59e0b; --cor-sucesso: #34c37b; /* Tipografia */ --fonte-display: "Barlow Condensed", "Segoe UI", sans-serif; --fonte-corpo: "Inter", "Segoe UI", sans-serif; /* Espaçamento */ --espaco-1: 0.25rem; --espaco-2: 0.5rem; --espaco-3: 0.75rem; --espaco-4: 1rem; --espaco-5: 1.5rem; --espaco-6: 2rem; --espaco-7: 3rem; --espaco-8: 4.5rem; /* Formas */ --raio-sm: 8px; --raio-md: 14px; --raio-lg: 22px; --sombra-card: 0 10px 30px rgba(2, 10, 20, 0.35); --sombra-card-hover: 0 16px 40px rgba(2, 10, 20, 0.45); --largura-conteudo: 960px; } /* --- Reset ligeiro ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--fonte-corpo); background: linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-fundo-alt) 100%); color: var(--cor-texto); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--fonte-display); font-weight: 700; letter-spacing: 0.01em; } /* --- Acessibilidade -------------------------------------------------- */ .saltar-para-conteudo { position: absolute; left: -999px; top: 0; background: var(--cor-primaria); color: #0a2138; padding: var(--espaco-3) var(--espaco-4); z-index: 2000; border-radius: 0 0 var(--raio-sm) 0; font-weight: 600; text-decoration: none; } .saltar-para-conteudo:focus { left: 0; } :focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Cabeçalho -------------------------------------------------------- */ .cabecalho { position: relative; height: 220px; width: 100%; background-image: linear-gradient(180deg, rgba(10, 33, 56, 0) 55%, var(--cor-fundo) 100%), url("../images/header-1.png"); background-size: cover; background-position: center; } @media (min-width: 768px) { .cabecalho { height: 420px; } } /* --- Navegação ---------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 1000; background-color: rgba(10, 33, 56, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cor-borda); } .nav__interior { max-width: var(--largura-conteudo); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--espaco-2) var(--espaco-4); } .marca { font-family: var(--fonte-display); font-weight: 800; font-size: 1.1rem; color: var(--cor-primaria); text-decoration: none; letter-spacing: 0.03em; white-space: nowrap; } .botao-menu { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); cursor: pointer; } .botao-menu span { display: block; height: 2px; margin: 0 8px; background-color: var(--cor-primaria); transition: transform 0.2s ease, opacity 0.2s ease; } .menu-principal { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--cor-fundo-alt); border-bottom: 1px solid var(--cor-borda); } .menu-principal--aberto { display: flex; } .menu-principal a { display: block; padding: var(--espaco-4); text-decoration: none; color: var(--cor-primaria); font-weight: 600; border-top: 1px solid var(--cor-borda); } .menu-principal a:hover, .menu-principal a:focus-visible { background-color: rgba(244, 231, 54, 0.08); } @media (min-width: 768px) { .botao-menu { display: none; } .menu-principal { display: flex; flex-direction: row; position: static; background: transparent; border-bottom: none; gap: var(--espaco-2); } .menu-principal a { border-top: none; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-sm); } } /* --- Estrutura geral ------------------------------------------------ */ main { display: block; } .seccao { padding: var(--espaco-6) var(--espaco-4); border-bottom: 1px solid rgba(255, 255, 255, 0.06); max-width: var(--largura-conteudo); margin: 0 auto; animation: aparecer 0.5s ease both; } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .seccao__titulo { color: var(--cor-primaria); text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 var(--espaco-5); text-transform: uppercase; } .estado-vazio, .estado-erro { text-align: center; color: var(--cor-texto-suave); padding: var(--espaco-5); } .estado-erro { color: #fca5a5; } /* --- Jogos (cartões) -------------------------------------------------- */ .lista-jogos { display: grid; gap: var(--espaco-3); } .jogo-card { background-color: var(--cor-superficie-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--espaco-4); box-shadow: var(--sombra-card); transition: transform 0.2s ease, box-shadow 0.2s ease; } .jogo-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-card-hover); } .jogo-card--meias { border-color: rgba(45, 91, 215, 0.55); background: linear-gradient(135deg, var(--cor-superficie-alt) 0%, rgba(45, 91, 215, 0.16) 100%); } .jogo-card--final { border-color: rgba(244, 231, 54, 0.55); background: linear-gradient(135deg, var(--cor-superficie-alt) 0%, rgba(244, 231, 54, 0.12) 100%); } .jogo-card__meta { display: flex; align-items: center; gap: var(--espaco-3); font-size: 0.8rem; color: var(--cor-texto-suave); margin-bottom: var(--espaco-3); flex-wrap: wrap; } .jogo-card__fase { margin-left: auto; background-color: rgba(244, 231, 54, 0.12); color: var(--cor-primaria); padding: 0.15em 0.6em; border-radius: 999px; font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.03em; } .jogo-card__equipas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--espaco-3); } /* A equipa da esquerda encosta à esquerda, a da direita encosta à direita; o resultado fica centrado na coluna do meio. */ .jogo-card__equipas > .equipa-slot:first-child { align-items: flex-start; text-align: left; } .jogo-card__equipas > .equipa-slot:last-child { align-items: flex-end; text-align: right; } .equipa-slot { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); text-align: center; min-width: 0; } .equipa-slot__logo { width: 40px; height: 40px; object-fit: contain; } .equipa-slot__logo--placeholder { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--cor-texto-suave); display: flex; align-items: center; justify-content: center; color: var(--cor-texto-suave); font-family: var(--fonte-display); font-weight: 700; } .equipa-slot__nome { font-weight: 700; font-size: 0.85rem; overflow-wrap: anywhere; } .equipa-slot--pendente .equipa-slot__nome { color: var(--cor-texto-suave); font-weight: 500; font-size: 0.75rem; font-style: italic; } /* Coluna central: o placar propriamente dito fica sempre numa única linha horizontal; o crachá de estado (Em direto/Intervalo), quando existe, aparece por baixo dessa linha. */ .jogo-card__resultado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-1); min-width: 72px; align-self: stretch; } .jogo-card__placar { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.3em; font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 700; line-height: 1; white-space: nowrap; } .jogo-card__placar .versus { font-family: var(--fonte-corpo); font-size: 0.85rem; font-weight: 600; color: var(--cor-texto-suave); } .separador { color: var(--cor-texto-suave); margin: 0 0.15em; } .etiqueta { display: inline-block; font-size: 0.65rem; padding: 0.2em 0.55em; border-radius: 999px; font-weight: 700; text-transform: uppercase; } .etiqueta--live { background-color: var(--cor-live); color: white; animation: pulsar 1.6s ease-in-out infinite; } .etiqueta--intervalo { background-color: var(--cor-intervalo); color: #1c1200; } @keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* --- Tabelas (classificação, marcadores, classificação final) ------- */ .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio-md); box-shadow: var(--sombra-card); } table { width: 100%; border-collapse: collapse; background-color: var(--cor-superficie); border-radius: var(--raio-md); overflow: hidden; } .tabela-scroll table { min-width: 560px; } caption { caption-side: top; text-align: left; padding: var(--espaco-2) var(--espaco-3); font-size: 0.8rem; color: var(--cor-texto-suave); } th, td { padding: 0.65em 0.75em; text-align: center; border-bottom: 1px solid var(--cor-borda); font-size: 0.9rem; white-space: nowrap; } th { color: var(--cor-primaria); font-family: var(--fonte-display); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; background-color: rgba(0, 0, 0, 0.18); position: sticky; top: 0; } tbody tr:hover { background-color: rgba(244, 231, 54, 0.06); } .coluna-equipa { display: flex; align-items: center; gap: var(--espaco-2); text-align: left; white-space: nowrap; } .logo-equipa { width: 24px; height: 24px; object-fit: contain; } .pendente { color: var(--cor-texto-suave); font-style: italic; font-weight: 400; } .nota-classificacao { text-align: center; color: var(--cor-texto-suave); font-size: 0.85rem; margin-top: var(--espaco-3); } /* --- Equipas --------------------------------------------------------- */ .grelha-equipas { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--espaco-5); justify-items: center; } .cartao-equipa { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); text-align: center; padding: var(--espaco-4); border-radius: var(--raio-md); transition: transform 0.2s ease, background-color 0.2s ease; width: 100%; } .cartao-equipa:hover { transform: translateY(-3px); background-color: rgba(244, 231, 54, 0.06); } .logo-grande { width: 80px; height: 80px; object-fit: contain; } .nome-equipa { font-family: var(--fonte-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.95rem; } /* --- Marcadores -------------------------------------------------------- */ .tabela-marcadores-container { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-4); } .botao { padding: 0.6em 1.4em; background-color: transparent; color: var(--cor-primaria); border: 1px solid var(--cor-primaria); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .botao:hover { background-color: var(--cor-primaria); color: #1c1200; } .botao:active { transform: scale(0.97); } /* --- Prémios individuais ---------------------------------------------- */ .grelha-premios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espaco-5); } .cartao-premio { background-color: var(--cor-superficie-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--espaco-5); text-align: center; box-shadow: var(--sombra-card); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cartao-premio:hover { transform: translateY(-2px); box-shadow: var(--sombra-card-hover); } .cartao-premio__icone { font-size: 2rem; line-height: 1; margin-bottom: var(--espaco-2); } .cartao-premio__titulo { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--cor-primaria); font-size: 0.85rem; margin-bottom: var(--espaco-3); } .cartao-premio__vencedor { display: flex; align-items: center; justify-content: center; gap: var(--espaco-2); margin-bottom: var(--espaco-1); } .cartao-premio__nome { font-family: var(--fonte-display); font-weight: 700; font-size: 1.2rem; } .cartao-premio__equipa { display: block; color: var(--cor-texto-suave); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } /* --- Calendário ----------------------------------------------------- */ .calendario-container { display: flex; flex-direction: column; gap: var(--espaco-5); } .calendario-dia { background-color: var(--cor-superficie-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--espaco-4); box-shadow: var(--sombra-card); } .calendario-dia h3 { font-size: 1.15rem; color: var(--cor-primaria); margin: 0 0 var(--espaco-3); padding-left: var(--espaco-3); border-left: 4px solid var(--cor-primaria); text-transform: uppercase; letter-spacing: 0.02em; } .calendario-jogo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } .calendario-jogo:last-child { border-bottom: none; } .calendario-jogo__conteudo { display: flex; flex-direction: column; gap: 0.25em; flex: 1; min-width: 0; } .calendario-jogo__rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cor-texto-suave); font-weight: 600; } .hora { font-family: var(--fonte-display); font-weight: 700; font-size: 1rem; color: var(--cor-texto-suave); min-width: 60px; } .equipas { display: flex; align-items: center; gap: var(--espaco-3); font-weight: 600; flex-wrap: wrap; } .equipa--pendente { color: var(--cor-texto-suave); font-weight: 400; font-style: italic; } .versus { font-weight: 500; color: var(--cor-texto-suave); font-size: 0.85rem; } /* --- Rodapé --------------------------------------------------------- */ .rodape { text-align: center; padding: var(--espaco-6) var(--espaco-4); background-color: #051523; } .rodape p { margin: 0 0 var(--espaco-2); font-size: 0.9rem; color: var(--cor-texto-suave); } .rodape a { color: var(--cor-primaria); text-decoration: none; } .rodape a:hover { text-decoration: underline; } .rodape__dev { font-size: 0.8rem; } /* --- Ecrãs largos ----------------------------------------------------- */ @media (min-width: 640px) { .lista-jogos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .lista-jogos { grid-template-columns: repeat(3, 1fr); } }