/* ========================================================================== Arquivo do Clube — TOKENS ========================================================================== Toda cor, tamanho e espaçamento do site vive aqui, e só aqui. Antes existiam SEIS vermelhos disputando o papel de cor do clube (#8c1d2c, #741624, #b91c1c, #dc2626, #991b1b e o #CC0000 que só aparecia em atributos inline). Agora existe um: --ac-rubro. Regra: nenhum outro arquivo declara cor literal. Se precisar de um tom que não está aqui, ele vira token aqui primeiro. Os dois temas são o clube: Os dois temas saem do MESMO vermelho: #BB0000, o do escudo. CLARO branco, com #BB0000 de acento ESCURO a escala inteira derivada de #BB0000 — matiz 0°, do quase-preto (#330505) ao rosa claro (#FF8A8A) Nada de vinho arroxeado nem de cinza com detalhe vermelho: o matiz é 0° em toda a escala escura, o mesmo do escudo. ========================================================================== */ :root { /* ---------- papel e tinta: BRANCO ---------- Branco puro. O que separa um card da página não é uma diferença de fundo, é a régua — filete de 1px. É por isso que o sistema se chama assim. */ --ac-papel: #FFFFFF; /* fundo da página */ --ac-papel-alto: #FFFFFF; /* fichas, tabelas, metaboxes */ --ac-papel-fundo: #F5F4F4; /* cabeçalho de tabela, poços, estados vazios */ --ac-tinta: #1A1414; /* texto principal */ --ac-tinta-2: #5E5454; /* legendas, metadados, texto secundário */ --ac-tinta-3: #8C8080; /* texto terciário, placeholders */ --ac-regua: #E4E0E0; /* todo filete e borda */ --ac-regua-forte: #C6C0C0; /* borda que precisa se afirmar */ /* ---------- identidade ---------- #BB0000 é o vermelho do escudo. Ele é a base dos dois temas: no claro é o acento sobre branco; no escuro, é dele que sai toda a escala de fundo. */ --ac-rubro: #BB0000; --ac-rubro-vivo: #8F0000; /* estado ativo / hover: escurece, não clareia */ --ac-rubro-fraco: #FCEDED; --ac-sobre-rubro: #FFFFFF; /* ---------- resultado ---------- Sempre acompanhado da LETRA (V/E/D). Cor sozinha não comunica: quem não distingue verde de vermelho via três marcas iguais. --ac-derrota puxa para o alaranjado de propósito: no tema escuro o fundo inteiro é vermelho, e uma derrota cor de vinho sumiria dentro dele. */ --ac-vitoria: #1B6B43; --ac-empate: #7D6318; --ac-derrota: #A8332B; /* O empate PINTADO é diferente do empate ESCRITO. Escrito sobre branco, um amarelo vivo é ilegível — por isso --ac-empate é o mostarda escuro. Mas na barra de proporção ele é um bloco sólido de cor, onde ninguém lê nada: ali o mostarda parecia verde-oliva, e o empate precisa ser reconhecível como AMARELO ao lado do verde e do vermelho. */ --ac-empate-cheio: #EFC02A; --ac-vitoria-bg: #E7F1EB; --ac-empate-bg: #F6EFDF; --ac-derrota-bg: #F9E9E6; /* ---------- vocabulário do futebol ---------- Cartão amarelo e vermelho não são "cores de aviso": são objetos do jogo, com cor própria e reconhecida. Jogo marcante é o destaque editorial. */ --ac-amarelo: #F6D32D; --ac-amarelo-ink: #4A3B00; --ac-vermelho: #E01B24; --ac-vermelho-ink:#FFFFFF; --ac-marcante: #E9B949; --ac-marcante-ink:#4A3208; /* ---------- tipografia ---------- */ --ac-fonte-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --ac-fonte-texto: "Source Serif 4", Georgia, "Times New Roman", serif; --ac-fonte-etiq: "Archivo Narrow", "Archivo", Arial, sans-serif; --ac-fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Escala fluida: o título de uma ficha precisa de presença no desktop sem estourar no celular. clamp() resolve sem breakpoint. */ --ac-t-xs: .75rem; --ac-t-sm: .8125rem; --ac-t-md: .9375rem; --ac-t-lg: 1.0625rem; --ac-t-xl: clamp(1.25rem, 1.6vw, 1.4rem); --ac-t-2xl: clamp(1.5rem, 2.4vw, 1.9rem); --ac-t-3xl: clamp(1.9rem, 3.6vw, 2.6rem); --ac-t-4xl: clamp(2.4rem, 5.5vw, 3.6rem); --ac-t-placar: clamp(2.8rem, 8vw, 4.75rem); /* Entrelinha e espaçamento de letra andam com o tamanho: título grande pede entrelinha curta e letra apertada; texto pequeno pede o contrário. */ --ac-lh-apertada: 1.04; --ac-lh-titulo: 1.15; --ac-lh-texto: 1.62; --ac-ls-display: -.035em; --ac-ls-titulo: -.018em; --ac-ls-etiq: .12em; /* ---------- espaço ---------- */ --ac-e-1: .25rem; --ac-e-2: .5rem; --ac-e-3: .75rem; --ac-e-4: 1rem; --ac-e-5: 1.5rem; --ac-e-6: 2rem; --ac-e-7: 3rem; /* ---------- forma ---------- */ --ac-raio: 5px; --ac-raio-sm: 3px; --ac-raio-lg: 10px; /* Uma transição só, para tudo. Interface com cinco durações diferentes parece feita por cinco pessoas. */ --ac-transicao: 140ms cubic-bezier(.2, .6, .3, 1); --ac-sombra: 0 1px 2px rgba(22,22,26,.04), 0 8px 24px -12px rgba(22,22,26,.10); --ac-largura: 1100px; } /* ========================================================================== O TEMA ESCURO FOI DESLIGADO ========================================================================== O site passou a ter uma pele só, a clara — e "só a clara" tem de valer inclusive para quem está com o sistema operacional no escuro. Por isso o bloco `@media (prefers-color-scheme: dark)` saiu junto com o alternador: se ficasse, metade dos visitantes continuaria vendo o site escuro sem ter como mudar, o que é pior que ter os dois temas. A escala escura inteira está preservada no histórico do projeto e continua documentada aqui embaixo, comentada. Ela era derivada do mesmo #BB0000 do escudo — matiz 0° do quase-preto (#330505) ao rosa claro (#FF8A8A) —, então voltar a ligá-la é descomentar, não reconstruir. --ac-papel: #330505 --ac-papel-alto: #470A0A --ac-papel-fundo: #210202 --ac-tinta: #FDEBEB --ac-tinta-2: #ECBFBF --ac-tinta-3: #CC8E8E --ac-regua: #731B1B --ac-regua-forte:#952727 --ac-rubro: #FF8A8A --ac-rubro-vivo: #FFB8B8 --ac-rubro-fraco:#560F0F --ac-sobre-rubro: #330505 --ac-vitoria: #6ED598 --ac-empate: #EFC94F --ac-empate-cheio: #F2CE4E --ac-derrota: #FFA07A --ac-vitoria-bg: #173021 --ac-empate-bg: #332A12 --ac-derrota-bg: #3F1A10 --ac-marcante: #EFC94F --ac-marcante-ink: #33270A --ac-sombra: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -14px rgba(0,0,0,.75) ========================================================================== */