/* ============================================================================= FEM — TOKENS O "vocabulário" visual do site inteiro. Nenhuma regra de componente mora aqui. Quer mudar a cara da FEM? Mexa SÓ neste arquivo. Cor, tipografia, ritmo de espaçamento, velocidade das animações e o formato dos cantos saem todos daqui, e o resto do CSS obedece sem precisar ser tocado. Ordem de carregamento: tokens.css → fem.css → animacoes.css ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); :root { /* ========================================================================== 1. SUPERFÍCIES — noite de estádio, do mais fundo ao mais próximo ========================================================================== */ --bg-0: #060a08; /* fundo absoluto da página */ --bg-1: #0a1210; /* cartões, rodapé */ --bg-2: #0f1a16; /* hover de cartão, campos */ --bg-3: #15241e; /* pílulas, botões secundários */ --bg-4: #1c3128; /* bordas cheias, estados ativos */ --bg-vidro: rgba(8, 14, 11, .72); /* navbar / overlays com blur */ /* ========================================================================== 2. CORES DA LIGA Verde = gramado sob refletor. Âmbar = troféu/artilharia. Vermelho = ao vivo. ========================================================================== */ --grama: #00e884; --grama-esc: #009a55; --grama-luz: #7dffc2; --grama-noite:#04452c; /* verde muito escuro, para profundidade de botão */ --refletor: #ffb703; --refletor-q: #ff8f00; --refletor-luz:#ffd76b; --sangue: #ff3d5a; /* ao vivo, derrota, cartão vermelho */ --gelo: #7dd3fc; /* classificação, informação neutra */ --prata: #cfd8dc; /* 2º lugar */ --bronze: #cd7f32; /* 3º lugar */ /* ========================================================================== 3. TEXTO — quatro níveis, do título ao rodapé apagado ========================================================================== */ --txt: #eaf4ef; --txt-2: #a9beb4; --txt-3: #6f867c; --txt-4: #465650; /* ========================================================================== 4. LINHAS E BORDAS ========================================================================== */ --linha: rgba(0, 232, 132, .13); /* borda padrão, esverdeada */ --linha-2: rgba(234, 244, 239, .07); /* divisória interna, neutra */ --linha-3: rgba(0, 232, 132, .34); /* borda em destaque / hover */ /* ========================================================================== 5. TIPOGRAFIA ========================================================================== */ --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif; --ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; /* escala fluida — usada por títulos e números grandes */ --t-xs: 10px; --t-sm: 11px; --t-md: 13px; --t-base:15px; --t-lg: 17px; --t-xl: clamp(19px, 2.2vw, 24px); --t-2xl: clamp(24px, 3.4vw, 40px); --t-3xl: clamp(30px, 5.4vw, 60px); --t-4xl: clamp(38px, 5.6vw, 78px); /* espaçamento entre letras dos rótulos maiúsculos */ --rotulo: .2em; /* ========================================================================== 6. ESPAÇAMENTO — escala de 4px, sempre múltiplos ========================================================================== */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 22px; --e-6: 30px; --e-7: 44px; --e-8: 64px; --e-9: 88px; /* ========================================================================== 7. GEOMETRIA DE BLOCO — a assinatura da FEM --corte é o recorte de canto "pixelado" reaproveitado por todo o site. ========================================================================== */ --pixel: 6px; --nav-h: 68px; --largura: 1240px; --corte: polygon( 0 var(--pixel), var(--pixel) var(--pixel), var(--pixel) 0, calc(100% - var(--pixel)) 0, calc(100% - var(--pixel)) var(--pixel), 100% var(--pixel), 100% calc(100% - var(--pixel)), calc(100% - var(--pixel)) calc(100% - var(--pixel)), calc(100% - var(--pixel)) 100%, var(--pixel) 100%, var(--pixel) calc(100% - var(--pixel)), 0 calc(100% - var(--pixel)) ); --corte-tl: polygon(var(--pixel) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pixel)); --corte-diag: polygon( var(--pixel) 0, 100% 0, 100% calc(100% - var(--pixel)), calc(100% - var(--pixel)) 100%, 0 100%, 0 var(--pixel) ); /* ========================================================================== 8. MOVIMENTO Tudo que anima puxa duração e curva daqui. Trocar --dur-* muda o ritmo do site inteiro — e é assim que o "prefers-reduced-motion" desliga tudo de uma vez. ========================================================================== */ --dur-1: .12s; /* resposta de clique */ --dur-2: .22s; /* hover */ --dur-3: .38s; /* transformações de layout */ --dur-4: .6s; /* entradas na tela */ --dur-5: .9s; /* contadores, barras */ --mola: cubic-bezier(.34, 1.56, .64, 1); /* passa do ponto e volta */ --saida: cubic-bezier(.22, 1, .36, 1); /* rápido no começo, pousa macio */ --suave: cubic-bezier(.65, 0, .35, 1); /* simétrica, para deslocamentos */ --cascata: 55ms; /* atraso entre irmãos numa entrada em sequência */ /* ========================================================================== 9. ELEVAÇÃO E LUZ ========================================================================== */ --sombra: 0 18px 45px -20px rgba(0, 0, 0, .95); --sombra-lg: 0 32px 80px -30px rgba(0, 0, 0, 1); --brilho: 0 0 40px -18px var(--grama); /* Profundidade dos botões. Usa drop-shadow (e não box-shadow) porque só ele acompanha o recorte pixelado — box-shadow seria cortado pelo clip-path. Os três valores têm a MESMA quantidade de funções de propósito: é o que permite o navegador interpolar entre eles em vez de trocar de estalo. */ --bloco: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); --bloco-alto: drop-shadow(0 7px 0 rgba(0, 0, 0, .5)) drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); --bloco-baixo:drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); /* bisel interno — o brilho em cima e a sombra embaixo que dão volume */ --bisel: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .28); /* ========================================================================== 10. CAMADAS (z-index) — nomeadas, para nunca mais chutar número ========================================================================== */ --z-fundo: -2; --z-grade: -1; --z-nav: 100; --z-modal: 400; --z-busca: 500; --z-toast: 700; --z-grao: 9998; } /* --------------------------------------------------------------------------- Utilitários de forma — o recorte de bloco aplicado a qualquer elemento. --------------------------------------------------------------------------- */ .pix { clip-path: var(--corte); } .pix-tl { clip-path: var(--corte-tl); } .pix-diag { clip-path: var(--corte-diag); } .pix-g { --pixel: 10px; } .pix-p { --pixel: 4px; } /* --------------------------------------------------------------------------- Acessibilidade: quem pede menos movimento recebe o site inteiro parado. Como toda animação usa --dur-*, zerar os tokens já resolve 90% dos casos. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms; --dur-4: .01ms; --dur-5: .01ms; --cascata: 0ms; } }