/* ╔═══════════════════════════════════════════════════════════════════════╗ ║ NOW Vida — Design Tokens (fundação do design system) ║ ║ ║ ║ Único lugar onde cores, espaçamentos, raios, sombras e tipografia ║ ║ são definidos. components.css consome SOMENTE estas variáveis. ║ ║ ║ ║ Importar SEMPRE antes de components.css: ║ ║ ║ ║ ║ ║ ║ ║ Identidade NOW Vida: clínica + acolhedora. Verde sereno (cuidado) ║ ║ com acento âmbar (vitalidade). NÃO é o verde do consultaja. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ── Fontes Google: Bricolage Grotesque (títulos) + DM Sans (corpo) ── */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..500&display=swap'); :root { /* ════════════════════════════════════════════════════════════════════ CORES — paleta clínica + acolhedora (identidade NOW Vida) ════════════════════════════════════════════════════════════════════ */ /* Marca — verde cuidado */ --nv-primary: #0E7A5F; /* verde principal (CTA, links, marca) */ --nv-primary-dark: #0A5E49; /* hover / estados pressionados */ --nv-primary-soft: #E6F2EC; /* fundo suave de destaque (pills, selos) */ /* Acento — âmbar vitalidade (usar com parcimônia: destaque, não promessa) */ --nv-accent: #F2A65A; --nv-accent-dark: #D98A3D; /* derivado p/ hover/borda do acento */ /* Texto */ --nv-ink: #14201B; /* texto principal, títulos */ --nv-muted: #5B6B64; /* texto secundário, legendas */ /* Estrutura / superfícies */ --nv-line: #E3EAE6; /* bordas, divisores */ --nv-bg: #FFFFFF; /* fundo da página */ --nv-surface: #F5F8F6; /* superfície suave (seções alternadas, inputs) */ /* Estados semânticos */ --nv-danger: #C0492F; /* erro, contraindicação, alerta forte */ --nv-warn: #C77A1E; /* atenção, pendência */ /* Derivados de fundo translúcido (nav fixo, overlays) */ --nv-bg-translucent: rgba(255, 255, 255, 0.86); --nv-overlay: rgba(20, 32, 27, 0.45); /* Texto sobre fundo escuro (footer, seções dark) */ --nv-on-dark: #F5F8F6; --nv-on-dark-muted: rgba(245, 248, 246, 0.66); --nv-dark-section: #0F2A22; /* verde profundo p/ footer/seções escuras */ /* ════════════════════════════════════════════════════════════════════ TIPOGRAFIA ════════════════════════════════════════════════════════════════════ */ --nv-font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; --nv-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* Escala de tamanhos (rem, base 16px) */ --nv-text-xs: 0.75rem; /* 12px — legendas, selos */ --nv-text-sm: 0.875rem; /* 14px — texto secundário, labels */ --nv-text-base: 1rem; /* 16px — corpo padrão */ --nv-text-lg: 1.125rem; /* 18px — corpo destaque, lead */ --nv-text-xl: 1.375rem; /* 22px — subtítulos */ --nv-text-2xl: 1.75rem; /* 28px — títulos de seção */ --nv-text-3xl: 2.25rem; /* 36px — títulos grandes */ --nv-text-4xl: 3rem; /* 48px — hero (desktop) */ /* Pesos */ --nv-weight-regular: 400; --nv-weight-medium: 500; --nv-weight-semibold: 600; --nv-weight-bold: 700; /* Altura de linha */ --nv-leading-tight: 1.15; --nv-leading-snug: 1.3; --nv-leading-normal: 1.55; --nv-leading-relaxed: 1.7; /* Espaçamento entre letras */ --nv-tracking-tight: -0.02em; --nv-tracking-normal: 0; --nv-tracking-wide: 0.04em; --nv-tracking-caps: 0.08em; /* p/ rótulos em CAIXA ALTA */ /* ════════════════════════════════════════════════════════════════════ ESPAÇAMENTO — escala de 4px ════════════════════════════════════════════════════════════════════ */ --nv-space-1: 4px; --nv-space-2: 8px; --nv-space-3: 12px; --nv-space-4: 16px; --nv-space-5: 20px; --nv-space-6: 24px; --nv-space-8: 32px; --nv-space-10: 40px; --nv-space-12: 48px; --nv-space-16: 64px; --nv-space-20: 80px; --nv-space-24: 96px; /* ════════════════════════════════════════════════════════════════════ RAIOS DE BORDA — cantos suaves (premium-clínico) ════════════════════════════════════════════════════════════════════ */ --nv-radius-sm: 8px; --nv-radius-md: 12px; --nv-radius-lg: 16px; --nv-radius-xl: 24px; --nv-radius-2xl: 32px; --nv-radius-pill: 999px; /* ════════════════════════════════════════════════════════════════════ SOMBRAS — sutis, tom verde frio (não preto puro) ════════════════════════════════════════════════════════════════════ */ --nv-shadow-xs: 0 1px 2px rgba(15, 42, 34, 0.05); --nv-shadow-sm: 0 2px 8px rgba(15, 42, 34, 0.06); --nv-shadow-md: 0 8px 24px rgba(15, 42, 34, 0.08); --nv-shadow-lg: 0 16px 48px rgba(15, 42, 34, 0.10); --nv-shadow-xl: 0 28px 70px rgba(15, 42, 34, 0.12); --nv-shadow-btn: 0 6px 18px rgba(14, 122, 95, 0.24); --nv-shadow-btn-hover: 0 10px 26px rgba(14, 122, 95, 0.34); /* Anel de foco (acessibilidade) */ --nv-focus-ring: 0 0 0 3px rgba(14, 122, 95, 0.35); /* ════════════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════════════ */ --nv-container-max: 1080px; /* wrapper principal */ --nv-funnel-max: 560px; /* coluna do funil, centralizada */ --nv-nav-height: 64px; /* ════════════════════════════════════════════════════════════════════ TRANSIÇÕES ════════════════════════════════════════════════════════════════════ */ --nv-transition-fast: 0.15s ease; --nv-transition-base: 0.22s ease; --nv-transition-slow: 0.35s ease; /* ════════════════════════════════════════════════════════════════════ CAMADAS (z-index) ════════════════════════════════════════════════════════════════════ */ --nv-z-nav: 100; --nv-z-overlay: 500; --nv-z-modal: 600; } /* ── Breakpoints (referência — CSS custom properties não funcionam em media queries, então documentamos os valores aqui e usamos literais nas @media de components.css): --nv-bp-sm: 480px (telefone grande) --nv-bp-md: 768px (tablet) --nv-bp-lg: 1024px (desktop) --nv-bp-xl: 1200px (desktop largo) ──────────────────────────────────────────────────────────────────── */ /* ── Reset enxuto + base tipográfica ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--nv-font-body); font-size: var(--nv-text-base); line-height: var(--nv-leading-normal); color: var(--nv-ink); background: var(--nv-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); line-height: var(--nv-leading-tight); letter-spacing: var(--nv-tracking-tight); color: var(--nv-ink); margin: 0 0 var(--nv-space-4); } p { margin: 0 0 var(--nv-space-4); } a { color: var(--nv-primary); text-decoration: none; transition: color var(--nv-transition-fast); } a:hover { color: var(--nv-primary-dark); } img { max-width: 100%; display: block; } /* ── Acessibilidade: foco visível por teclado (WCAG 2.4.7) ─────────────── */ :focus-visible { outline: none; box-shadow: var(--nv-focus-ring); border-radius: var(--nv-radius-sm); } /* ── Respeita preferência de movimento reduzido (WCAG 2.3.3) ───────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Utilitário: conteúdo só para leitores de tela ─────────────────────── */ .nv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }