/* ============================================================ DIRECAO A — "ESCOLA" ------------------------------------------------------------ Principio: o site de quem ensina. A compostura de uma publicacao seria, e nao a de um convite terapeutico. O trabalho clinico continua presente, mas o eixo da apresentacao passa a ser o ensino. Autoridade aqui vem de silencio: muito espaco, pouca cor por vez, nenhum ornamento decorativo. Nada de padrao de fundo. Cor: paleta definida pela cliente (6 cores), aplicada como creme de papel + petroleo de tinta + dourado de ornamento. Tipografia: serif de texto (Source Serif 4) fala; grotesca (Inter) etiqueta. Forma: raio quase zero, borda de 1px presente, sombra minima usada so no que flutua (cabecalho preso, cartao em hover). Movimento: entrada por rolagem, cabecalho que encolhe, hover que levanta. Curto, e cancelavel por prefers-reduced-motion. ESTE ARQUIVO CONTEM SOMENTE DEFINICOES DE VARIAVEIS. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap'); :root { /* ============================================================ PALETA DA MARCA — as 6 cores enviadas pela cliente. Nenhuma delas foi alterada. ------------------------------------------------------------ --marca-petroleo #183A35 verde profundo, tinta --marca-sage #5E746A verde acinzentado, meio-tom --marca-areia #D8C8B2 bege quente, papel encorpado --marca-creme #F7F3EC quase branco, papel --marca-grafite #292724 quase preto quente, texto --marca-dourado #B49A68 latao, ornamento ============================================================ */ --marca-petroleo: #183A35; --marca-sage: #5E746A; --marca-areia: #D8C8B2; --marca-creme: #F7F3EC; --marca-grafite: #292724; --marca-dourado: #B49A68; /* ============================================================ TONS DERIVADOS — necessarios por acessibilidade. Duas cores da paleta reprovam em WCAG AA (4.5:1) quando usadas como TEXTO sobre fundo claro. Elas seguem inteiras nos usos em que passam: fundo, filete, ornamento e texto sobre escuro. So onde reprovariam entra o tom derivado — mesma familia de cor, apenas mais escuro. sage #5E746A sobre areia = 3.07:1 reprova --> #465850 sobre areia = 4.63:1 aprova dourado #B49A68 sobre creme = 2.45:1 reprova --> #655026 sobre creme = 6.96:1 aprova areia #D8C8B2 pesa demais como faixa inteira de secao --> #EFE7DA na faixa; areia cheia nos filetes e bordas ============================================================ */ --marca-sage-fundo: #465850; --marca-dourado-fundo: #655026; --marca-areia-clara: #EFE7DA; /* O fundo mais quente que o design consegue produzir: creme com o brilho dourado do fundo educacional no pico (40%). Nao e usado como cor — existe para o ferramentas/contraste.js poder cobrar todo texto contra o PIOR caso, e nao so contra o creme limpo. Foi ele que obrigou o dourado de rotulo a descer para #655026. */ --marca-fundo-mais-quente: #DCCFB7; --marca-petroleo-fundo: #0F2A26; --marca-papel: #FFFFFF; /* ---------- COR: base ---------- */ --cor-fundo: var(--marca-creme); --cor-superficie: var(--marca-papel); --cor-superficie-alt: var(--marca-areia-clara); --cor-texto: var(--marca-grafite); --cor-texto-secundario: var(--marca-sage-fundo); --cor-texto-sobre-acao: var(--marca-creme); --cor-acao: var(--marca-petroleo); --cor-acao-hover: var(--marca-petroleo-fundo); --cor-acao-secundaria: var(--marca-petroleo); --cor-acao-secundaria-texto: var(--marca-petroleo); --cor-acao-secundaria-fundo-hover: var(--marca-areia-clara); --cor-destaque: var(--marca-dourado-fundo); --cor-borda: var(--marca-areia); /* Filete estrutural: o sage cheio da paleta. Mais presente que a areia, usado onde a linha organiza o conteudo (passo, bloco, moldura de figura) em vez de so delimitar uma caixa. */ --cor-borda-forte: var(--marca-sage); --cor-erro: #8F3123; --cor-foco: var(--marca-petroleo); /* ---------- COR: secao invertida ---------- */ /* Petroleo cheio. O dourado so vira texto aqui, onde passa. */ --cor-fundo-inverso: var(--marca-petroleo); --cor-superficie-inversa: #1F4741; --cor-texto-inverso: var(--marca-creme); --cor-texto-secundario-inverso: var(--marca-areia); --cor-borda-inversa: #2E5A53; --cor-acao-inversa: var(--marca-dourado); --cor-acao-inversa-hover: #C7AF80; --cor-texto-sobre-acao-inversa: var(--marca-petroleo); --cor-destaque-inversa: var(--marca-dourado); --cor-placeholder-inverso: #24504A; --cor-placeholder-texto-inverso: var(--marca-areia); /* ---------- COR: heroi ---------- */ --cor-heroi-fundo: var(--marca-creme); --cor-heroi-texto: var(--marca-petroleo); --cor-heroi-texto-secundario: var(--marca-sage-fundo); --cor-heroi-rotulo: var(--marca-dourado-fundo); --cor-heroi-borda: var(--marca-areia); /* ---------- COR: caminhos ---------- */ --cor-caminho-pessoa-fundo: var(--marca-papel); --cor-caminho-pessoa-borda: var(--marca-petroleo); --cor-caminho-instituicao-fundo: var(--marca-areia-clara); --cor-caminho-instituicao-borda: var(--marca-areia); /* ---------- COR: fatos ---------- */ --cor-fato-fundo: var(--marca-papel); --cor-fato-texto: var(--marca-grafite); --cor-fato-borda: var(--marca-areia); --cor-fato-grave-fundo: var(--marca-creme); --cor-fato-grave-texto: var(--marca-petroleo); --cor-fato-grave-borda: var(--marca-dourado); /* ---------- COR: apoio ---------- */ --cor-placeholder: var(--marca-areia); --cor-placeholder-texto: var(--marca-petroleo); --cor-pendente-fundo: #F7E9E3; --cor-borda-oferta: var(--marca-petroleo); --cor-rodape-fundo: var(--marca-grafite); --cor-rodape-texto: var(--marca-creme); --cor-rodape-texto-secundario: var(--marca-areia); --cor-rodape-borda: #46423D; --cor-rodape-acao: var(--marca-dourado); /* ---------- COR: cabecalho preso ---------- */ --cor-cabecalho-fundo: #F7F3ECF2; --cor-cabecalho-fundo-encolhido: #F7F3ECF7; /* ---------- COR: navegacao de retorno ---------- */ --cor-migalha-texto: var(--marca-sage-fundo); --cor-migalha-atual: var(--marca-grafite); --cor-migalha-separador: var(--marca-sage); --cor-topo-fundo: var(--marca-petroleo); --cor-topo-texto: var(--marca-creme); --cor-topo-fundo-hover: var(--marca-petroleo-fundo); /* ---------- COR: componentes da pagina de cursos ---------- */ --cor-passo-numero: var(--marca-dourado-fundo); --cor-passo-borda: var(--marca-sage); --cor-faq-fundo: var(--marca-papel); --cor-faq-borda: var(--marca-areia); --cor-faq-marcador: var(--marca-dourado-fundo); --cor-depoimento-aspas: var(--marca-areia); --cor-selo-fundo: var(--marca-areia-clara); --cor-selo-borda: var(--marca-dourado); --cor-selo-texto: var(--marca-petroleo); /* ============================================================ FUNDO EDUCACIONAL — atmosfera das paginas impares. ------------------------------------------------------------ CALIBRADO PELAS CINCO REFERENCIAS ENVIADAS. O que elas tem em comum, e que e o que esta reproduzido aqui: - luz quente entrando por um lado, alta (hora dourada) - madeira clara embaixo, aquecendo a base do quadro - creme limpo no meio, onde o texto vive - nada frio, nada corporativo, e nenhum grafismo A paleta da cliente ja e essa atmosfera: creme, areia e dourado sao exatamente as cores das fotos. O petroleo e o unico contraponto — e o que impede o calor de virar meloso. Duas camadas independentes: 1. LUZ (--fundo-edu-camadas): so luz e calor de madeira, desenhados em CSS. Nao depende de arquivo de imagem e nao pesa no carregamento. NAO HA NENHUM GRAFISMO AQUI, e e proposital. Uma versao anterior tinha malha de caderno quadriculado; foi retirada por ler como caderno escolar. Nenhuma das cinco referencias tem padrao grafico — o que elas tem e luz. Se um dia entrar textura, que seja pela foto, nao por um padrao desenhado. 2. FOTO (--fundo-edu-foto): fica ATRAS da arte grafica e comeca vazia. Para ligar, troque por url('imagens/fundo-edu-01.jpg'). DIRECAO DE ARTE, tirada das referencias — fotos proprias da Cris, no mesmo espirito: index.html mesa de madeira, caderno aberto, cafe, luz lateral quente. Sem rosto: e fundo. cursos.html grupo em volta da mesa, livros abertos, visto de cima (a referencia 3). E a mais educacional das cinco. traumas a mais quieta e intima das cinco, com pouca coisa em quadro. O filtro e a opacidade estao calibrados para a foto entrar como atmosfera, nao como assunto: o texto continua sendo o que se le primeiro. ============================================================ */ /* SEM NENHUM GRAFISMO. Havia aqui uma malha de caderno quadriculado que foi retirada: lia como caderno escolar, infantilizava a pagina e contradizia a propria referencia — nenhuma das cinco fotos tem elemento grafico. Nelas a atmosfera vem so de luz e madeira. E so isso que ficou. */ --fundo-edu-camadas: /* a luz quente entrando pelo alto, a direita */ radial-gradient(78% 62% at 84% -10%, rgba(180, 154, 104, 0.42) 0%, rgba(180, 154, 104, 0.17) 44%, rgba(180, 154, 104, 0) 76%), /* uma segunda luz, fria e fraca, a esquerda: e o que impede o quadro de virar um degrade laranja de banco de imagem */ radial-gradient(60% 50% at 4% 18%, rgba(94, 116, 106, 0.12) 0%, rgba(94, 116, 106, 0) 70%), /* o calor da madeira subindo da base */ radial-gradient(150% 52% at 50% 106%, rgba(216, 200, 178, 0.58) 0%, rgba(216, 200, 178, 0) 72%), /* veu de papel: e o que protege a leitura quando a foto entrar */ linear-gradient(to bottom, rgba(247, 243, 236, 0.92) 0%, rgba(247, 243, 236, 0.80) 40%, rgba(247, 243, 236, 0.86) 100%); --fundo-edu-foto: none; /* As referencias sao quentes e douradas, nao dessaturadas: o filtro segura um pouco a saturacao e mantem o calor. */ --fundo-edu-foto-filtro: saturate(0.82) sepia(0.16) brightness(1.04) contrast(0.94); --fundo-edu-foto-opacidade: 0.30; --fundo-edu-foto-posicao: center top; --fundo-edu-deriva: 2.5rem; /* ---------- TRATAMENTO DE IMAGEM ---------- */ /* Retrato documental, cru. A foto da pessoa nao e tingida. */ --imagem-filtro: none; --imagem-sobreposicao-cor: transparent; --imagem-sobreposicao-mistura: normal; --imagem-sobreposicao-opacidade: 0; /* Retrato em pe (9:16, 4:5) dentro de caixa mais baixa: o corte preserva a cabeca, nao o centro do quadro. */ --imagem-posicao-alta: 50% 12%; /* Faixa de foto (a Foto Home, 16:9, cortada em 21:9): a Cris esta um pouco a esquerda do centro e com a cabeca no terco de cima. */ --imagem-posicao-faixa: 42% 18%; /* Capa mais larga que 4:5 com o titulo encostado a direita (Escola de Proposito): o corte da moldura sai todo pela esquerda. */ --imagem-posicao-direita: 100% 50%; /* Os retratos da Cris sao P&B. Um calor minimo para nao ficarem frios ao lado do dourado. Para desligar: none. */ --imagem-filtro-pb: sepia(0.12) contrast(1.02); /* ============================================================ MOVIMENTO ------------------------------------------------------------ Duracoes curtas, curva de saida rapida. O site se move para indicar hierarquia e resposta, nunca para chamar atencao. base.css zera tudo isto sob prefers-reduced-motion. ============================================================ */ --mov-dur-rapida: 160ms; --mov-dur-media: 320ms; --mov-dur-lenta: 640ms; --mov-atraso-passo: 80ms; --mov-curva: cubic-bezier(0.22, 0.61, 0.36, 1); --mov-curva-suave: cubic-bezier(0.4, 0, 0.2, 1); --mov-deslocamento: 1.5rem; --mov-deslocamento-p: 0.25rem; --mov-deslocamento-g: 2.5rem; /* ---------- TIPOGRAFIA: familias ---------- */ --fonte-titulo: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --fonte-corpo: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --fonte-rotulo: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --fonte-fato: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --fonte-fato-grave: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --fonte-numero: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; /* ---------- TIPOGRAFIA: escala de tamanho ---------- */ --fs-display: clamp(2.5rem, 7vw, 4.25rem); --fs-h1: clamp(2rem, 5.5vw, 3rem); --fs-h2: clamp(1.75rem, 4vw, 2.375rem); --fs-h3: clamp(1.375rem, 3vw, 1.75rem); --fs-h4: clamp(1.125rem, 2.2vw, 1.3125rem); --fs-corpo-g: clamp(1.0625rem, 1.6vw, 1.1875rem); --fs-corpo: 1.0625rem; --fs-p: 0.875rem; --fs-rotulo: 0.75rem; --fs-botao: 0.9375rem; --fs-fato: 0.9375rem; --fs-fato-grave: 1.0625rem; --fs-numero: clamp(1.75rem, 4vw, 2.5rem); --fs-migalha: 0.8125rem; /* Subtitulo dentro de um titulo: relativo ao titulo em que esta, para servir tanto no h1 do heroi quanto num h2 de secao. */ --fs-subtitulo: 0.55em; /* ---------- TIPOGRAFIA: pesos ---------- */ --peso-corpo: 400; --peso-medio: 500; --peso-forte: 600; --peso-titulo: 600; --peso-display: 600; --peso-fato-grave: 600; --peso-numero: 600; /* ---------- TIPOGRAFIA: entrelinhas ---------- */ --el-display: 1.08; --el-titulo: 1.2; --el-corpo: 1.55; --el-solta: 1.75; --el-nenhuma: 1; /* ---------- TIPOGRAFIA: espacamento de letra ---------- */ --ll-display: -0.02em; --ll-titulo: -0.01em; --ll-corpo: 0em; --ll-rotulo: 0.09em; --ll-botao: 0.01em; /* ---------- TIPOGRAFIA: caixa ---------- */ --transformar-display: none; --transformar-titulo: none; --transformar-marca: none; --transformar-rotulo: uppercase; --transformar-botao: none; /* ---------- TIPOGRAFIA: medida ---------- */ --medida-texto: 68ch; /* ---------- ESPACAMENTO ---------- */ --esp-0: 0rem; --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem; --esp-9: 5rem; --esp-10: 7rem; --esp-secao: clamp(3rem, 8vw, 5rem); --esp-heroi: clamp(3rem, 9vw, 6rem); /* Heroi compacto: paginas-lista em que o conteudo vem logo abaixo (Cursos). */ --esp-heroi-compacto: clamp(2rem, 5vw, 3.5rem); /* Respiro que cresce com a tela (01/10/2026, a pedido do Gabriel: os cartoes estavam espremidos em tela larga). No celular ficam como antes; no computador, um pouco mais de ar. lateral: margem dos lados da pagina. caixa: espaco interno de cartoes e caixas. grade: espaco entre os cartoes de uma grade. */ --respiro-lateral: clamp(1rem, 4vw, 2rem); --respiro-caixa: clamp(1.5rem, 1rem + 1vw, 2.25rem); --respiro-grade: clamp(2rem, 1rem + 1.5vw, 2.5rem); /* ---------- LARGURAS DE LAYOUT ---------- */ /* Largura util: era 68rem (cartoes de ~330px em tela larga); 84rem da cartoes de ~400px. Os textos longos continuam na medida de leitura, em .container--estreito. */ --largura-conteudo: 84rem; --largura-estreita: 46rem; /* Coluna minima das grades: com a largura nova, 20rem segura no maximo tres cartoes por linha. Abaixo de ~1090px a grade passa a duas colunas, em vez de apertar tres. */ --largura-min-coluna: 20rem; --largura-min-figura: 16rem; --largura-min-passo: 15rem; /* Painel do submenu do cabecalho: cabe "Formacao e Maturidade Crista". */ --largura-submenu: 15rem; /* ---------- FORMA: raios ---------- */ --raio-p: 0.125rem; --raio-m: 0.1875rem; --raio-g: 0.25rem; --raio-botao: 0.125rem; --raio-imagem: 0.125rem; --raio-fato: 0.125rem; --raio-fato-grave: 0.125rem; --raio-redondo: 50%; /* ---------- FORMA: sombras ---------- */ /* Separacao continua sendo por linha. A sombra so aparece no que flutua de verdade: cabecalho preso, cartao levantado, botao de voltar ao topo. */ --sombra-cartao: none; --sombra-cartao-hover: 0 1px 2px rgba(24, 58, 53, 0.05), 0 1.25rem 2.5rem -1.25rem rgba(24, 58, 53, 0.28); --sombra-botao: none; --sombra-oferta: none; --sombra-cabecalho: 0 1px 0 rgba(24, 58, 53, 0.08), 0 0.75rem 1.5rem -1rem rgba(24, 58, 53, 0.22); --sombra-flutuante: 0 0.5rem 1.5rem -0.5rem rgba(24, 58, 53, 0.45); /* ---------- FORMA: larguras de traco ---------- */ --borda-fina: 1px; --borda-media: 1px; --borda-grossa: 2px; --borda-figura: 1px; --borda-fato-grave: 1px; --borda-filete: 3px; /* ---------- DIMENSOES DE COMPONENTE ---------- */ --tamanho-topo: 2.75rem; /* Trecho de livro: altura visivel antes do veu, e altura do veu. */ --trecho-altura: 24rem; --trecho-veu-altura: 8rem; /* Capa de livro: largura maxima, para ler como livro, nao como cartaz. */ --largura-livro: 22rem; /* Capa de kit (entre-elas.html): largura maxima dentro do cartao. Com dois kits por linha, a capa na largura toda do cartao passava de 34rem numa tela larga (Gabriel, 11/10/2026). */ --largura-capa-kit: 24rem; /* Faixa de foto: altura minima no celular, onde 21:9 viraria uma tira. Abaixo dela o corte fecha nas laterais, nao na cabeca. */ --faixa-altura-min: 14rem; --desfoque-cabecalho: 10px; /* ---------- PROPORCOES DE IMAGEM ---------- */ --proporcao-retrato: 3 / 4; --proporcao-paisagem: 3 / 2; /* Larga, para arte 16:9 com texto nas duas pontas (Formacao e Maturidade Crista, 12/10/2026): 3:2 cortaria uma delas. */ --proporcao-larga: 16 / 9; --proporcao-quadrada: 1 / 1; /* Capa do Restaura, como a Cris enviou: 1080 x 1350 px. */ --proporcao-capa: 4 / 5; /* Capa de livro: 2:3, o formato do livro impresso (o arquivo enviado tem 1024 x 1536). */ --proporcao-livro: 2 / 3; /* Faixa de foto larga, que abre uma secao (home, Produtos). */ --proporcao-faixa: 21 / 9; }