/* ========================================================================== ClearSeg · Design Tokens -------------------------------------------------------------------------- Fonte única da verdade visual para a LANDING e o PORTAL DO SEGURADO. CSS custom puro — sem framework, sem build step (deploy via SFTP). Estética: premium/sofisticada (Apple × Pipefy). Neutros Apple + índigo. ZERO verde na MARCA (o verde aparece SÓ em status semântico — ver §4). Como usar: e consuma as variáveis: color: var(--text); background: var(--canvas); Acessibilidade: contraste do índigo sobre branco verificado (WCAG): --indigo-700 (#3730A3) 9.9:1 AAA · --indigo-600 (#4F46E5) 6.3:1 AA · --indigo-500 (#6366F1) ~4.5:1 (texto grande/UI) · --text-muted 4.8:1 AA. ========================================================================== */ :root { /* ======================================================================== 1. COR · Tinta & neutros (base Apple) ======================================================================== */ --ink: #0B1020; /* títulos fortes; fundo escuro premium */ --text: #1D2433; /* corpo de texto (~15:1 sobre branco) */ --text-muted: #6B7280; /* legendas, metadados, placeholders (4.8:1 AA) */ --line: #E6E8EC; /* bordas hairline */ --surface: #F4F5F7; /* cards, seções, superfícies elevadas */ --canvas: #FBFBFD; /* fundo da página (off-white) */ --white: #FFFFFF; /* fundo puro / texto sobre escuro */ /* ======================================================================== 2. COR · Rampa índigo (assinatura da marca) ======================================================================== */ --indigo-900: #1E1B4B; /* âncora — fundo/escuro de marca */ --indigo-700: #3730A3; /* primária (9.9:1 sobre branco — AAA) */ --indigo-600: #4F46E5; /* CTA / links (6.3:1 — AA) */ --indigo-500: #6366F1; /* hover / realce (~4.5:1 — texto grande/UI) */ /* ======================================================================== 3. COR · Semântica de marca ------------------------------------------------------------------------ Aliases estáveis: a UI consome estes; trocar de tom = mudar 1 linha. ======================================================================== */ --brand: var(--indigo-700); /* cor primária da marca */ --brand-cta: var(--indigo-600); /* botões/links primários */ --brand-cta-hover: var(--indigo-500); /* estado :hover do CTA */ --brand-strong: var(--indigo-900); /* fundos/headers escuros de marca */ /* anel de foco translúcido (índigo-600 @ 45%) — combine com :focus-visible */ --focus-ring: rgba(79, 70, 229, 0.45); /* sombra de foco pronta pra uso (3px) */ --focus-shadow: 0 0 0 3px var(--focus-ring); /* ======================================================================== 4. COR · Status (chips pequenos — nunca campos grandes) ------------------------------------------------------------------------ Tons profundos e dessaturados. O verde de "pago" é SEMÂNTICO, não é a marca (a marca permanece zero-verde). Cada status traz: cor sólida + tint de fundo + cor de texto escura, garantindo chip legível (≥AA): pago texto #0F6E45 sobre tint #E9F5EF → 5.6:1 pendente texto #8A5A12 sobre tint #FBF1DF → 5.3:1 vencido texto #8E1B14 sobre tint #FBEAE8 → 7.8:1 ======================================================================== */ --status-paid: #1A8F5C; /* pago — cor sólida (ícone/realce) */ --status-paid-bg: #E9F5EF; /* fundo do chip */ --status-paid-text: #0F6E45; /* texto do chip */ --status-pending: #B7791F; /* pendente / a vencer */ --status-pending-bg: #FBF1DF; --status-pending-text:#8A5A12; --status-overdue: #B42318; /* vencido */ --status-overdue-bg: #FBEAE8; --status-overdue-text:#8E1B14; /* ======================================================================== 5. TIPOGRAFIA ------------------------------------------------------------------------ Família: Manrope (auto-hospedada via SFTP em outra tarefa). Stack de fallback nativo para evitar FOUC/CLS antes do @font-face carregar. ======================================================================== */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Escala fluida (mobile-first) com clamp(). Fluido: display → body-lg (acompanham a viewport, ~360px → ~1120px). Fixo: body / small / caption (texto de UI estável p/ legibilidade). */ --text-display: clamp(2.5rem, 1.80rem + 3.60vw, 4rem); /* 40 → 64 */ --text-h1: clamp(2rem, 1.55rem + 2.30vw, 3rem); /* 32 → 48 */ --text-h2: clamp(1.5rem, 1.18rem + 1.60vw, 2.25rem); /* 24 → 36 */ --text-h3: clamp(1.25rem, 1.13rem + 0.60vw, 1.5rem); /* 20 → 24 */ --text-body-lg: clamp(1.125rem,1.07rem + 0.27vw, 1.25rem); /* 18 → 20 */ --text-body: 1rem; /* 16 — âncora de leitura */ --text-small: 0.875rem; /* 14 — apoios, labels */ --text-caption: 0.75rem; /* 12 — metadados, chips */ /* Alturas de linha */ --leading-tight: 1.1; /* display / títulos grandes */ --leading-snug: 1.3; /* subtítulos */ --leading-normal: 1.6; /* corpo */ /* Tracking */ --tracking-tight: -0.02em; /* display / H1 */ --tracking-normal: 0; --tracking-wide: 0.04em; /* labels/overlines em CAIXA ALTA */ /* ======================================================================== 6. ESPAÇAMENTO (escala base 4px → 96px) ======================================================================== */ --space-0: 0; --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. RAIOS (cantos) ======================================================================== */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px; /* ======================================================================== 8. SOMBRAS (3 níveis sutis — blur grande, opacidade baixa) ------------------------------------------------------------------------ Cor da sombra derivada de --ink (#0B1020) para um tom frio coeso. ======================================================================== */ --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.04), 0 1px 3px rgba(11, 16, 32, 0.06); --shadow: 0 2px 4px rgba(11, 16, 32, 0.04), 0 8px 24px rgba(11, 16, 32, 0.06); --shadow-lg: 0 4px 8px rgba(11, 16, 32, 0.04), 0 24px 48px rgba(11, 16, 32, 0.10); /* ======================================================================== 9. LAYOUT ======================================================================== */ --container: 1120px; /* largura máxima de conteúdo */ --container-narrow: 680px; /* prosa / colunas de leitura */ --gutter: var(--space-5); /* respiro lateral mobile (24px) */ /* ======================================================================== 10. MOVIMENTO ======================================================================== */ --ease: cubic-bezier(.2, .7, .2, 1); /* ease-out contido */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --transition: all var(--dur) var(--ease); } /* ========================================================================== UTILITÁRIOS ========================================================================== */ /* Numerais tabulares — obrigatório em valores R$ e datas (alinhamento e largura constante de dígitos no portal). Ex.: */ .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Anel de foco acessível, opt-in. Aplique a classe em elementos interativos custom (ou copie o bloco :focus-visible para seus botões/links): .btn:focus-visible { outline: none; box-shadow: var(--focus-shadow); } */ .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-shadow); } /* Respeita usuários que preferem menos movimento. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }