/* ============================================================ PELE DO LIVRO · 28/09/2026 A pele nova que o João escolheu, a mesma de modelos/aula.html: Newsreader nos títulos, Atkinson Hyperlegible no texto de ler, JetBrains Mono nas etiquetas. Papel morno, tinta grafite, laranja de cobre no rótulo e azul de tinta no link. ELA NÃO SUBSTITUI O estilo.css. Entra DEPOIS dele e só troca o valor dos tokens (--papel, --tinta, --sans...) e o desenho das caixas de conta. Por isso a página inteira muda de cara sem que uma linha do HTML precise mudar, e por isso também dá para tirar: apaga o e a página volta a ser o que era. ORDEM OBRIGATÓRIA na página: estilo.css → matematica/sala.css → pele-livro.css A LARGURA DA COLUNA CONTINUA 760px de propósito. As marcas eq-90 ... eq-50 do sala.css foram medidas fórmula por fórmula nessa largura; mexer nela transforma cada marca em mentira. A REGRA DE 27/09 CONTINUA VALENDO: dentro da caixa de conta, letra preta e papel branco. O laranja desta pele aparece no rótulo e no título, nunca no meio de um número. ============================================================ */ /* ------------------------------------------------------------ 1) OS TOKENS São os mesmos nomes do estilo.css, com os valores medidos nos arquivos de desenho dele (Imagens/project/*- Site.dc.html). ------------------------------------------------------------ */ :root{ --papel: #fbfaf7; /* o papel morno do livro dele */ --papel-2: #efebe3; /* faixa, etiqueta, fundo de apoio */ --caixa: #ffffff; /* a folha branca da conta */ --linha: #e7e3da; /* risco fino */ --linha-forte: #16181d; /* risco grosso: é a própria tinta */ --tinta: #16181d; --dim: #3a3e48; /* o texto de abertura */ --fraco: #5d6270; /* rótulo, rodapé */ --azul: #2b50c8; /* o link */ --azul-suave: #2b50c8; --azul-claro: #dfe5fa; --vermelho: #a3352a; /* a armadilha */ --verde: #1f5a33; /* o certo */ --marca: #f6d9c8; /* o grifo, e a cor da seleção */ --marca-forte: #d9622b; --cobre: #d9622b; /* nome novo, só desta pele */ --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; --titulo: 'Newsreader', Georgia, 'Times New Roman', serif; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; } /* AS DUAS PELES (11/10/2026) O :root acima é a pele PAPEL — o livro de sempre. O bloco abaixo é a pele GRAFITE, a da Aula 16 de Cálculo 2, e ela é o padrão: vale sempre que o NÃO tiver data-theme="light". Antes este bloco era um @media (prefers-color-scheme: dark): a pele escura chegava sozinha, decidida pelo sistema da pessoa, e ninguém conseguia escolher. Agora quem escolhe é o botão (tema.js), e por isso a regra não olha mais o sistema. No fundo grafite a tinta clareia e o laranja da pele vira o único acento — é ele que faz o papel que o azul fazia no claro. */ :root:not([data-theme="light"]){ --papel: #0f0f17; --papel-2: #1a1a25; --caixa: #16161f; --linha: #2a2a35; --linha-forte: #e8e6e3; /* nesta pele o risco grosso é a própria tinta */ --tinta: #e8e6e3; --dim: #a09d98; --fraco: #6b6860; --azul: #e8923e; /* o link */ --azul-suave: #e8923e; --azul-claro: #2a2119; --vermelho: #d96b6b; --verde: #7ec97e; --marca: #3a2a18; /* o grifo, e a cor da seleção */ --marca-forte: #e8923e; --cobre: #e8923e; } /* ------------------------------------------------------------ 2) O TEXTO DE LER Atkinson é uma letra desenhada para quem enxerga mal: as formas que costumam se confundir (l, I, 1, 0, O) são diferentes de propósito. Ela é um pouco maior que a Inter no mesmo corpo, então o tamanho base sobe de 16,5px para 18px e a entrelinha abre. ------------------------------------------------------------ */ body{ font-family: var(--sans); font-size: 18px; line-height: 1.72; } ::selection{ background: var(--marca); color: var(--tinta); } .folha p{ line-height: 1.75; } /* ------------------------------------------------------------ 3) OS TÍTULOS Newsreader é serifada e quer peso 400, não 700: no peso cheio ela engorda e perde o ar de livro. O que dá porte ao título é o tamanho e o espaçamento negativo, não a gordura da letra. ------------------------------------------------------------ */ h1, h2, h3{ font-family: var(--titulo); font-weight: 400; } h1{ font-size: clamp(2.6rem, 7vw, 4.1rem); line-height: 1.0; letter-spacing: -.025em; } h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.015em; margin: 64px 0 12px; } h3{ font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em; margin: 38px 0 6px; } /* O negrito do corpo precisa de peso de verdade: 600 na Atkinson quase não aparece, e ela só tem 400 e 700. */ strong, b{ font-weight: 700; } /* ------------------------------------------------------------ 4) A CAPA No desenho dele a abertura é: rótulo pequeno em maiúsculas, título grande em serifada, e um parágrafo de abertura maior que o texto comum. O "começar ↓" vira uma linha discreta, em fonte de máquina. ------------------------------------------------------------ */ .capa-lua{ padding-top: 88px; padding-bottom: 8px; } .capa-lua .eyebrow, .eyebrow{ font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); } .capa-lua .eyebrow a{ color: inherit; } .capa-lua h1{ margin: 22px 0 18px; } .capa-lua .sub, .sub{ font-family: var(--sans); font-size: 1.28rem; line-height: 1.55; color: var(--dim); max-width: 40ch; } .desce{ font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--fraco); border-top: 1px solid var(--linha); } .desce:hover{ color: var(--cobre); } /* ------------------------------------------------------------ 5) O TÍTULO DE SEÇÃO No estilo.css o h4 da aula é uma etiqueta minúscula em azul. No desenho do livro ele é um título de verdade, em serifada grande, com um risco em cima separando o assunto anterior. É a mudança que mais muda a cara da página: a aula passa a ter capítulos. ------------------------------------------------------------ */ .aula h4{ font-family: var(--titulo); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.14; letter-spacing: -.015em; text-transform: none; color: var(--tinta); margin: 72px 0 14px; padding-top: 30px; border-top: 1px solid var(--tinta); text-wrap: balance; } .aula h4:first-child{ margin-top: 24px; } /* ------------------------------------------------------------ 6) A CAIXA DE CONTA O coração da aula. O pedido dele foi "letra do cálculo bem destacada", então aqui a conta cresce: a fórmula desenhada sai de 1,05em para 1,26em, a caixa ganha ar em volta e a resposta vira uma faixa fechada entre dois riscos grossos, como no desenho. Continua sem cor no meio da conta, como ele pediu em 27/09: o que destaca é tamanho, espaço e risco. ------------------------------------------------------------ */ .calculo{ margin: 34px 0 20px; padding: 30px 32px 26px; border: 1px solid var(--linha); border-radius: 14px; background: var(--caixa); } /* o rótulo da caixa: fonte de máquina, cinza, como o "enunciado" do desenho */ /* Minúsculo, e não maiúsculo: o rótulo carrega a fórmula do exemplo dentro dele ("exemplo 1.1 · ∫₀¹ ∫ₓ¹ e^(y²) dy dx"), e maiúscula transforma isso em "E^(Y²)", que não é a conta. */ .calculo .calc-tit{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: lowercase; color: var(--fraco); line-height: 1.6; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); } .calculo ol > li{ padding: 6px 0 22px; } /* O nome do passo, minúsculo pelo mesmo motivo do rótulo: vários trazem letra de conta dentro ("por fora, com u = y²"), e maiúscula escreveria "U = Y²", que é outra variável. */ .calculo ol > li > b{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: lowercase; color: var(--fraco); margin: 0 0 12px; } /* a conta escrita em texto, quando não tem data-tex */ .calculo .eq{ font-family: var(--serif); font-size: 23px; line-height: 1.95; } /* A CONTA DESENHADA. É esta linha que o João pediu: a letra do cálculo bem destacada. O tamanho foi MEDIDO nesta página em 28/09/2026, contando quantas das 65 fórmulas passam a não caber na coluna de 760px: 1,05em (o de antes) ... 13 rolam de lado 1,12em ............... 14 1,18em ............... 14 1,26em ............... 19 Por isso 1,18em: é 12% maior que o de antes e só custa uma fórmula a mais rolando. De 1,26 em diante o ganho de tamanho começa a sair caro. Se mudar daqui, MEDIR DE NOVO. */ .calculo .eq .katex, .calculo .mat .katex{ font-size: 1.18em; } @media (max-width: 640px){ .calculo .eq .katex, .calculo .mat .katex{ font-size: 1.0em; } } /* A RESPOSTA, fechada entre dois riscos, com a etiqueta à esquerda. O texto da resposta já começa com "=" no HTML das aulas, então a etiqueta entra por fora, pelo ::before, e nada precisa ser reescrito. */ .calculo .resposta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 26px 0 0; padding: 14px 0; font-size: 22px; line-height: 1.65; border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); } .calculo .resposta::before{ content: "resposta"; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fraco); flex: 0 0 auto; } .calculo .resposta > *{ flex: 1 1 auto; } .calculo .confere{ font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--fraco); margin: 14px 0 0; } /* ------------------------------------------------------------ 7) AS OUTRAS CAIXAS Mesmo raio, mesma borda, mesmo ar. O que muda entre elas é só o fundo e o rótulo, como nas duas caixas do molde (clara e escura). ------------------------------------------------------------ */ .mat{ font-family: var(--serif); font-size: 21px; line-height: 1.85; padding: 16px 22px; border-radius: 14px; background: var(--papel-2); border: 1px solid var(--linha); } .lab, .exercicios, .correcao, .nivel-ita, .pra-levar{ border-radius: 14px; border-color: var(--linha); } .lab, .nivel-ita{ background: var(--papel-2); padding: 24px 26px 20px; } .lab .lab-tit{ font-family: var(--titulo); font-weight: 400; font-size: 1.4rem; line-height: 1.2; } .lab .lab-sub, .leitura, .controles, .chip{ font-family: var(--mono); } .nivel-ita > b.rot, .exercicios > b.rot, .pra-levar > b.rot, .correcao b.rot{ font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .nivel-ita > b.rot{ color: var(--cobre); } .fonte-dados{ font-family: var(--mono); font-size: 12.5px; color: var(--fraco); } .chave{ border-left: 3px solid var(--cobre); font-weight: 400; font-size: 1.12rem; } table.tab th{ font-family: var(--mono); letter-spacing: .1em; } /* ------------------------------------------------------------ 8) O LINK Azul de tinta, laranja quando o dedo chega. Dentro do texto da aula o estilo.css pinta o link de tinta com risco embaixo; aqui ele volta a ser azul, que é o que o desenho mostra. ------------------------------------------------------------ */ a{ color: var(--azul); } a:hover{ color: var(--cobre); } .aula a, .calculo a, .folha a{ color: var(--azul); text-decoration-color: var(--linha); } .aula a:hover, .calculo a:hover, .folha a:hover{ color: var(--cobre); text-decoration-color: currentColor; } /* ------------------------------------------------------------ 9) A ETIQUETA (1), (2) DA FÓRMULA Veio do molde de 28/09: o \tag do KaTeX, que por padrão flutua na margem e some em tela estreita, desce para baixo da conta e vira uma etiqueta cinza em fonte de máquina. ------------------------------------------------------------ */ .katex-display > .katex > .katex-html > .tag{ position: static !important; display: block; text-align: right; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--fraco); margin-top: 6px; } /* ------------------------------------------------------------ 10) TELA ESTREITA ------------------------------------------------------------ */ @media (max-width: 640px){ body{ font-size: 17px; } .capa-lua{ padding-top: 56px; } .calculo{ padding: 20px 18px 18px; border-radius: 12px; } .calculo .eq{ font-size: 20px; line-height: 1.9; } .calculo .resposta{ font-size: 19px; } .aula h4{ margin-top: 52px; padding-top: 24px; } } /* ------------------------------------------------------------ 11) DESLIGAR O QUE É DA PELE ANTIGA O estilo.css põe a aula inteira dentro de um cartão branco com sombra (article.aula), e a etiqueta de cima dentro de uma pastilha azul (.eyebrow). Isso é a pele do curso de Python, e briga com a do livro: no livro o texto pisa no papel e quem tem folha branca é só a conta. Estas regras desligam o cartão e a pastilha. Medido no navegador em 28/09/2026: sem elas a página fica com caixa dentro de caixa, e a caixa de conta some contra o cartão da aula. ------------------------------------------------------------ */ :root{ --sombra: none; } article.aula, section.bloco, div.conteudo{ background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* A conta é a única folha branca da página, e agora ela aparece. */ article.aula .lab, article.aula .exercicios, article.aula .mat{ background: var(--papel-2); } .mat, .lab, .traducao, .resposta, .passo{ box-shadow: none; } .passo{ background: var(--papel-2); border-radius: 14px; } /* a etiqueta de cima perde a pastilha e vira rótulo de livro */ .eyebrow{ display: block; background: none; border: 0; padding: 0; } /* No desenho dele o pedaço destacado do título não é grifo: é a mesma serifada em itálico, na cor do cobre. Grifo amarelo atrás de um título de 66px vira uma tarja. Só no h1 — no meio do texto o marca-texto continua sendo marca-texto. */ h1 .mark, .capa-lua h1 .mark{ background: none; box-shadow: none; border-bottom: 0; color: var(--cobre); font-style: italic; padding: 0; }