/* FUNDO ATIVO: grafite Gerado por ferramentas\escolher-fundo.ps1 - nao editar a mao. Para trocar: .\ferramentas\escolher-fundo.ps1 Para repor: .\ferramentas\escolher-fundo.ps1 -Remover */ /* ============================================================================= FUNDO - "GRAFITE" Colar NO FIM do ficheiro css/toosafe.css, depois de todos os blocos que la estao. Estas regras substituem os tokens de :root e corrigem as poucas superficies do site que tinham cor clara escrita a mao. A IDEIA EM UMA LINHA Grafite quase preto, com uma pitada de azul na tinta. O azul da marca deixa de competir com um fundo claro e passa a ser a unica cor viva da pagina: o logotipo, a barra por baixo do titulo, a moldura dos botoes e a aresta do bloco ativo acendem-se. Nada de creme, nada de quente. O PROBLEMA QUE ISTO RESOLVE Branco translucido sobre azul claro tinha quase a mesma luminosidade do fundo e os blocos das empresas desapareciam. Aqui inverte-se a relacao: o fundo e o ponto mais escuro do ecra (luminancia 0.013 no topo, 0.006 no sitio mais fundo) e o painel e uma superficie ELEVADA de grafite claro (luminancia 0.055 no canto forte). O painel esta sempre acima do fundo, nunca ao nivel dele, e por cima ainda leva um fio de 1px a 3.0:1. ============================================================================= */ :root { /* --- 1. A SUPERFICIE ------------------------------------------------------ UMA so camada, como antes, e por isso a juncao com o cabecalho nao existe: o corpo pinta-a com background-attachment: fixed e o cabecalho pinta a mesma variavel com background-size: 100% 100svh ancorada ao topo. Como o gradiente e' de 180deg, ou seja rigorosamente vertical, a fatia que o cabecalho mostra e' identica a' que estaria ali sem cabecalho, a qualquer altura de janela. Sem variacao horizontal nenhuma, nao ha nada que possa denunciar a costura quando a barra do Chrome do Android recolhe. Leitura de cor, de cima para baixo: 0% a 36% Grafite mais aberto. E' onde vive o cabecalho e o titular. Desce muito devagar para o logotipo azul ter onde assentar. 36% a 78% Vai fechando ate ao ponto mais fundo da pagina, aos 78%. 78% a 100% Volta a subir, e agora com azul: os ultimos passos levam mais azul do que vermelho, e o rodape fecha num azul-noite em vez de fechar num buraco preto. 18 passos. Nenhum salto acima de 3 valores por canal, que e' menos do que o olho distingue num painel de 8 bits, e o grao por cima quebra o resto. Gradientes escuros sao os que mais facilmente fazem bandas, por isso os passos aqui sao mais apertados do que no fundo claro. */ --fundo-cor: #14181F; /* reserva, escolhida no tom medio da rampa */ --fundo: linear-gradient(180deg, #191E27 0%, #181D26 6%, #171C24 12%, #161A22 18%, #151921 24%, #141820 30%, #13171E 36%, #12161D 42%, #11151C 48%, #11141B 54%, #10131A 60%, #0F1319 66%, #0F1219 72%, #0E121A 78%, #0E131C 85%, #0F151F 91%, #101722 96%, #111925 100% ); /* --- 2. OS BLOCOS DAS EMPRESAS -------------------------------------------- A segunda alavanca, e a mais importante das duas. Os paineis deixam de ser branco translucido e passam a ser grafite ELEVADO e quase opaco: nao sao vidro sobre o fundo, sao uma chapa pousada por cima dele. E' isto que resolve a queixa do cliente. O gradiente de 134deg mantem-se e faz o canto de cima esquerdo ler-se como o lado iluminado da chapa. Numeros, com o fundo no seu ponto MAIS CLARO (o topo, #191E27), que e' o caso mais adverso: fundo luminancia 0.0128 painel-1 luminancia 0.0554 -> 1.68:1 painel-3 luminancia 0.0322 -> 1.31:1 (canto mais fraco) fio da moldura luminancia 0.1362 -> 3.00:1 Contra o ponto mais fundo do fundo, o painel-1 sobe a 1.88:1. Para referencia: um painel escuro tipico de interface em modo noturno vive entre 1.2:1 e 1.4:1 contra a sua tela. Aqui esta acima disso em toda a superficie, e ainda leva a moldura a 3:1 por cima. */ --painel-1: rgba(56, 67, 82, .96); --painel-2: rgba(50, 60, 74, .95); --painel-3: rgba(44, 52, 65, .94); --painel-borda: rgba(148, 180, 210, .36); /* --- 3. TEXTO INVERTIDO --------------------------------------------------- Verificados contra a superficie MAIS CLARA onde cada um pode cair, que nao e' o fundo: e' o painel de uma empresa quando esta' a ser lida. --ink contra painel ativo 7.6:1 contra o fundo 15.0:1 --ink-2 contra painel ativo 5.3:1 contra o fundo 10.4:1 --ink-3 contra painel ativo 4.6:1 contra o fundo 9.1:1 Nenhum desce do minimo de 4.5:1 em ponto nenhum da pagina. */ --ink: #EEF3F8; /* primario */ --ink-2: #C3CDD9; /* secundario */ --ink-3: #B6C0CC; /* terciario */ --rule: #313945; --rule-strong: #46505F; /* O azul da marca continua a ser o mesmo nos gradientes. So o azul usado como COR DE TEXTO e' que tem de subir de luz: #0A5C9E era legivel sobre papel e e' invisivel sobre grafite. Sobe para o lado claro da propria rampa da marca, portanto continua a ser o azul da TooSafe. #7FCBF5 da' 9.4:1 contra o fundo e 4.8:1 contra o painel ativo. */ --blue-ink: #7FCBF5; --blue-wash: #132433; /* o unico preenchimento azul permitido, em noturno */ /* Superficies nomeadas. --paper e' usada como COR DE LETRA sobre --ink (no atalho "saltar para o conteudo"), por isso tem de acompanhar a inversao, senao fica claro sobre claro. */ --paper: #12161D; --sheet: #1A202A; } /* --- 4. O BRILHO AZUL ------------------------------------------------------- Duas manchas de azul da marca, muito tenues, na metade de baixo do ecra. Num fundo claro isto era bruma; num fundo grafite e' a unica luz de cor da pagina, e e' o que impede o grafite de parecer cinzento morto. NENHUMA delas toca no terco de cima. O motivo e' concreto: a camada .luz esta por tras do cabecalho (z-index 0 contra 50) e o cabecalho pinta um fundo opaco por cima dela. Um brilho a passar por baixo do cabecalho ficava tapado ali e visivel logo a seguir, e desenhava uma aresta horizontal na base do cabecalho exatamente quando passasse. Com os centros aos 62% e aos 88% e a queda a fechar aos 72-74% do raio, a mancha mais alta so comeca a ter cor por volta dos 38% da altura do ecra. Sem desfoque. A suavidade vem da propria queda do gradiente radial, que o telemovel desenha de graca. Um blur nesta area custaria proporcionalmente ao ecra inteiro, que e' precisamente o que esta proibido. */ .luz { position: fixed; top: -15vh; left: -15vw; width: 130vw; height: 130vh; z-index: 0; pointer-events: none; contain: strict; background: radial-gradient(56% 32% at 70% 62%, rgba(38, 168, 224, .10), rgba(38, 168, 224, 0) 72%), radial-gradient(74% 26% at 36% 88%, rgba(1, 115, 190, .14), rgba(1, 115, 190, 0) 74%); animation: deriva-ar 46s linear infinite; will-change: transform; } /* Deriva lenta e curta. Ar parado nao e' ar nenhum, mas ar que se ve mexer deixa de ser fundo e passa a ser um efeito. So transform e' animado. */ @keyframes deriva-ar { 0% { transform: translate3d(-3vw, 1.5vh, 0); } 50% { transform: translate3d( 4vw, -2vh, 0); } 100% { transform: translate3d(-3vw, 1.5vh, 0); } } /* Mesmo por baixo das manchas, o painel continua a destacar-se: o painel e' 96% opaco, portanto so 4% do brilho passa por ele. No pior sitio do ecra o contraste do painel contra o fundo desce de 1.68:1 para 1.58:1. */ /* --- 5. O GRAO -------------------------------------------------------------- O mesmo grao que ja la esta, so com um pouco mais de presenca. Num fundo escuro o ruido e' mais util do que num claro: e' ele que impede as bandas nos passos mais fundos da rampa, onde o olho e' mais sensivel a degraus. Nao se anima, nao se desfoca, nao custa nada depois de pintado. */ .grao { opacity: .06; } /* --- 6. O BLOCO QUE ESTA A SER LIDO ----------------------------------------- A regra original clareia o painel misturando-lhe 24% de branco. Sobre um painel claro isso era um toque; sobre um painel opaco de grafite, atira a superficie para cinzento medio (luminancia 0.138) e obrigava o texto secundario a ser quase tao claro como o titulo, o que destruia a hierarquia. Aqui a subida e' explicita e mais contida: uma chapa um degrau mais elevada, luminancia 0.073, que continua a deixar o texto respirar. Continua a ser so' a cor de fundo a mudar, nada pisca, nada salta. */ .empresa.is-ativa { background: linear-gradient(134deg, rgba(66, 79, 96, .97) 0%, rgba(58, 70, 86, .96) 46%, rgba(50, 60, 74, .95) 100% ); } /* --- 7. BOTOES -------------------------------------------------------------- Os tres botoes de cada empresa tinham o enchimento escrito a mao em quase branco (#FDFDFB) com a letra em --ink-2. Invertido o texto, ficariam claros sobre claro e desapareciam. Passam a grafite, e a moldura em gradiente azul da marca fica exatamente como esta': sobre grafite, e' ela que se acende. Letra --ink-2 sobre o enchimento: 8.9:1. */ .acao { background: linear-gradient(180deg, #232B36, #1B222C) padding-box, var(--grad) border-box; } .acao:active { background: linear-gradient(180deg, #1C2530, #16202B) padding-box, var(--grad) border-box; } @media (hover: hover) { .acao:hover { color: var(--ink); background: linear-gradient(180deg, #2D3744, #253040) padding-box, var(--grad) border-box; } } /* O realce do idioma ativo era um retangulo de branco a 60%: sobre grafite era um clarao. Passa a um toque de luz. */ @media (hover: hover) { .idiomas a:hover { background: rgba(255, 255, 255, .08); } } /* --- 8. MOVIMENTO REDUZIDO -------------------------------------------------- Quem pediu menos movimento pediu menos movimento, nao pediu um site diferente. O brilho azul fica quieto, na posicao mais cheia, porque faz parte da superficie tanto como o gradiente. */ @media (prefers-reduced-motion: reduce) { .luz { display: block; animation: none; transform: none; } } /* ============================================================================= Ajustes para tema escuro - aplicados por escolher-fundo.ps1 ============================================================================= */ :root { /* Botoes SEM preenchimento. Nada de caixas azul-escuras: no escuro, uma superficie cheia le-se sempre como um bloco pesado. Fica um fio de luz a definir a area de toque e mais nada. */ --acao-fundo-1: transparent; --acao-fundo-2: transparent; --acao-fundo-hover: rgba(255, 255, 255, .05); --acao-fundo-press-1: rgba(255, 255, 255, .08); --acao-fundo-press-2: rgba(255, 255, 255, .08); /* Sem chapa por tras do logotipo. O logotipo entra tal como e'. */ --logo-chapa: transparent; --logo-chapa-pad: 0px; } /* O texto dos botoes tem de ser claro. Sem isto fica cinzento-escuro sobre superficie escura, que foi exatamente o que falhou a primeira vez. */ /* OS TRES BOTOES SAO EXATAMENTE IGUAIS. Sem preenchimento, um so fio de 1px, a mesma cor de letra. Nenhum se distingue em repouso - nem o WhatsApp. ATENCAO: os ficheiros de fundo escuro foram escritos antes destas regras existirem e poem o gradiente da marca na moldura de TODOS os botoes. Estas regras vem depois e anulam isso. */ .acao, .acao--whatsapp { color: #CBD3DE; --borda-acao: rgba(255, 255, 255, .15); border-width: 1px; border-color: rgba(255, 255, 255, .15); background: transparent; font-weight: 420; } .acao:active, .acao--whatsapp:active { border-color: rgba(38, 168, 224, .75); background: rgba(255, 255, 255, .06); } @media (hover: hover) { .acao:hover, .acao--whatsapp:hover { color: #FFFFFF; border-color: rgba(38, 168, 224, .7); background: rgba(255, 255, 255, .045); } } /* A barra de gradiente que cresce no fundo do botao continua a ser a unica cor que aparece, e so ao tocar ou ao passar o rato. */ .acao::before { opacity: .9; } /* Sobre a chapa clara, o logotipo ja esta no fundo para que foi desenhado. */ .empresa__logo img { filter: none; opacity: 1; } /* O logotipo grande de fundo precisa de mais presenca no escuro. */ .empresa__banner { opacity: .10; } .empresa.is-ativa .empresa__banner { opacity: .17; } /* O grao pesa demais sobre superficies escuras e le-se como ruido de fotografia mal exposta. */ .grao { opacity: .028; }