/* Psicanalista Luciana Lima — psicanálise de orientação clássica, online ================================================================== A folha única do site, como as do laborclin e da Marina: uma página, uma folha, e o comentário explica o porquê e não o quê. O registro visual é o do cadastro dela (empresas.registro_visual = 'terapeutico'): "muito ar, tons dessaturados, tipografia leve — o silêncio como composição". A paleta é a do Brand Kit dela ('acolhida' no briefing): verde #1F4B3E, linho #F5F0E8, água #4CAF93. A dupla tipográfica é a 'Brando' (Lora display + Nunito texto), a mesma dos doc_json dos posts 110–115 — quem vê o feed dela e chega aqui vê a mesma marca. ── A virada de 22/09/2026 ──────────────────────────────────────────── Paleta, dupla tipográfica e as três regras do registro continuam de pé; a FORMA mudou inteira, porque a anterior era chrome de template: cartão arredondado, pílula, barra de vidro, ícone grande em cada item e um texto estreito encostado à esquerda com meia tela vazia do lado. No lugar disso, a gramática editorial que o acervo descreve para serviço por hora marcada e para grade de agência: - **uma grade de 12 colunas de verdade.** O chapéu de cada seção mora nas colunas 1–3 e o assunto nas 5–12. É isso que faz a página parecer composta e não empilhada — e é isso que ocupa a metade direita que antes ficava vazia. - **fio de cabelo no lugar de caixa.** Nada de borda em volta, sombra nem fundo de cartão: o que separa é uma linha de 1px e o ar em volta dela. - **raio quase zero.** 2px no botão, 0 no resto. Arredondado é o sotaque de template que a página estava falando. - **a foto não fala.** Nenhuma imagem leva texto por cima; quem escreve escreve sobre cor chapada. (Foi o que substituiu a prova do véu do herói, que deixou de existir junto com a foto dela.) - **sem foto dela, por ora** (decisão do Escobar, 22/09). As de banco ficam — nenhuma tem rosto. ── A emenda da mesma noite ─────────────────────────────────── Sem a foto dela, a abertura tinha virado tipografia pura — e o Escobar devolveu duas coisas: "o herói está muito estranho" e "no começo não pode ser SÓ texto". A resposta não foi desfazer a virada: a abertura ganhou DUAS COLUNAS, com a foto das mãos em pé ao lado do texto (o recorte `maos-alto`, 4:5), e a banda larga que vinha logo abaixo saiu — a mesma foto duas vezes seguidas era repetição, não respiro. O que a foto não pode fazer continua valendo: ela não leva palavra por cima, e não é foto dela. E o que estava "bugado no cabeçalho" não era margem nem padding: era o sprite dos ícones desenhando 300×150 em branco no alto do . Está explicado na regra `svg[hidden]`, lá embaixo. ── E a segunda emenda, no fim do mesmo dia ──────────────────────── Duas coisas, das mesmas mãos: - **a rota** (`.rota`, mais abaixo). Ela mora nos EUA e atende dos dois lados, e isso vivia só numa linha da lista de fatos. Agora são duas bandeiras de TRAÇO com um fio que se desenha entre elas, fechando a coluna de texto do herói. - **mais duas fotos** (`ramos` e `cortina`), e as duas por temperatura: "as fotos no geral estão meio melancólicas demais". O assunto delas é a luz que entra num lugar — sem pessoa, como manda o CREDITS. As três regras que vieram dos templates dela e não se quebram: 1. **A água nunca escreve sobre o linho.** #4CAF93 sobre #F5F0E8 dá 2,4:1. A água é traço, círculo vazado e fio; quem escreve em cor de acento é a --agua-texto (5,3:1). 2. **A numeração é PERCURSO, não protocolo.** Círculo vazado, fio fino ligando — é um caminho que passa, não uma sequência que prende. Um processo terapêutico não tem etapa obrigatória. 3. **O ar é o assunto.** Nada aqui compete com a palavra. Nunca preto, nunca cinza puro: a sombra e o traço são o verde em alpha. */ /* ── Fontes ───────────────────────────────────────────────────────────── Self-hosted, copiadas de social/assets/fonts. A folha do Google bloquearia o render e só descobriria os woff2 depois — mesmo motivo do landing.css. Lora tem 400–700, Nunito 200–1000; nenhuma das duas tem itálico no repositório (src/typography/fonts.js), então o CSS nunca pede itálico. */ @font-face { font-family: 'Lora'; src: url(../fontes/lora.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; src: url(../fontes/nunito.woff2) format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Tokens ───────────────────────────────────────────────────────────── Contraste WCAG calculado e escrito ao lado de cada par que carrega texto. O provar.js recalcula todos eles a cada rodada — se um token mudar de mão, a prova cai. */ :root { --linho: #F5F0E8; /* o papel do body — o `claro` do Brand Kit */ --linho-2: #FBF8F3; /* seção clara. Verde por cima: 9,3:1 */ --linho-3: #EDE6DA; /* reservado: tom intermediário do papel */ --verde: #1F4B3E; /* o `escuro` do Brand Kit. 8,7:1 sobre o linho */ --verde-2: #4F5E57; /* parágrafo. 6,0:1 sobre o linho */ --verde-traco: rgba(31, 75, 62, .16); /* o fio de cabelo que separa tudo */ --agua: #4CAF93; /* o `acento`. 2,4:1 sobre o linho: NUNCA texto. Só traço, círculo vazado e fio. */ --agua-texto: #2C6E5C; /* 5,3:1 sobre o linho — o chapéu e o link */ --agua-clara: #A8DCC9; /* 6,4:1 sobre o verde — o chapéu no fundo escuro */ --sobre-verde: #F5F0E8; /* texto no fundo escuro: 8,7:1 */ --sobre-verde-2: #C9E6DA; /* parágrafo no fundo escuro: 7,4:1 */ --traco-claro: rgba(168, 220, 201, .32); /* o fio de cabelo no escuro */ --foco: #2C6E5C; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px; --e9: 64px; --e10: 96px; /* Raio quase zero: o botão ganha 2px só para não ficar cortante, e o resto da página não tem canto redondo nenhum. Arredondar cartão e foto era o que fazia a página soar template. */ --r-m: 2px; --margem: var(--e5); --secao: 88px; --coluna: 1240px; --vao: var(--e6); /* a calha entre as 12 colunas */ --topo-ancora: 84px; /* a barra grudada não pode comer o título da âncora */ --f-display: 'Lora', Georgia, 'Times New Roman', serif; --f-texto: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --curva: cubic-bezier(.2, .7, .3, 1); /* Sem isto, um telefone no modo escuro entrega os controles nativos em preto no meio de uma página de papel. */ color-scheme: light; accent-color: var(--agua-texto); } /* ── Base ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--linho); color: var(--verde); font-family: var(--f-texto); font-size: 17px; font-weight: 400; line-height: 1.7; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; padding-bottom: 80px; /* o espaço da barra do pé; sai em ≥900px */ } img { max-width: 100%; display: block; } /* O sprite dos ícones é declaração, não desenho — e o `hidden` do HTML não basta para escondê-lo: a regra `[hidden] { display: none }` da folha do navegador vale para elementos HTML, e o ` só põe se houver JS e o visitante não pedir menos movimento — e que sai sozinho se o site.js falhar. */ html[data-luz] [data-revela] { transition: opacity .6s var(--curva), transform .7s var(--curva); } html[data-luz] [data-revela]:not([data-aceso]) { opacity: 0; transform: translateY(12px); } /* O fio nasce inteiro (o fallback 1 do calc) e só encolhe sob data-luz — é o contrato: o pré-estado vive debaixo do html[data-luz], nunca fora dele. */ html[data-luz] .fio-andado { --andado: 0; transition: height .18s linear; } /* O fio da rota anda uma vez só, e só sob luz. `both` segura o zero durante o atraso e o cem por cento depois do fim — sem ele, a linha piscaria inteira antes de começar. */ html[data-luz] .rota-fio i { --rota: 0; animation: rota-anda 1.5s var(--curva) .5s both; } @keyframes rota-anda { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* ── As larguras ─────────────────────────────────────────────────────── Uma quebra só de verdade, em 900px: abaixo dela a página é uma coluna, acima dela é a grade de 12. */ @media (min-width: 620px) { .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e7); } .fatos > div:nth-child(2) { border-top: 0; padding-top: 0; } } @media (min-width: 900px) { :root { --margem: var(--e8); --secao: 132px; --topo-ancora: 96px; } .barra-links { display: flex; } .barra-in .barra-acao { display: inline-flex; } /* A grade de 12. Toda seção que compõe herda estas colunas; o chapéu fica nas 1–3 e o assunto nas 5–12, e é essa folga entre 3 e 5 que dá o ar. */ .cabeca, .abre, .historia-grade, .rodape-grade, .parada, .temas li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); } .cabeca { padding-top: var(--e7); } .cabeca > .chapeu { grid-column: 1 / 4; margin: 0; } .cabeca > .titulo { grid-column: 5 / 12; } .cabeca > .corpo { grid-column: 5 / 11; } .cabeca > .botoes { grid-column: 5 / 12; } /* A abertura: o que ela diz nas colunas 1–7, a foto em pé nas 9–12. As duas começam na mesma linha do alto — é esse topo em comum que faz as metades lerem como uma composição só. A foto desce mais que o texto de propósito: numa primeira tela sem foto de pessoa, é a coluna vertical que dá o eixo, e alinhar a base deixaria a imagem deitada. */ .abre-dizer { grid-column: 1 / 8; align-self: start; } .abre-foto { grid-column: 9 / 13; margin: 0; aspect-ratio: auto; max-height: none; min-height: 500px; } .abre-pe { grid-column: 1 / 13; } .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao); } /* O percurso e os temas: mesma divisão de índice em toda a página. */ .percurso { padding-left: 0; } .parada { padding-left: 0; padding-block: var(--e7); } .marcador { left: 0; top: var(--e7); } .parada h3 { grid-column: 2 / 6; } .parada p { grid-column: 6 / 12; } .fio { left: 22px; top: calc(var(--e7) + 44px); } .temas li { padding-block: var(--e7); } .temas h3 { grid-column: 1 / 5; } .temas p { grid-column: 5 / 12; } /* Recuo até o começo da coluna 5, que é onde o assunto de toda seção começa. Com 12 colunas e 11 calhas, o começo da 5ª fica em 4·(coluna + calha) = (largura + calha) / 3. */ .nota-clara { margin-left: calc((100% + var(--vao)) / 3); } .fala { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: start; margin-top: var(--e8); } .fala > .citacao { grid-column: 5 / 12; grid-row: 1; margin: 0; } .fala-foto { grid-column: 1 / 5; grid-row: 1; margin: 0; } .citacao { margin-left: calc((100% + var(--vao)) / 3); max-width: 34ch; } .fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); } .fecho > .corpo { grid-column: 5 / 10; } .fecho > .botoes { grid-column: 5 / 12; margin-top: var(--e6); } .historia-grade { gap: var(--e9) var(--vao); align-items: start; } .historia-texto { display: block; } .historia-texto > *, .historia-foto { order: 0; } .historia-foto { margin: 0; } /* A foto acompanha a leitura: os capítulos são longos e ela, sozinha, acabava na metade. Na primeira parte à direita, na segunda à esquerda. */ .historia-texto { grid-column: 1 / 7; } .historia-foto { grid-column: 8 / 13; position: sticky; top: 112px; } .historia-2 .historia-foto { grid-column: 1 / 6; grid-row: 1; } .historia-2 .historia-texto { grid-column: 7 / 13; grid-row: 1; } .virada-frase { margin-left: calc((100% + var(--vao)) / 3); } .cabeca > .conversar-crenca { grid-column: 5 / 12; } .rodape-grade { gap: var(--e7) var(--vao); } .rodape-bloco:nth-child(1) { grid-column: 1 / 4; } .rodape-bloco:nth-child(2) { grid-column: 4 / 8; } .rodape-bloco:nth-child(3) { grid-column: 8 / 10; } .rodape-bloco:nth-child(4) { grid-column: 10 / 13; } /* O fio do aviso atravessa o rodapé inteiro: um traço que parasse a dois terços da largura leria como defeito, e não como composição. */ .rodape-aviso { grid-column: 1 / 13; max-width: none; } } @media (min-width: 900px) { body { padding-bottom: 0; } .barra-pe { display: none; } }