/* ============================================================ ANAVRIN — Brand System ============================================================ Arquivo central de identidade visual. Altere APENAS este arquivo para mudar cores, tipografia, espaçamentos e tokens visuais de todo o site. ============================================================ */ /* ── 1. TIPOGRAFIA ────────────────────────────────────────── */ /* Fontes carregadas via Google Fonts no de cada página: - Display / Títulos: Playfair Display (serif) - Corpo / UI: Hanken Grotesk (sans-serif) Para trocar, altere os @import no HTML e as variáveis abaixo. */ :root { /* Font Families */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; /* Font Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Font Sizes — escala modular (ratio ~1.25) */ --fs-xs: 0.65rem; /* 10.4px – labels, badges */ --fs-sm: 0.75rem; /* 12px – meta, captions */ --fs-base: 0.85rem; /* 13.6px – corpo */ --fs-md: 0.95rem; /* 15.2px – corpo destaque */ --fs-lg: 1.15rem; /* 18.4px – subtítulos */ --fs-xl: 1.4rem; /* 22.4px – títulos seção */ --fs-2xl: 1.8rem; /* 28.8px – títulos card */ --fs-3xl: 2.4rem; /* 38.4px – títulos grandes */ --fs-4xl: 3.2rem; /* 51.2px – display */ --fs-hero: clamp(3rem, 8vw, 6.5rem); /* hero responsivo */ /* Line Heights */ --lh-tight: 1.2; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Letter Spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 2px; --ls-wider: 3px; --ls-widest: 5px; --ls-ultra: 6px; --ls-logo: 6px; /* ── 2. CORES ─────────────────────────────────────────── */ /* Paleta: Rich Black #0D1B2A · Oxford Blue #1B263B · YInMn #415A77 · Silver Lake #778DA9 · Platinum #E5E7E6 */ /* Backgrounds — Rich Black + Oxford Blue */ --bg-primary: #0D1B2A; --bg-secondary: #1B263B; --bg-card: #1f2d42; --bg-card-hover: #24354d; /* Blues — paleta principal */ --blue-deep: #1B263B; --blue-accent: #2c3e56; --blue-mid: #415A77; --blue-light: #778DA9; --blue-glow: #95a7bd; --blue-pale: #c4ced9; --cyan: #778DA9; /* Texto — Platinum + Silver Lake */ --text-primary: #E5E7E6; --text-secondary: #778DA9; --text-muted: #4f6680; /* Glass / Overlays */ --glass-bg: rgba(13, 27, 42, 0.65); --glass-border: rgba(119, 141, 169, 0.15); --glass-border-hover: rgba(119, 141, 169, 0.35); /* Aliases semânticos — use estes nos componentes */ --accent: var(--blue-light); --accent-glow: var(--blue-glow); --accent-strong: var(--blue-mid); --accent-subtle: var(--blue-accent); /* ── 3. ESPAÇAMENTOS ──────────────────────────────────── */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 60px; --space-4xl: 80px; --space-5xl: 120px; /* ── 4. BORDAS & RAIOS ────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 50%; /* ── 5. SOMBRAS ───────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 24px rgba(119, 141, 169, 0.1); --shadow-lg: 0 8px 36px rgba(119, 141, 169, 0.18); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glow: 0 4px 24px rgba(119, 141, 169, 0.2); --shadow-glow-strong: 0 6px 36px rgba(119, 141, 169, 0.35); /* ── 6. TRANSIÇÕES ────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.3s; --duration-mid: 0.5s; --duration-slow: 0.8s; /* ── 7. GRADIENTES REUTILIZÁVEIS ──────────────────────── */ --gradient-accent: linear-gradient(135deg, var(--blue-mid), var(--blue-light)); --gradient-hero: linear-gradient(180deg, rgba(13,27,42,0.7) 0%, rgba(13,27,42,0.5) 40%, rgba(13,27,42,0.9) 100%); --gradient-section-a: radial-gradient(ellipse at 80% 50%, rgba(27,38,59,0.5) 0%, transparent 50%); --gradient-section-b: radial-gradient(ellipse at 20% 30%, rgba(65,90,119,0.08) 0%, transparent 50%); --gradient-divider: linear-gradient(90deg, var(--blue-light), transparent); --gradient-glow: radial-gradient(ellipse at 50% 60%, rgba(65,90,119,0.15) 0%, transparent 60%); --gradient-line: linear-gradient(90deg, transparent, var(--blue-light), transparent); --gradient-line-faint:linear-gradient(90deg, transparent, rgba(119,141,169,0.2), transparent); /* ── 8. Z-INDEX SCALE ─────────────────────────────────── */ --z-base: 1; --z-content: 2; --z-overlay: 10; --z-navbar: 1000; --z-whatsapp: 999; --z-preloader: 9999; /* ── 9. LAYOUT ────────────────────────────────────────── */ --max-width: 1200px; --navbar-h: 70px; } /* ── RESET & BASE ─────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px } ::-webkit-scrollbar-track { background: var(--bg-primary) } ::-webkit-scrollbar-thumb { background: var(--blue-accent); border-radius: 3px } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none } }