/* ============================================================ NEMIAS R. SANCHES — Advocacia Criminal Design Tokens — consumir VERBATIM em ambos os sites (advocacia-nrs.com.br + sanches.net.br) Derivado das peças oficiais do cliente. NÃO inventado. Eixo: templário — O DEFENSOR, não o mercador. Restrição: Provimento 205/2021 OAB — sobriedade = confiança. ============================================================ */ /* Fontes — importar no ou aqui: @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,500;1,400&display=swap'); */ :root { /* ---- Paleta: escala Navy (âncoras #0E1B33 / #14284D) ---- */ --navy-50: #EAEEF6; --navy-100: #C9D3E6; --navy-200: #9DB0D0; --navy-300: #6C84B0; --navy-400: #3E5488; --navy-500: #24396A; --navy-600: #1B2F58; --navy-700: #14284D; /* âncora — cards/blocos */ --navy-800: #0E1B33; /* âncora — fundo dominante */ --navy-900: #081020; /* ---- Paleta: escala Dourado (âncoras #C9A227 / #E3B872) ---- */ --gold-50: #FBF6E9; --gold-100: #F5E9C7; --gold-200: #EFD9A0; --gold-300: #E3B872; /* âncora — destaque/CTA */ --gold-400: #D7AC4E; --gold-500: #C9A227; /* âncora — detalhe/filete */ --gold-600: #A9861C; --gold-700: #856819; --gold-800: #614C15; --gold-900: #3F310F; /* ---- Neutros ---- */ --paper: #F7F5F0; --white: #FFFFFF; --muted-on-dark: #B7C0D2; --dim-on-dark: #7C89A6; /* ---- Semânticos ---- */ --bg-base: var(--navy-800); --bg-elevated: var(--navy-700); --bg-sunken: var(--navy-900); --surface-light: var(--paper); --border: var(--navy-600); --border-gold: rgba(227, 184, 114, 0.16); --text-primary: var(--white); --text-secondary: var(--muted-on-dark); --text-muted: var(--dim-on-dark); --text-on-light: var(--navy-800); --accent: var(--gold-500); --accent-strong: var(--gold-300); --accent-ink: var(--navy-800); --focus-ring: var(--gold-300); --success: #3E7D58; --danger: #9E3B33; /* ---- Tipografia: famílias ---- */ --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* ---- Tipografia: escala (base 16px) ---- */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 1.875rem; /* 30 */ --fs-3xl: 2.5rem; /* 40 */ --fs-4xl: 3.25rem; /* 52 */ --fs-5xl: 4.5rem; /* 72 */ --fs-6xl: 6rem; /* 96 */ /* Hero fluido pros dois sites */ --fs-hero: clamp(2.5rem, 7vw, 4.5rem); --fs-h2: clamp(1.875rem, 4vw, 2.5rem); /* ---- Tracking ---- */ --track-eyebrow: 0.18em; --track-display: 0.12em; --track-heading: 0.01em; --track-body: 0em; /* ---- Line-height ---- */ --lh-display: 1.05; --lh-heading: 1.15; --lh-snug: 1.3; --lh-body: 1.6; /* ---- Pesos ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Spacing (base 4px) ---- */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; --sp-48: 12rem; --section-y: clamp(4rem, 9vw, 8rem); --section-x: clamp(1.25rem, 5vw, 4rem); --container-max: 1200px; --container-prose: 68ch; --grid-gutter: clamp(1rem, 2.5vw, 2rem); /* ---- Radius (legal-premium: contido) ---- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---- Sombras (sobre navy) ---- */ --shadow-sm: 0 1px 2px rgba(8, 16, 32, 0.4); --shadow-md: 0 4px 16px rgba(8, 16, 32, 0.5); --shadow-lg: 0 12px 40px rgba(8, 16, 32, 0.6); --shadow-gold-glow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 8px 32px rgba(201, 162, 39, 0.18); --shadow-hairline-gold: inset 0 0 0 1px rgba(227, 184, 114, 0.14); /* ---- Gradientes (dourado só em filete/glow) ---- */ --grad-hero-scrim: linear-gradient(to top, rgba(8,16,32,0.92) 0%, rgba(14,27,51,0.55) 45%, rgba(14,27,51,0.15) 100%); --grad-bg-vignette: radial-gradient(120% 120% at 50% 0%, #14284D 0%, #0E1B33 55%, #081020 100%); --grad-gold-rule: linear-gradient(90deg, #C9A227 0%, #E3B872 100%); --grad-gold-glow: radial-gradient(closest-side, rgba(201,162,39,0.16), transparent); /* ---- Motion ---- */ --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 200ms; --dur-base: 500ms; --dur-slow: 800ms; } /* ============================================================ Primitivas de aplicação (opcionais — o build pode usar direto) ============================================================ */ body { background: var(--grad-bg-vignette); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } .eyebrow { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); } .hero-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--fw-black); letter-spacing: var(--track-display); line-height: var(--lh-display); text-transform: uppercase; color: var(--text-primary); } h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text-primary); } .quote { font-family: var(--font-editorial); font-size: var(--fs-2xl); font-style: italic; color: var(--accent-strong); line-height: var(--lh-snug); } .stat-number { font-family: var(--font-editorial); font-size: var(--fs-4xl); font-weight: var(--fw-medium); color: var(--accent-strong); line-height: 1; } /* Filete dourado — movimento-assinatura */ .filete { height: 1px; border: 0; background: var(--grad-gold-rule); width: 64px; } /* Card institucional — geometria de escudo, hairline dourado */ .card { background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-md), var(--shadow-hairline-gold); padding: var(--sp-8); } /* CTA primário — fundo dourado, tinta navy */ .btn-primary { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--track-heading); background: var(--accent-strong); color: var(--accent-ink); border: 0; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-6); transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn-primary:hover { box-shadow: var(--shadow-gold-glow); transform: translateY(-1px); } /* CTA secundário — outline dourado */ .btn-secondary { font-family: var(--font-display); font-weight: var(--fw-semibold); background: transparent; color: var(--text-primary); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-6); } /* Container + seção */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--section-x); } .section { padding-block: var(--section-y); } /* Acessibilidade — foco visível dourado */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Scroll reveal — fade + subida, gravidade */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance); } .reveal.is-visible { opacity: 1; transform: none; } /* Respeitar preferência de menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { transform: none; } }