/* ========================================================================== TEMA — Psi Gabriella Pozzer. Vestimenta do `base.css` do template de produção. Não é design system do banco: foi EXTRAÍDO do site atual dela (Elementor), para a reconstrução preservar a identidade visual que a cliente já reconhece como sua. Origem dos valores, medida em 05/09/2026 no CSS de produção (`wp-content/uploads/elementor/css/post-13741.css`): famílias Baskervville (19 usos) + Manrope (8) — as duas que carregam o design; Poppins e Montserrat aparecem 4 e 1 vez e foram descartadas por ruído. carvão #3F4249 (32) · #373737 (26) · #1B1B1B (14) claros #F5F5F5 (12) · #D9D9D9 (8) · #FFFFFF (8) · #E4DBDB (6) turquesa #BDE2E5 (7) · #74CFD9 (4) · #018792 (2) ⚠️ UMA COR FOI ALTERADA, e é a única divergência proposital do original. A turquesa de ação #018792 dá **4,30** de contraste sobre branco — abaixo dos 4,5 da WCAG AA para corpo de texto, e ela era usada em link e botão. Escurecida para #016F78, que dá **5,92** e continua sendo a mesma cor à vista. As duas turquesas claras (#BDE2E5, #74CFD9) seguem intactas: só aparecem como fundo e como detalhe grande, onde a régua é 3,0. Conferência completa no `README.md` deste site. ========================================================================== */ :root { /* ---- primitivas ------------------------------------------------------- */ --c-ink-950: #121417; --c-ink-900: #1B1B1B; /* corpo de texto — 17,22 sobre branco */ --c-ink-800: #263238; /* faixa invertida */ --c-ink-700: #3F4249; /* a cor mais usada do site dela */ --c-ink-400: #5B6167; /* apoio — 5,67 sobre --bg-alt */ --c-ink-200: #D9D9D9; --c-ink-100: #E4DBDB; /* neutro QUENTE — é o que tira o cinza do site */ --c-ink-050: #F6F3F1; --c-white: #FFFFFF; /* turquesa: a assinatura dela */ --c-teal-700: #016F78; /* ação (ver o aviso do cabeçalho) */ --c-teal-600: #01808B; /* hover */ --c-teal-400: #74CFD9; --c-teal-200: #BDE2E5; --c-ok: #15803D; --c-bad: #B91C1C; /* ---- cores semânticas ------------------------------------------------- */ --bg: var(--c-white); --bg-alt: var(--c-ink-050); --bg-invert: var(--c-ink-800); --fg: var(--c-ink-900); --fg-muted: var(--c-ink-400); --fg-invert: var(--c-ink-050); --border: var(--c-ink-200); --border-strong: var(--c-ink-700); --accent: var(--c-teal-700); --accent-fg: var(--c-white); --accent-hover: var(--c-teal-600); --accent-quiet: color-mix(in oklab, var(--c-teal-200) 55%, transparent); --ok: var(--c-ok); --bad: var(--c-bad); /* ---- tipografia ------------------------------------------------------- Fonte remota é proibida pelo template: os dois .woff2 são locais, e vieram já auto-hospedados pelo Elementor no site dela (subset latino). Manrope é variável — um arquivo cobre 200..800. ---------------------------------------------------------------------- */ --font-display: "Baskervville", Georgia, "Times New Roman", serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(2rem, 5.2vw, 3.5rem); --fs-h1: clamp(1.875rem, 4.4vw, 3rem); --fs-h2: clamp(1.5rem, 3.2vw, 2.25rem); --fs-h3: clamp(1.125rem, 2vw, 1.3125rem); --fs-body: clamp(1rem, 1.1vw, 1.0625rem); --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-display: 1.14; /* Baskervville tem hastes longas: 1.08 encavala */ --lh-body: 1.68; --weight-display: 400; /* Baskervville só tem 400 — pedir 700 vira falso negrito sintético, que suja a serifa */ --weight-body: 400; --weight-strong: 600; --tracking-tight: -0.01em; --tracking-wide: 0.18em; --display-transform: none; --eyebrow-transform: uppercase; /* ---- forma e espaço --------------------------------------------------- */ --radius: 14px; --radius-small: 10px; --radius-pill: 999px; --border-width: 1px; --shadow: 0 1px 2px rgb(27 27 27 / 0.04), 0 14px 34px -20px rgb(38 50 56 / 0.28); --shadow-none: none; --maxw: 70rem; --maxw-prosa: 60ch; --gutter: clamp(1rem, 4vw, 2.5rem); --space-section: clamp(3.25rem, 8vw, 6rem); --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.24s; --dur-slow: 0.5s; } /* -------------------------------------------------------------------------- Tema escuro: DESLIGADO de propósito. O design system dela não tem variante escura resolvida — a turquesa clara e o neutro quente perdem a relação sobre fundo escuro. Meia variante é pior que nenhuma. O `color-scheme` abaixo impede o navegador de inverter por conta própria os controles de formulário. -------------------------------------------------------------------------- */ :root { color-scheme: light; } /* ========================================================================== Fontes locais. `swap` para o texto aparecer na hora com a fonte de sistema e trocar quando a dela chegar. `size-adjust` na pilha de fallback reduz o pulo do layout na troca. ========================================================================== */ @font-face { font-family: "Baskervville"; src: url("../midia/baskervville-400.woff2") format("woff2"); font-weight: 400; 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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; } @font-face { font-family: "Manrope"; src: url("../midia/manrope-var.woff2") format("woff2-variations"); font-weight: 200 800; 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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; } /* ========================================================================== ASSINATURAS — o que os tokens não carregam. Sem este bloco todo site nosso sai com a mesma cara por baixo de cores diferentes. Carregado DEPOIS do base.css de propósito: empate de especificidade se resolve por ordem. ========================================================================== */ /* 1. A sobrancelha dela é a âncora do design: caixa alta, muito espaçada, turquesa, e SEM o tracinho que o base.css desenha. */ .sobrancelha { color: var(--accent); letter-spacing: var(--tracking-wide); font-weight: var(--weight-strong); font-size: var(--fs-small); } /* 2. Título de seção em serifada, com peso normal e generoso. É a diferença entre "landing genérica" e o consultório dela. */ .cabeca-secao h2 { margin-bottom: 0.35em; } /* 3. Hero: a foto dela é retrato alto e o texto respira à esquerda. */ .hero__titulo { font-weight: 400; } .hero__sub { max-width: 34rem; } /* 4. Cartão: sem sombra, só um filete. O site dela é leve, não "SaaS". */ .cartao { box-shadow: var(--shadow-none); border: var(--border-width) solid var(--c-ink-100); background: var(--bg); } .secao--alt .cartao { background: var(--c-white); } /* 5. Ícone dos 3 quadros: turquesa, traço fino, herda a cor por currentColor. */ .icone { width: 3.25rem; height: 3.25rem; color: var(--accent); margin-bottom: 1rem; } /* 6. Numeração das etapas: a turquesa clara vira DISCO. O base.css desenha só o número solto; sem tamanho e sem centragem o `background` viraria um retângulo colado no texto. */ .passos .cartao::before { display: grid; place-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-teal-200); color: var(--c-ink-800); font-family: var(--font-display); font-weight: 400; line-height: 1; } .passos .cartao { padding-top: 4.25rem; } /* 10. Link do rodapé no hover: a turquesa de AÇÃO é escura e some sobre a faixa invertida. Ali quem responde é a turquesa clara. */ .rodape a:hover { color: var(--c-teal-200); } /* 11. Faixa invertida: o filete do FAQ e a borda do cartão não podem herdar o neutro quente, que sobre escuro vira quase invisível. */ .secao--invert .apoio { color: color-mix(in oklab, var(--c-teal-200) 70%, var(--fg-invert)); } /* 7. FAQ: filete quente em vez do cinza padrão. */ .faq details { border-bottom-color: var(--c-ink-100); } /* 8. Botão: pílula, como no site dela. */ .btn { border-radius: var(--radius-pill); } /* 9. Faixa invertida (a de "Desmistificando"): turquesa clara no destaque. */ .secao--invert .sobrancelha { color: var(--c-teal-200); } .secao--invert .cartao { background: color-mix(in oklab, var(--c-white) 8%, transparent); border-color: color-mix(in oklab, var(--c-teal-200) 30%, transparent); color: var(--fg-invert); }