/* ============================================================ LEGAL.CSS — as páginas de ler Os termos de uso (e, no dia em que ela sair do rascunho do WordPress, a política de privacidade) são o contrário de todo o resto do jogo: não têm botão, não têm mesa, não têm pressa. São texto para ler. Por isso ganham folha própria, enfileirada só por elas, em vez de mais um bloco no tm-ui.css. E por isso o desenho aqui é quase todo tipografia — medida de linha, respiro entre parágrafos, e uma hierarquia que deixe ACHAR o item 5 sem ler os quatro primeiros. O fundo escuro vem do tm-jogo, que já veste todas as telas do site; aqui só se ajusta o contraste do texto, porque cinza claro sobre escuro num bloco de mil palavras cansa. ============================================================ */ .tm-legal { /* A COLUNA DE LEITURA É A COLUNA DO SITE Aqui estava escrito `min(68ch, 92vw)`, com um raciocínio tipográfico correto e uma conclusão errada: 68 caracteres é de fato a medida clássica de conforto, mas ela não tem relação nenhuma com a largura em que o SITE se organiza. O resultado aparecia numa janela de 600px: a coluna do site (o `--tm-largura`, que o cabeçalho, o lobby e o perfil obedecem) é de 460px, enquanto 92vw dava 552 — e o texto do artigo começava 46px antes do logotipo e terminava 46px depois do avatar. Num monitor de 1280 a diferença passava de 70px para cada lado. O texto não estourava a TELA; estourava a COLUNA, que é o que o olho compara. Agora ela lê a mesma variável que todo o resto. A linha fica com cerca de 52 caracteres em vez de 68 — mais curta do que eu gostaria, e alinhada com o site, que é o que vale mais. Se um dia a coluna do site mudar, esta muda junto, sozinha. (`width: 100%` junto com o teto pelo mesmo motivo que está no largura.css: o do tema é uma coluna flex, e item de flex sem largura declarada encolhe até o conteúdo — o teto nunca chegaria a valer.) */ max-width: var(--tm-largura, 460px) !important; width: 100%; box-sizing: border-box; margin: 0 auto; /* A MARGEM LATERAL É A DO CABEÇALHO, SOMADA O logotipo não começa na borda da tela: ele está dentro do `.tm-header` (14px de folga) e do `.tm-header-inner` (mais 12px). São 26px até a primeira letra, e é nessa linha vertical que o olho se apoia. Aqui a conta é a mesma, porque esta caixa não tem uma faixa em volta: 26px no celular, e 14px quando a coluna para de encostar nas bordas e o próprio centramento já afasta o texto. Medido: com isso o começo do texto cai na mesma coluna do começo do logotipo, em toda largura. */ padding: 0 26px 40px; text-align: left; color: rgba(255, 255, 255, .82); font-size: 15.5px; line-height: 1.68; } /* ------------------------------------------------------------ O TOPO Título e data. A data é pequena e clara de propósito: ela não é conteúdo, é etiqueta — serve para saber se o que está na tela é a versão de hoje. ------------------------------------------------------------ */ .tm-legal-topo { margin: 6px 0 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .10); } @media (min-width: 520px) { .tm-legal { padding-left: 14px; padding-right: 14px; } } .tm-legal h1 { margin: 0 0 6px; font-size: 27px; line-height: 1.2; color: #fff; letter-spacing: .2px; } .tm-legal-data { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .45); } /* A abertura é o único parágrafo que fala com a pessoa antes de o documento começar. Um pouco maior, para ela ser lida mesmo por quem veio só conferir um item. */ .tm-legal-abertura { font-size: 16.5px; color: rgba(255, 255, 255, .90); margin: 0 0 30px; } /* ------------------------------------------------------------ OS ITENS O espaço ANTES do título é maior que o espaço depois — é o que faz cada bloco parecer um bloco, e não uma fila de parágrafos com uma linha em negrito no meio. Sem isso o olho não acha o começo do item 7 rolando a página. ------------------------------------------------------------ */ .tm-legal h2 { margin: 36px 0 10px; font-size: 18px; line-height: 1.3; color: #fff; letter-spacing: .2px; } .tm-legal p { margin: 0 0 14px; } .tm-legal strong { color: #fff; font-weight: 700; } .tm-legal ul { margin: 0 0 18px; padding-left: 20px; } .tm-legal li { margin-bottom: 10px; padding-left: 2px; } /* O marcador puxado para o amarelo da casa: é o mesmo detalhe que separa "lista de regras" de "lista de compras". */ .tm-legal li::marker { color: var(--tm-amarelo, #ffaa00); } .tm-legal a { color: #6fd08c; text-decoration: underline; text-underline-offset: 3px; /* Endereço de e-mail e link longo não podem empurrar a coluna e criar rolagem lateral no celular. */ overflow-wrap: anywhere; } .tm-legal a:hover, .tm-legal a:focus-visible { color: #8ee0a6; } /* O fecho: a assinatura do documento. Discreta, centrada, com uma linha acima que diz "acabou". */ .tm-legal-fim { margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .10); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .45); text-align: center; } /* ------------------------------------------------------------ TELA GRANDE No computador a coluna de 68ch já é o limite; o que muda é o respiro em volta e um título um pouco maior, que numa tela larga não atrapalha ninguém. ------------------------------------------------------------ */ @media (min-width: 768px) { .tm-legal { /* A folga lateral continua sendo a do cabeçalho. Aqui ela estava zerada, e o texto passava a começar 14px antes do logotipo — o mesmo desencontro de coluna, só que menor. */ padding: 10px 14px 60px; font-size: 16px; } .tm-legal h1 { font-size: 32px; } .tm-legal h2 { font-size: 20px; margin-top: 42px; } } /* ============================================================ OS ARTIGOS Os textos sobre o truco usam a mesma moldura dos documentos — a coluna de leitura, a escala de títulos, o respiro — e acrescentam três coisas que documento não tem: uma escada de cartas, uma tabela de comparação e os cartões que levam ao texto seguinte. ============================================================ */ /* A ORDEM DAS CARTAS, COMO ELA SE LÊ "3 > 2 > A > K > J > Q > 7 > 6 > 5 > 4" no meio de um parágrafo vira papa. Numa linha própria, centrada e com a letra do jogo, ela vira o que é: uma escada. */ .tm-legal-escada { margin: 18px 0 20px; padding: 14px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); text-align: center; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px; } /* ------------------------------------------------------------ A TABELA DE COMPARAÇÃO Cinco colunas não cabem em 360px de celular, e não existe tipografia que resolva isso: o que resolve é deixar rolar de lado, DENTRO da tabela, sem arrastar a página junto. ------------------------------------------------------------ */ .tm-tabela-rolagem { margin: 20px 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; /* A sombra na borda direita é o que avisa que tem mais coisa para o lado. Sem ela, quem não arrasta acha que a tabela tem três colunas. */ background: linear-gradient(to right, rgba(13,21,27,0), rgba(13,21,27,.6)) right / 18px 100% no-repeat; } .tm-legal-tabela { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; } .tm-legal-tabela th, .tm-legal-tabela td { padding: 9px 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; } .tm-legal-tabela thead th { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; border-bottom-color: rgba(255, 255, 255, .20); } /* A primeira coluna é o rótulo da linha: ela fica clara como um título, e o resto da linha é a resposta. */ .tm-legal-tabela tbody th { color: rgba(255, 255, 255, .55); font-weight: 600; font-size: 13px; } .tm-legal-nota { font-size: 13px; color: rgba(255, 255, 255, .55); font-style: italic; } /* ------------------------------------------------------------ LEIA TAMBÉM O fim do texto é onde a pessoa decide se fica. Três portas abertas ali valem mais que qualquer menu no alto — e são elas que ligam os quatro textos entre si, para o leitor e para quem rastreia o site. ------------------------------------------------------------ */ .tm-artigo-mais { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .10); } .tm-artigo-mais h2 { margin-top: 0 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .55) !important; } .tm-artigo-cartao { display: block; margin-bottom: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); text-decoration: none !important; color: inherit !important; } .tm-artigo-cartao:hover, .tm-artigo-cartao:focus-visible { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); } .tm-artigo-cartao strong { display: block; margin-bottom: 4px; color: #6fd08c; font-size: 15.5px; line-height: 1.35; } .tm-artigo-cartao span { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .60); } /* O convite para jogar, depois de o texto acabar. Quem leu até aqui está a um toque de sentar numa mesa. */ .tm-artigo-jogar { margin: 26px 0 10px; text-align: center; } .tm-artigo-jogar .tm-btn-sala { display: inline-block; text-decoration: none; } /* O link para a lista completa, logo abaixo dos três cartões de "leia também". Discreto de propósito: os cartões são a oferta principal, e isto é a porta para quem quer mais. */ .tm-artigo-todos { margin: 4px 0 0; text-align: center; font-size: 14px; } .tm-artigo-todos a { color: rgba(255, 255, 255, .58) !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .18); padding-bottom: 2px; } .tm-artigo-todos a:hover { color: #6fd08c !important; } /* ============================================================ O CAMINHO E A DATA Duas linhas pequenas no alto do texto, e as duas existem pela mesma razão: quem chega pelo buscador cai no meio do site, sem ter passado pela porta. Uma diz onde ele está; a outra, se o que ele está lendo ainda vale. Discretas de propósito — elas são referência, não conteúdo. ============================================================ */ .tm-artigo-caminho { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .45); } .tm-artigo-caminho a { color: rgba(255, 255, 255, .62) !important; text-decoration: none; } .tm-artigo-caminho a:hover { text-decoration: underline; } .tm-artigo-caminho span { margin: 0 6px; } .tm-artigo-data { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .42); }