/* ============================================================================ LAÍS NICOLA — ADVOCACIA ESPECIALIZADA Design System · Camada de Tokens Projeto: LP Fraude Pix · Jul/26 ---------------------------------------------------------------------------- Fonte única da verdade para cor, tipografia, espaço, forma e movimento. Tema ESCURO (petróleo) é o padrão. Tema CLARO via [data-theme="light"] (A/B). Extraído da identidade visual — nada aqui é inventado. ============================================================================ */ /* ------------------------------------------------------------------ * * 1. FONTES — self-hosted (page-performance) * Declaradas em fonts.css (woff2, latin + latin-ext). Carregar fonts.css * ANTES deste arquivo no . Sem @import do Google (era render-blocking). * ------------------------------------------------------------------ */ /* ============================================================================ 2. TOKENS PRIMITIVOS (a paleta bruta — não usar direto nos componentes) ============================================================================ */ :root { /* — Petróleo (base da marca) — */ --c-petrol: #023040; /* fundo principal */ --c-petrol-deep: #021F2A; /* profundidade / alternado */ --c-petrol-deepest: #01151D; /* poços de sombra, footer */ --c-petrol-tint: #0A3E50; /* superfície elevada sutil */ /* — Gold (dourado metálico) — */ --c-gold: #C9A44C; /* flat / acento principal */ --c-gold-light: #F1DFA6; /* brilho / topo do metal */ --c-gold-deep: #A8842F; /* base do metal / sombra */ --c-gold-ink: #6E5518; /* dourado sobre fundo claro (texto) */ /* — Neutros — */ --c-white: #FFFFFF; --c-ivory: #FBF8F1; /* branco quente p/ tema claro */ --c-ivory-2: #F3EEE1; /* — Gradiente metálico do dourado (canônico da marca) — */ --grad-gold: linear-gradient(135deg, #F1DFA6 0%, #E7C978 26%, #C9A44C 58%, #A8842F 100%); /* Gradiente para reflexo de metal em texto/linhas horizontais */ --grad-gold-sheen: linear-gradient(180deg, #F6E9BE 0%, #D9B65E 45%, #C9A44C 55%, #A8842F 100%); /* — Gradientes CHEIOS — REGRA: sempre a MESMA cor, só tonalidades diferentes. Nunca misturar matizes (ex.: petróleo→dourado). — */ --grad-petrol: linear-gradient(135deg, #0A3E50 0%, #023040 55%, #01151D 100%); /* petróleo tonal */ --grad-gold-depth: linear-gradient(135deg, #F1DFA6 0%, #C9A44C 45%, #6E5518 100%); /* dourado tonal */ /* — WhatsApp (CTA de conversão) — verde tonal, sóbrio e legível com texto branco — */ --wa-green: #17A34E; --wa-green-deep: #0F7C3C; --wa-grad: linear-gradient(160deg, #1BA653 0%, #148F45 60%, #0F7C3C 100%); } /* ============================================================================ 3. TOKENS SEMÂNTICOS — TEMA ESCURO (padrão) ============================================================================ */ :root { color-scheme: dark; /* Planos de fundo */ --bg: var(--c-petrol); --bg-alt: var(--c-petrol-deep); --bg-deep: var(--c-petrol-deepest); --bg-elevated: var(--c-petrol-tint); /* Opacidade do pattern LN sobre o fundo — detalhe muito sutil, quase imperceptível */ --pattern-opacity: 0.02; /* Texto */ --text: var(--c-white); --text-muted: rgba(255,255,255,0.65); /* apoio (branco 65%) */ --text-faint: rgba(255,255,255,0.40); --text-on-gold: #04222E; /* texto sobre botão dourado */ /* Acento dourado */ --accent: var(--c-gold); --accent-light: var(--c-gold-light); --accent-deep: var(--c-gold-deep); --accent-grad: var(--grad-gold); --accent-sheen: var(--grad-gold-sheen); /* Glassmorphism (cards) */ --glass-bg: rgba(255,255,255,0.04); --glass-bg-hover: rgba(255,255,255,0.06); --glass-border: rgba(201,164,76,0.25); /* borda 1px dourada */ --glass-border-strong: rgba(201,164,76,0.45); --glass-blur: 12px; --glass-highlight: rgba(255,255,255,0.10); /* brilho no topo do card */ /* Superfícies de vidro — 3 variantes (blur+saturate, com brilho no topo) */ --glass-filter: blur(16px) saturate(180%); --glass-filter-mobile: blur(8px) saturate(160%); /* backdrop-filter é caro no mobile */ --glass-default-bg: rgba(255,255,255,0.05); --glass-default-top: rgba(255,255,255,0.12); /* highlight superior */ --glass-gold-bg: rgba(201,164,76,0.06); --glass-gold-border: rgba(201,164,76,0.18); --glass-gold-top: rgba(241,223,166,0.22); --glass-deep-bg: rgba(2,21,29,0.50); /* vidro escuro p/ overlays */ --glass-deep-top: rgba(255,255,255,0.08); --glass-fallback: #063243; /* sólido onde não há backdrop-filter */ /* Linhas / divisores dourados finos com transparência */ --line-gold: rgba(201,164,76,0.28); --line-gold-soft: rgba(201,164,76,0.14); --hairline: rgba(255,255,255,0.09); /* divisor neutro */ /* Foco / estados */ --focus-ring: rgba(201,164,76,0.55); --overlay: rgba(1,21,29,0.72); /* Sombras (frias, projetadas no petróleo) */ --shadow-sm: 0 1px 2px rgba(1,15,21,0.40); --shadow-md: 0 8px 24px -6px rgba(1,15,21,0.55); --shadow-lg: 0 24px 60px -18px rgba(1,15,21,0.70); --shadow-gold: 0 10px 40px -12px rgba(201,164,76,0.30); /* Vidro do header ao rolar */ --header-bg: rgba(2,31,42,0.72); } /* ============================================================================ 4. TOKENS SEMÂNTICOS — TEMA CLARO (variação A/B) Mantém petróleo + gold como assinatura; base vira marfim quente. ============================================================================ */ [data-theme="light"] { color-scheme: light; --bg: var(--c-ivory); --bg-alt: var(--c-ivory-2); --bg-deep: #ECE5D4; --bg-elevated: #FFFFFF; --pattern-opacity: 0.015; --text: var(--c-petrol); --text-muted: rgba(2,48,64,0.66); --text-faint: rgba(2,48,64,0.42); --text-on-gold: #04222E; --accent: #B08A34; /* dourado levemente mais escuro p/ contraste em fundo claro */ --accent-light: #C9A44C; --accent-deep: var(--c-gold-ink); /* gradiente com base mais fechada p/ legibilidade sobre marfim */ --accent-grad: linear-gradient(135deg,#D9BE72 0%,#C9A44C 45%,#A8842F 100%); --accent-sheen: linear-gradient(180deg,#C9A44C 0%,#A8842F 100%); --glass-bg: rgba(2,48,64,0.035); --glass-bg-hover: rgba(2,48,64,0.055); --glass-border: rgba(168,132,47,0.32); --glass-border-strong: rgba(168,132,47,0.5); --glass-blur: 10px; --glass-highlight: rgba(255,255,255,0.6); /* Superfícies de vidro — tema claro (tints de petróleo sobre marfim) */ --glass-filter: blur(14px) saturate(150%); --glass-filter-mobile: blur(7px) saturate(140%); --glass-default-bg: rgba(255,255,255,0.55); --glass-default-top: rgba(255,255,255,0.9); --glass-gold-bg: rgba(201,164,76,0.10); --glass-gold-border: rgba(168,132,47,0.28); --glass-gold-top: rgba(255,255,255,0.85); --glass-deep-bg: rgba(2,31,42,0.06); --glass-deep-top: rgba(255,255,255,0.8); --glass-fallback: #FFFFFF; --line-gold: rgba(168,132,47,0.34); --line-gold-soft: rgba(168,132,47,0.18); --hairline: rgba(2,48,64,0.12); --focus-ring: rgba(168,132,47,0.6); --overlay: rgba(2,31,42,0.45); --shadow-sm: 0 1px 2px rgba(2,31,42,0.10); --shadow-md: 0 10px 30px -10px rgba(2,31,42,0.18); --shadow-lg: 0 26px 60px -20px rgba(2,31,42,0.22); --shadow-gold: 0 12px 40px -14px rgba(176,138,52,0.35); --header-bg: rgba(251,248,241,0.78); } /* ============================================================================ 5. TIPOGRAFIA Display/eyebrow/números → CINZEL (caixa alta, tracking amplo) Corpo / UI → Montserrat Escala fluida (clamp) — mobile-first, sobe suave até desktop. ============================================================================ */ :root { --font-display: 'Cinzel', 'Times New Roman', serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala tipográfica (fluida) */ --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem); --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --fs-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.94rem); --fs-base: clamp(0.98rem, 0.93rem + 0.28vw, 1.08rem); --fs-lg: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem); --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); --fs-2xl: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem); --fs-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem); --fs-4xl: clamp(2.8rem, 2.0rem + 3.8vw, 4.6rem); --fs-display: clamp(3.4rem, 2.2rem + 5.6vw, 6.5rem); /* números de autoridade */ /* Alturas de linha */ --lh-tight: 1.08; --lh-snug: 1.28; --lh-normal: 1.62; /* Tracking (Cinzel pede espaçamento amplo em caixa alta) */ --track-eyebrow: 0.34em; --track-display: 0.06em; --track-heading: 0.03em; --track-body: 0.005em; /* Pesos */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; } /* ============================================================================ 6. ESPAÇO · FORMA · MOTION ============================================================================ */ :root { /* Escala de espaço (base 4px) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-12: 7rem; --sp-16: 10rem; /* Larguras de leitura / container */ --container: 1200px; --container-narrow: 780px; --measure: 64ch; /* Raios */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* cards glass (canônico) */ --r-xl: 24px; --r-pill: 999px; /* Bordas */ --bw: 1px; /* linhas/divisores finos */ /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-med: 340ms; --dur-slow: 620ms; /* Camadas (z-index) */ --z-base: 1; --z-pattern: 0; --z-header: 100; --z-overlay: 200; --z-modal: 300; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-med: 1ms; --dur-slow: 1ms; } }