/* ============================================================================= FORMAÇÃO MÉTODO ANTIQUEDA CAPILAR — DESIGN TOKENS Instituto Drª Marcela Rodrigues · Design System v1 ----------------------------------------------------------------------------- Fonte ÚNICA de verdade. Nenhum outro arquivo deve declarar cor/tamanho/sombra "solto" — sempre referencie uma variável daqui. DNA herdado da "casa" (Figueiredo Neto / FigStudio): • camada CORE (paleta bruta em escala numérica) + camada SEMANTIC ....... Jennifer de Paula + Métrica • escala numérica de cor + tokens --shadow-* / --ease-expo ............... Métrica • gradiente de marca central reutilizado em CTA/underline/clip-text ...... Marcelo Thieme Palco INVERTIDO: as referências são dark-on-black; aqui é light-on-white, com Bordô como acento forte e Rosê como cor de empatia. Paleta oficial obrigatória (briefing): #ffffff · #7b0303 · #b57170 ============================================================================= */ :root { /* ====================================================================== 1 · CAMADA CORE — paleta bruta + escalas numéricas ====================================================================== */ /* -- Branco / base -- */ --white: #ffffff; /* -- Bordô / Vinho Profundo (acento FORTE: CTA, títulos, ícones, lote ativo) Base oficial = --bordo (#7b0303). Escala derivada para estados/detalhes. -- */ --bordo-50: #faecec; --bordo-100: #f2d4d4; --bordo-200: #e3b0b0; --bordo-300: #d08585; --bordo-400: #a83b3b; /* tint (briefing) — links/ícones sobre claro */ --bordo-500: #8f1a1a; --bordo: #7b0303; /* ★ BASE OFICIAL */ --bordo-700: #5c0202; /* dark (briefing) — hover/pressed do CTA */ --bordo-800: #440101; --bordo-900: #2f0000; /* -- Rosê Envelhecido (empatia/transição: seção da Dra., depoimentos) Base oficial = --rose (#b57170). -- */ --rose-50: #faf3f3; --rose-100: #f2e3e2; /* rose-soft — fundos blush quase imperceptíveis */ --rose-200: #e6cbca; --rose-300: #d3a9a8; --rose-400: #c48d8c; --rose: #b57170; /* ★ BASE OFICIAL */ --rose-600: #9a5a59; --rose-700: #7d4645; /* -- Neutros quentes (alinhados ao Bordô — nunca cinza-azulado nem preto puro) -- */ --neutral-0: #ffffff; --neutral-50: #faf8f8; --neutral-100: #f7f5f5; --neutral-200: #efeaea; --neutral-300: #e3dede; --neutral-400: #c9c0c0; --neutral-500: #6b5f5f; /* texto muted */ --neutral-700: #413636; --neutral-900: #2b2323; /* texto principal — quase-preto quente */ /* -- Feedback / acentos utilitários -- */ --success: #2e7d5b; /* barra de progresso preenchida + "✓" da tabela */ --danger: #7b0303; /* urgência (timer final, "Últimas vagas") = Bordô */ --danger-red: #c0392b; /* ✕ vermelho — usar SÓ se o cliente exigir */ --star: #f5c542; /* estrela de avaliação (rating) */ --online: #34c759; /* bolinha "online" do CTA humanizado */ /* ====================================================================== 2 · CAMADA SEMANTIC — papéis (o que o time usa no dia a dia) ====================================================================== */ /* Fundos de seção — o "ritmo" dark/cream/surface da casa, traduzido: branco (surface) → neutro (alt) → rosê (empatia) → bordô (invert). */ --bg: var(--white); --bg-alt: var(--neutral-100); /* Empatia forte usa rosê MAIS profundo (rose-600): garante texto branco ≥4.5:1 (WCAG AA). O rosê base #b57170 dava só 3.8:1 com branco. Mesma família. */ --bg-empathy: var(--rose-600); /* seção da Dra. (texto branco por cima) */ --bg-empathy-soft: var(--rose-100); --bg-invert: var(--bordo); /* faixas de autoridade / CTA forte */ --surface: var(--white); /* cards */ --surface-invert: var(--bordo); /* card flagship / lote ativo */ /* Texto */ --text: var(--neutral-900); --text-muted: var(--neutral-500); --text-on-bordo: #ffffff; --text-on-rose: #ffffff; /* só títulos/curto; corpo → --text */ /* Linhas / bordas */ --border: var(--neutral-300); --border-light: var(--neutral-200); --border-strong: var(--bordo); /* Foco (acessibilidade) */ --ring: rgba(123, 3, 3, .30); /* ====================================================================== 3 · GRADIENTE DE MARCA — reutilizado em CTA / underline / clip-text (o "único gradiente central" que dá coesão, como o azul-aço fazia) ====================================================================== */ --gradient-brand: linear-gradient(135deg, #7b0303, #b57170); --gradient-brand-hover:linear-gradient(135deg, #8f1a1a, #c48d8c); --gradient-title: linear-gradient(180deg, #7b0303, #a83b3b); /* clip-text de palavra-destaque */ --gradient-hero-veil: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.92) 100%); /* ====================================================================== 4 · TIPOGRAFIA ====================================================================== */ --font-title: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Escala fluida com clamp() (disciplina da casa) — base 16px */ --fs-display: clamp(40px, 7vw, 68px); --fs-h1: clamp(32px, 6vw, 48px); --fs-h2: clamp(26px, 4.8vw, 34px); --fs-h3: clamp(20px, 3vw, 24px); --fs-h4: clamp(18px, 2.2vw, 20px); --fs-body: clamp(16px, 1.2vw, 17px); --fs-small: 14px; --fs-eyebrow: .75rem; --lh-tight: 1.08; /* display/hero */ --lh-heading: 1.2; /* h2/h3 */ --lh-body: 1.65; /* parágrafos */ --tracking-title: -.03em; /* "aperto premium" nos títulos */ --tracking-tight: -.02em; --tracking-eyebrow: .14em; /* labels/eyebrows */ --tracking-cta: .02em; --weight-title: 600; --weight-medium: 500; --weight-body: 400; --weight-strong: 600; /* ====================================================================== 5 · FORMA — radius / sombras / movimento ====================================================================== */ --radius-sm: 8px; /* inputs, tags */ --radius: 16px; /* cards (padrão da casa) */ --radius-lg: 24px; /* blocos grandes */ --radius-full: 999px; /* pills, CTAs, barra de vagas */ /* Sombras ultra-sutis, SEMPRE tingidas de bordô (nunca preto puro) */ --shadow-sm: 0 8px 30px rgba(123, 3, 3, .06); --shadow-md: 0 12px 36px rgba(123, 3, 3, .10); --shadow-lg: 0 20px 48px rgba(123, 3, 3, .12); --shadow-cta:0 10px 30px rgba(123, 3, 3, .30); /* Transições / easings */ --transition: all .28s cubic-bezier(.25, .46, .45, .94); --transition-fast: all .2s ease; --ease-expo: cubic-bezier(.16, 1, .3, 1); /* reveal/parallax premium */ --dur-reveal: .7s; --dur-fill: .42s; /* fill animado do CTA (::before scaleX) */ /* ====================================================================== 6 · LAYOUT — container / espaçamento ====================================================================== */ --container: 1240px; --container-narrow: 880px; --container-wide: 1400px; --pad-x: 24px; /* respiro lateral (→40px no desktop) */ --section-y: clamp(72px, 10vw, 140px); /* respiro vertical de seção */ /* Escala de espaçamento (base 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ====================================================================== 7 · CAMADAS (z-index) ====================================================================== */ --z-topbar: 100; --z-float: 500; /* WhatsApp flutuante */ --z-modal: 1000; } /* Respiro lateral maior no desktop */ @media (min-width: 768px) { :root { --pad-x: 40px; } }