/* tema.css — a paleta do Painel Majors, nos dois temas. * * Antes cada página tinha o seu próprio :root com as mesmas 12 cores copiadas, * e mais 700 valores fixos espalhados pelo CSS. Mudar uma cor era caçar em 20 * arquivos. Agora é aqui, e só aqui. * * O site abre no CLARO. O escuro (o asfalto original) continua inteiro, a um * clique no menu, e é o padrão pra quem tem o sistema em modo escuro e nunca * escolheu nada. * * --------------------------------------------------------------------------- * Como os nomes funcionam * * --bg --surface --sunken --line superfícies, do fundo pro elevado * --text --text-2 --text-3 texto, do mais forte pro mais apagado * --paint --course --open --soon as cores de marca, pra PREENCHER * --paint-ink --course-ink ... as mesmas cores, pra ESCREVER * * A separação entre "preencher" e "escrever" é a parte que importa. O amarelo * #F2C14E é a cara do site e funciona como fundo de botão nos dois temas, mas * como texto sobre branco ele tem contraste 1.9:1, ou seja, ilegível. Então * texto amarelo no claro usa --paint-ink, que é o mesmo amarelo escurecido até * passar em contraste. No escuro os dois são a mesma cor e nada muda. * * Os nomes antigos (--asphalt, --chalk, --fog...) continuam valendo como * apelido, senão eu teria que reescrever 1.167 usos de var() pra nada. * ------------------------------------------------------------------------- */ :root { color-scheme: light; /* superfícies */ --bg: #F4F6F9; /* fundo da página, branco com um toque de cinza-asfalto */ --surface: #FFFFFF; /* cartão */ --surface-2: #FAFBFD; /* cartão em segundo plano */ --raised: #FFFFFF; /* cartão sobre cartão */ --sunken: #EDF1F5; /* poço: campo de formulário, caixa de número */ --line: #DFE5EC; /* borda padrão */ --line-forte: #C3CDD8; /* borda de destaque */ /* texto */ --text: #10171F; --text-2: #55636F; /* apoio, legenda */ --text-3: #636F79; /* nota de rodapé, unidade (4.75:1, passa AA) */ --on-paint: #12161C; /* texto sobre botão amarelo, nos dois temas */ /* marca: preencher */ --paint: #F2C14E; --paint-hover: #E8B233; --course: #46A6D6; --open: #4CC98A; --soon: #FF6B54; /* marca: escrever (escurecidas até passarem em contraste no claro) */ --paint-ink: #8A6200; --course-ink: #10688F; --open-ink: #17734A; --soon-ink: #C0341E; /* sombra: no claro ela substitui a borda como jeito de elevar */ --sombra: 0 1px 2px rgba(16,23,31,.05), 0 6px 16px rgba(16,23,31,.06); --sombra-alta: 0 2px 4px rgba(16,23,31,.06), 0 14px 32px rgba(16,23,31,.11); /* listras verticais do fundo, a marcação de pista */ --pista: rgba(16,23,31,.045); /* véus: as cores de marca em transparência, pra fundo de etiqueta */ --veu-paint: rgba(191,145,20,.13); --veu-course: rgba(16,104,143,.11); --veu-open: rgba(23,115,74,.11); --veu-soon: rgba(192,52,30,.10); --veu-neutro: rgba(16,23,31,.05); /* bordas coloridas das etiquetas. No claro elas partem da cor de texto, não * da cor de preenchimento: amarelo vivo a 40% sobre branco some. */ --borda-paint: rgba(138,98,0,.38); --borda-course: rgba(16,104,143,.34); --borda-open: rgba(23,115,74,.34); --borda-soon: rgba(192,52,30,.32); --borda-fraca: rgba(16,23,31,.10); /* o menu, que fica por cima do conteúdo rolando */ --nav-bg: rgba(255,255,255,.88); /* apelidos dos nomes antigos: não reescrever 1.167 var() por gosto */ --asphalt: var(--bg); --asphalt-2: var(--surface); --chalk: var(--text); --fog: var(--text-2); --dim: var(--text-3); } /* O asfalto original. Vale quando a pessoa escolhe no menu (data-tema no ) * e quando o sistema está no escuro e ela nunca escolheu (o @media abaixo). */ :root[data-tema="escuro"] { color-scheme: dark; --bg: #12161C; --surface: #1A212B; --surface-2: #151B23; --raised: #212A35; --sunken: #0E141B; --line: #2E3A47; --line-forte: #3D4B5A; --text: #EDF1F5; --text-2: #8B98A7; --text-3: #828F9C; /* era #5C6875, que dava 3.19:1 sobre o cartão e reprovava */ --on-paint: #12161C; --paint: #F2C14E; --paint-hover: #F7CE6D; --course: #46A6D6; --open: #4CC98A; --soon: #FF6B54; /* no escuro a cor de marca já lê bem como texto: nada a escurecer */ --paint-ink: #F2C14E; --course-ink: #46A6D6; --open-ink: #4CC98A; --soon-ink: #FF6B54; --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35); --sombra-alta: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5); --pista: rgba(242,193,78,.04); --veu-paint: rgba(242,193,78,.13); --veu-course: rgba(70,166,214,.14); --veu-open: rgba(76,201,138,.13); --veu-soon: rgba(255,107,84,.13); --veu-neutro: rgba(255,255,255,.05); --borda-paint: rgba(242,193,78,.42); --borda-course: rgba(70,166,214,.45); --borda-open: rgba(76,201,138,.42); --borda-soon: rgba(255,107,84,.42); --borda-fraca: rgba(46,58,71,.55); --nav-bg: rgba(18,22,28,.92); /* no asfalto o amarelo lê bem: volta a ser vivo */ --cor-berlin: #D9A324; } /* Primeira visita de quem usa o sistema no escuro: entrega o escuro. * O seletor :not([data-tema]) garante que a escolha manual sempre ganha. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --bg:#12161C; --surface:#1A212B; --surface-2:#151B23; --raised:#212A35; --sunken:#0E141B; --line:#2E3A47; --line-forte:#3D4B5A; --text:#EDF1F5; --text-2:#8B98A7; --text-3:#828F9C; --on-paint:#12161C; --paint:#F2C14E; --paint-hover:#F7CE6D; --course:#46A6D6; --open:#4CC98A; --soon:#FF6B54; --paint-ink:#F2C14E; --course-ink:#46A6D6; --open-ink:#4CC98A; --soon-ink:#FF6B54; --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35); --sombra-alta:0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5); --pista:rgba(242,193,78,.04); --veu-paint:rgba(242,193,78,.13); --veu-course:rgba(70,166,214,.14); --veu-open:rgba(76,201,138,.13); --veu-soon:rgba(255,107,84,.13); --veu-neutro:rgba(255,255,255,.05); --borda-paint:rgba(242,193,78,.42); --borda-course:rgba(70,166,214,.45); --borda-open:rgba(76,201,138,.42); --borda-soon:rgba(255,107,84,.42); --borda-fraca:rgba(46,58,71,.55); --nav-bg:rgba(18,22,28,.92); } } /* Base comum das páginas. Ficava repetida em 20 arquivos. */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); background-image: repeating-linear-gradient(90deg, transparent 0 78px, var(--pista) 78px 82px); transition: background-color .2s ease, color .2s ease; } /* No claro o cartão não precisa de borda forte: a sombra faz o trabalho e o * resultado respira mais. No escuro é o contrário, sombra some e a borda é * o que define a peça. */ :root:not([data-tema="escuro"]) .major, :root:not([data-tema="escuro"]) .gcard, :root:not([data-tema="escuro"]) .op, :root:not([data-tema="escuro"]) .clockcard, :root:not([data-tema="escuro"]) .altbox { box-shadow: var(--sombra); } /* --- a cor de cada prova --------------------------------------------------- * Serve pra faixa lateral do cartão no painel. Tons médios de propósito: * precisam ler tanto no fundo branco quanto no asfalto, então nada muito claro * nem muito saturado. Ficam aqui, e não no index.html, porque são paleta. */ :root { --cor-tokyo: #D9455A; --cor-boston: #2F6FBF; --cor-london: #C0453E; --cor-capetown: #2E9E6B; --cor-sydney: #1E8FB5; --cor-berlin: #A8791A; /* no claro o amarelo some: 2.1:1 vira 4.6:1 */ --cor-chicago: #4B76CC; --cor-newyork: #E0682B; } /* --- o perfil de altimetria ----------------------------------------------- * Cor de SVG não aceita var() como atributo (fill="var(--x)" não funciona), * então o gerador marca cada elemento com uma classe e a cor vem daqui. */ .pm-eixo, .pm-guia { stroke: var(--line-forte); } .pm-perfil { stroke: var(--paint); } .pm-marco { fill: var(--paint); stroke: var(--surface); stroke-width: 1.5; } .pm-rotulo { fill: var(--text); } .pm-km { fill: var(--text-3); } .pm-mastro { stroke: var(--text-2); } .pm-xadrez-a { fill: var(--text); } .pm-xadrez-b { fill: var(--surface); } .pm-area-topo { stop-color: var(--paint); stop-opacity: .30; } .pm-area-base { stop-color: var(--paint); stop-opacity: .02; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } }