→ tokens dark aplicados na seção → página inteiramente dark ===================================================== */ /* ===================================================== PRIMITIVOS — NÃO usar diretamente nos componentes ===================================================== */ :root { /* --- Brand Navy (escala derivada do #102774, hue 224) --- */ --brand-50: #EEF1F9; /* lavagens muito sutis, pílulas */ --brand-100: #DCE2F2; /* borders accent, fills suaves */ --brand-200: #B7C3E5; --brand-300: #8895CC; --brand-400: #5466AE; --brand-500: #2A4090; --brand-600: #1A337E; /* hover state mais leve do CTA */ --brand-700: #102774; /* CTA principal — navy do briefing */ --brand-800: #0C1E5C; /* CTA pressed */ --brand-900: #081444; --brand-950: #050C2C; /* --- Ink (escala derivada do #243448, azul-petróleo) --- */ --ink-50: #F4F6F8; --ink-100: #E5E9EE; --ink-200: #C7CFD9; --ink-300: #94A1B2; --ink-400: #5E6E84; --ink-500: #3F5067; --ink-600: #2F405A; --ink-700: #243448; /* azul-petróleo do briefing — texto e dark surface */ --ink-800: #1A2738; --ink-900: #121C2A; --ink-950: #0A111B; /* --- Linen (off-whites e neutros claros) --- */ --linen-50: #FFFFFF; --linen-100: #FAFAFA; /* off-white do briefing — bg light */ --linen-200: #F4F4F5; --linen-300: #E8E9EB; --linen-400: #D4D6DA; /* --- Sand (suporte cálido — neutro com leve oliva) --- Usado em backgrounds alternados de seção, evitando o visual frio-clínico extremo. Harmoniza com navy + petróleo. */ --sand-50: #FBF9F4; --sand-100: #F5F1E8; /* --- Estados semânticos (calibrados ao tom institucional) --- */ --moss-50: #EFF5EC; --moss-500: #4F7C42; /* success — verde musgo, não neon */ --moss-600: #406935; --moss-700: #335429; --amber-50: #FBF3E5; --amber-500: #B07410; /* warning — âmbar mel, sóbrio */ --amber-600: #8E5D0D; --amber-700: #6E4709; --brick-50: #F8ECEA; --brick-500: #B33B2D; /* danger — vermelho tijolo, não vermelho-vivo */ --brick-600: #962F23; --brick-700: #75241A; --steel-50: #EAF1F7; --steel-500: #2D5984; /* info — azul-aço, distinto do navy do CTA */ --steel-600: #234868; --steel-700: #1A374F; /* --- Hot accent: dourado discreto (uso pontual: estrelas, selos) NÃO é cor de marca — apenas para indicadores de "premium" / avaliação. Calibrado mais opaco que o ouro Tailwind para parecer bronze, não bling. */ --gold-500: #B8893E; } /* ===================================================== TOKENS SEMÂNTICOS — Light (padrão) ===================================================== */ :root, [data-theme="light"] { color-scheme: light; /* --- Superfícies --- */ --bg-base: #FAFAFA; /* linen-100 */ --bg-surface: #FFFFFF; --bg-surface-raised: #F4F4F5; /* linen-200 */ --bg-surface-overlay: #E8E9EB; /* linen-300 */ --bg-surface-warm: #FBF9F4; /* sand-50 — alternativa cálida */ --bg-hover: rgba(36,52,72,0.05); --bg-active: rgba(16,39,116,0.06); --bg-input: #FFFFFF; --bg-disabled: rgba(36,52,72,0.04); /* --- Texto --- Primary é petróleo #243448 (não preto puro) — mais elegante e em harmonia com a paleta. */ --text-primary: #243448; --text-secondary: rgba(36,52,72,0.72); --text-muted: rgba(36,52,72,0.52); --text-disabled: rgba(36,52,72,0.30); --text-inverted: #FAFAFA; --text-accent: #102774; /* navy — links, destaques */ --text-accent-hover: #1A337E; /* --- Bordas --- */ --border-default: rgba(36,52,72,0.14); --border-subtle: rgba(36,52,72,0.08); --border-strong: rgba(36,52,72,0.24); --border-focus: #102774; --border-accent: rgba(16,39,116,0.32); --border-error: rgba(179,59,45,0.45); --border-success: rgba(79,124,66,0.40); /* --- Acento (CTA) --- */ --accent-base: #102774; /* navy */ --accent-hover: #1A337E; /* brand-600 */ --accent-pressed: #0C1E5C; /* brand-800 */ --accent-muted: rgba(16,39,116,0.08); --accent-text: #FAFAFA; --accent-shadow: 0 6px 20px rgba(16,39,116,0.22); --accent-shadow-hover: 0 10px 32px rgba(16,39,116,0.32); /* --- Estados semânticos --- */ --success-bg: rgba(79,124,66,0.10); --success-border: rgba(79,124,66,0.32); --success-text: #335429; --warning-bg: rgba(176,116,16,0.10); --warning-border: rgba(176,116,16,0.32); --warning-text: #6E4709; --danger-bg: rgba(179,59,45,0.09); --danger-border: rgba(179,59,45,0.32); --danger-text: #962F23; --info-bg: rgba(45,89,132,0.09); --info-border: rgba(45,89,132,0.30); --info-text: #234868; /* --- Shadows (single-layer, sóbrias — sem glow místico) --- */ --shadow-sm: 0 1px 3px rgba(18,28,42,0.06); --shadow-md: 0 4px 14px rgba(18,28,42,0.08); --shadow-lg: 0 12px 32px rgba(18,28,42,0.12); --shadow-card: 0 2px 10px rgba(18,28,42,0.06), 0 0 0 1px rgba(36,52,72,0.05); --shadow-cta: var(--accent-shadow); /* --- Navbar (único elemento com backdrop-filter) --- */ --navbar-bg: rgba(250,250,250,0.88); /* --- Gradientes (máx. 2 stops, uso pontual) --- */ --gradient-brand: linear-gradient(135deg, #102774 0%, #1A337E 100%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); --gradient-overlay-top: linear-gradient(to bottom, var(--bg-base) 0%, transparent 100%); --gradient-overlay-bottom: linear-gradient(to top, var(--bg-base) 0%, transparent 100%); --gradient-divider: linear-gradient(to right, transparent, var(--border-default), transparent); /* Hero subtle radial — sutil, sem ser "místico" */ --gradient-hero: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(16,39,116,0.08) 0%, transparent 70%); --gradient-card-highlight: linear-gradient(135deg, rgba(16,39,116,0.06) 0%, rgba(16,39,116,0.01) 100%); } /* ===================================================== TOKENS SEMÂNTICOS — Dark (por seção ou body) Filosofia: dark mode AQUI representa "sala de consulta noturna" — sóbrio, recolhido, estudo silencioso. Não é "tech sci-fi". Usa o azul-petróleo como base, off-white para texto. ===================================================== */ [data-theme="dark"] { color-scheme: dark; /* --- Superfícies (base = ink-700 #243448 do briefing) --- */ --bg-base: #243448; /* azul-petróleo do briefing */ --bg-surface: #2F405A; /* ink-600 */ --bg-surface-raised: #3A4C68; --bg-surface-overlay: #455976; --bg-surface-warm: #2A3B53; /* alternativa quente discreta */ --bg-hover: rgba(250,250,250,0.06); --bg-active: rgba(173,189,229,0.10); --bg-input: #1A2738; /* ink-800 — input mais fundo que surface */ --bg-disabled: rgba(250,250,250,0.04); /* --- Texto --- No dark, primary é off-white. Accent vira tom mais claro do navy para garantir contraste. */ --text-primary: #FAFAFA; --text-secondary: rgba(250,250,250,0.72); --text-muted: rgba(250,250,250,0.50); --text-disabled: rgba(250,250,250,0.30); --text-inverted: #243448; --text-accent: #B7C3E5; /* brand-200 — leitura clara sobre petróleo */ --text-accent-hover: #DCE2F2; /* --- Bordas --- */ --border-default: rgba(250,250,250,0.12); --border-subtle: rgba(250,250,250,0.07); --border-strong: rgba(250,250,250,0.22); --border-focus: #B7C3E5; --border-accent: rgba(183,195,229,0.40); --border-error: rgba(220,128,118,0.50); --border-success: rgba(160,200,140,0.36); /* --- Acento (CTA no dark) CTA continua sólido, com leve ajuste para legibilidade. Mantemos o navy mas com hover mais luminoso. */ --accent-base: #2A4090; /* brand-500 — mais luminoso que o navy para destacar do petróleo */ --accent-hover: #5466AE; /* brand-400 */ --accent-pressed: #1A337E; --accent-muted: rgba(120,140,200,0.16); --accent-text: #FAFAFA; --accent-shadow: 0 6px 20px rgba(42,64,144,0.40); --accent-shadow-hover: 0 10px 32px rgba(84,102,174,0.52); /* --- Estados semânticos (versões claras dos primitivos) --- */ --success-bg: rgba(160,200,140,0.12); --success-border: rgba(160,200,140,0.32); --success-text: #BFD4AE; --warning-bg: rgba(220,180,90,0.12); --warning-border: rgba(220,180,90,0.32); --warning-text: #E5C887; --danger-bg: rgba(220,128,118,0.12); --danger-border: rgba(220,128,118,0.32); --danger-text: #E0A29A; --info-bg: rgba(140,180,220,0.10); --info-border: rgba(140,180,220,0.30); --info-text: #B0CDE8; /* --- Shadows --- */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.40); --shadow-lg: 0 12px 32px rgba(0,0,0,0.50); --shadow-card: 0 2px 12px rgba(0,0,0,0.32), 0 0 0 1px rgba(250,250,250,0.06); --shadow-cta: var(--accent-shadow); /* --- Navbar --- */ --navbar-bg: rgba(36,52,72,0.86); /* --- Gradientes --- */ --gradient-brand: linear-gradient(135deg, #2A4090 0%, #5466AE 100%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); --gradient-overlay-top: linear-gradient(to bottom, var(--bg-base) 0%, transparent 100%); --gradient-overlay-bottom: linear-gradient(to top, var(--bg-base) 0%, transparent 100%); --gradient-divider: linear-gradient(to right, transparent, var(--border-default), transparent); --gradient-hero: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(120,140,200,0.12) 0%, transparent 70%); --gradient-card-highlight: linear-gradient(135deg, rgba(120,140,200,0.08) 0%, rgba(120,140,200,0.01) 100%); } /* ===================================================== FOCUS / OUTLINE ===================================================== */ :root { --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--border-strong); --focus-ring-accent: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-base); } /* ===================================================== TOKENS — Componentes Especiais ===================================================== */ :root { /* Announcement Bar */ --announcement-bg: var(--accent-base); --announcement-text: #FAFAFA; --announcement-height: 44px; /* Sticky CTA Bar */ --sticky-cta-bg: var(--bg-surface); --sticky-cta-border-top: 1px solid var(--border-default); --sticky-cta-height: 72px; /* Progress steps */ --step-size: 36px; --step-size-sm: 28px; --step-connector-h: 2px; /* Video play button */ --play-btn-size: 72px; --play-btn-bg: rgba(255,255,255,0.95); --play-btn-icon: var(--accent-base); --play-btn-shadow: 0 8px 32px rgba(18,28,42,0.30); /* Toast / Live Proof */ --toast-max-width: 320px; --toast-padding: var(--space-4); --toast-radius: var(--radius-xl); /* Star rating (gold discreto, não bling) */ --star-color: var(--gold-500); } /* ===================================================== TIPOGRAFIA Heading: Fraunces — serif moderna, leve contraste óptico transmite "livro técnico", "professor", "tradição clínica" sem ser dramática. Uso restrito a headlines/h1-h3 e citações. Body: Inter — sans humanista, máxima legibilidade em pt-BR. Uso em todo conteúdo corrido, UI, formulários, botões. Mono: JetBrains Mono — apenas para tokens, código, dados. ===================================================== */ :root { --font-heading: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace; /* Display — clamp(mobile, fluid, desktop) */ --text-display-xl: clamp(2.75rem, 7.5vw, 5.5rem); /* 44–88px */ --text-display-lg: clamp(2.25rem, 5.8vw, 4.25rem); /* 36–68px */ --text-display-md: clamp(1.875rem, 4.6vw, 3rem); /* 30–48px */ --text-display-sm: clamp(1.625rem, 3.6vw, 2.25rem); /* 26–36px */ /* Conteúdo */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ /* Line-heights */ --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Letter-spacing Fraunces (serif) usa tracking levemente positivo no display para respirar — diferente do padrão "tracking-tight" sans. */ --tracking-display: -0.020em; --tracking-heading: -0.010em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.10em; /* Pesos (Fraunces vai 100–900, mas usamos 400/600/700 no display) */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; } /* ===================================================== ESPAÇAMENTO (grid 4px) ===================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Section spacing — generosos, dão "ar" institucional */ --section-xs: clamp(2rem, 5vw, 3rem); /* 32–48px */ --section-sm: clamp(3rem, 6vw, 4.5rem); /* 48–72px */ --section-md: clamp(4rem, 8vw, 6rem); /* 64–96px */ --section-lg: clamp(5rem, 10vw, 8rem); /* 80–128px */ --section-xl: clamp(6rem, 12vw, 10rem); /* 96–160px */ /* Container */ --container-max: 1200px; --container-narrow: 720px; /* leitura confortável: artigos, FAQ */ --container-padding: clamp(1rem, 5vw, 2rem); } /* ===================================================== RAIOS DE BORDA Mais discretos que o template padrão — institucional evita formas excessivamente arredondadas (cara "fintech"). ===================================================== */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-3xl: 22px; --radius-full: 9999px; } /* ===================================================== ICONOGRAFIA ===================================================== */ :root { --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; } /* ===================================================== ANIMAÇÕES — Tokens ===================================================== */ :root { /* Duração */ --duration-xfast: 75ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-hero: 800ms; /* Delay (para stagger) */ --delay-1: 100ms; --delay-2: 200ms; --delay-3: 300ms; --delay-4: 400ms; --delay-5: 500ms; --delay-6: 600ms; /* Easing */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* Transition shorthands */ --transition-colors: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); --transition-transform: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); --transition-opacity: opacity var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-default); } /* ===================================================== Z-INDEX ===================================================== */ :root { --z-base: 0; --z-raised: 10; --z-navbar: 50; --z-dropdown: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ===================================================== RESET MÍNIMO + BASE ===================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Seções com data-theme herdam o fundo automaticamente */ [data-theme] { background-color: var(--bg-base); color: var(--text-primary); } /* Headings sempre Fraunces */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); color: var(--text-primary); } h1 { letter-spacing: var(--tracking-display); } /* h5, h6 voltam a sans (UI, não display) */ h5, h6 { font-family: var(--font-body); font-weight: 600; letter-spacing: var(--tracking-tight); } /* Container padrão */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--container-padding); } /* ===================================================== ICONOGRAFIA — utilitários ===================================================== */ .icon-inline { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; } .icon-container { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent-muted); color: var(--text-accent); flex-shrink: 0; } .icon-container--sm { width: 36px; height: 36px; border-radius: var(--radius-md); } .icon-container--lg { width: 64px; height: 64px; border-radius: var(--radius-xl); } /* ===================================================== UTILITÁRIOS DE ESPAÇAMENTO Formato: .{prop}{dir}-{escala} prop: m = margin | p = padding dir: t = top | b = bottom | l = left | r = right x = horizontal | y = vertical | (vazio) = todos ===================================================== */ /* --- Margin top --- */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mt-20 { margin-top: var(--space-20); } .mt-auto { margin-top: auto; } /* --- Margin bottom --- */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .mb-12 { margin-bottom: var(--space-12); } .mb-16 { margin-bottom: var(--space-16); } .mb-20 { margin-bottom: var(--space-20); } .mb-auto { margin-bottom: auto; } /* --- Margin horizontal --- */ .mx-0 { margin-left: 0; margin-right: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } /* --- Margin vertical --- */ .my-0 { margin-top: 0; margin-bottom: 0; } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } /* --- Padding top --- */ .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--space-1); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); } .pt-6 { padding-top: var(--space-6); } .pt-8 { padding-top: var(--space-8); } .pt-10 { padding-top: var(--space-10); } .pt-12 { padding-top: var(--space-12); } .pt-16 { padding-top: var(--space-16); } .pt-20 { padding-top: var(--space-20); } /* --- Padding bottom --- */ .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--space-1); } .pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); } .pb-6 { padding-bottom: var(--space-6); } .pb-8 { padding-bottom: var(--space-8); } .pb-10 { padding-bottom: var(--space-10); } .pb-12 { padding-bottom: var(--space-12); } .pb-16 { padding-bottom: var(--space-16); } .pb-20 { padding-bottom: var(--space-20); } /* --- Padding horizontal --- */ .px-0 { padding-left: 0; padding-right: 0; } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } /* --- Padding vertical --- */ .py-0 { padding-top: 0; padding-bottom: 0; } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } /* --- Padding all sides --- */ .p-0 { padding: 0; } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* --- Gap (flex/grid) --- */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } /* --- Section padding --- */ .section-py-xs { padding-top: var(--section-xs); padding-bottom: var(--section-xs); } .section-py-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); } .section-py-md { padding-top: var(--section-md); padding-bottom: var(--section-md); } .section-py-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); } .section-py-xl { padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .section-pt-xs { padding-top: var(--section-xs); } .section-pt-sm { padding-top: var(--section-sm); } .section-pt-md { padding-top: var(--section-md); } .section-pt-lg { padding-top: var(--section-lg); } .section-pt-xl { padding-top: var(--section-xl); } .section-pb-xs { padding-bottom: var(--section-xs); } .section-pb-sm { padding-bottom: var(--section-sm); } .section-pb-md { padding-bottom: var(--section-md); } .section-pb-lg { padding-bottom: var(--section-lg); } .section-pb-xl { padding-bottom: var(--section-xl); } /* --- Overrides responsivos (mobile-first) --- */ @media (max-width: 767px) { .section-py-lg { padding-top: var(--section-md); padding-bottom: var(--section-md); } .section-py-xl { padding-top: var(--section-lg); padding-bottom: var(--section-lg); } .sm\:mt-0 { margin-top: 0; } .sm\:mb-0 { margin-bottom: 0; } .sm\:pt-4 { padding-top: var(--space-4); } .sm\:pb-4 { padding-bottom: var(--space-4); } .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .sm\:gap-4 { gap: var(--space-4); } } /* ===================================================== KEYFRAMES ===================================================== */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-24px);} to { opacity: 1; transform: translateY(0); } } @keyframes slide-left { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-right { from { opacity: 0; transform: translateX(-28px);} to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes blur-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } @keyframes pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,39,116,0); } 50% { box-shadow: 0 0 0 8px rgba(16,39,116,0.18); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes skeleton-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ===================================================== ANIMAÇÕES DE ENTRADA — Scroll-triggered ===================================================== */ [data-animate] { opacity: 0; transition-duration: var(--duration-slower); transition-timing-function: var(--ease-out); transition-property: opacity, transform, filter; } [data-animate].is-visible { opacity: 1; transform: none; filter: none; } [data-animate="fade-up"] { transform: translateY(24px); } [data-animate="fade-down"] { transform: translateY(-24px); } [data-animate="slide-left"] { transform: translateX(28px); } [data-animate="slide-right"] { transform: translateX(-28px); } [data-animate="scale-in"] { transform: scale(0.94); } [data-animate="blur-in"] { filter: blur(6px); transform: translateY(10px); } [data-delay="1"] { transition-delay: var(--delay-1); } [data-delay="2"] { transition-delay: var(--delay-2); } [data-delay="3"] { transition-delay: var(--delay-3); } [data-delay="4"] { transition-delay: var(--delay-4); } [data-delay="5"] { transition-delay: var(--delay-5); } [data-delay="6"] { transition-delay: var(--delay-6); } [data-stagger] > *:nth-child(1) { transition-delay: 0ms; } [data-stagger] > *:nth-child(2) { transition-delay: var(--delay-1); } [data-stagger] > *:nth-child(3) { transition-delay: var(--delay-2); } [data-stagger] > *:nth-child(4) { transition-delay: var(--delay-3); } [data-stagger] > *:nth-child(5) { transition-delay: var(--delay-4); } [data-stagger] > *:nth-child(6) { transition-delay: var(--delay-5); } /* Hero sequence (CSS puro) */ .hero-sequence > * { opacity: 0; transform: translateY(18px); animation: slide-up var(--duration-slower) var(--ease-out) forwards; } .hero-sequence > *:nth-child(1) { animation-delay: 0ms; } .hero-sequence > *:nth-child(2) { animation-delay: 120ms; } .hero-sequence > *:nth-child(3) { animation-delay: 240ms; } .hero-sequence > *:nth-child(4) { animation-delay: 380ms; } .hero-sequence > *:nth-child(5) { animation-delay: 520ms; } .hero-sequence > *:nth-child(6) { animation-delay: 650ms; } /* ===================================================== MICRO-INTERAÇÕES ===================================================== */ .hover-lift { transition: var(--transition-transform); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .hover-scale { transition: transform var(--duration-base) var(--ease-out); } .hover-scale:hover { transform: scale(1.02); } .hover-glow { transition: box-shadow var(--duration-base) var(--ease-out); } .hover-glow:hover { box-shadow: var(--accent-shadow-hover); } .active-press:active { transform: translateY(1px); } .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring-accent); } /* ===================================================== ATENÇÃO / URGÊNCIA — uso parcimonioso ===================================================== */ .animate-pulse-soft { animation: pulse-soft 2.4s var(--ease-default) infinite; } .animate-float { animation: float 3.5s var(--ease-default) infinite; } .animate-spin { animation: spin 700ms linear infinite; } /* ===================================================== SKELETON LOADING ===================================================== */ .skeleton, .skeleton-text, .skeleton-avatar, .skeleton-card { background: var(--bg-surface-raised); position: relative; overflow: hidden; } .skeleton { border-radius: var(--radius-md); display: block; } .skeleton::after, .skeleton-text::after, .skeleton-avatar::after, .skeleton-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, var(--bg-surface-overlay) 50%, transparent 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .skeleton-text { height: 1em; border-radius: var(--radius-sm); margin-bottom: var(--space-2); } .skeleton-text--lg { height: 1.5em; } .skeleton-text--sm { height: 0.75em; } .skeleton-text--w-full { width: 100%; } .skeleton-text--w-3-4 { width: 75%; } .skeleton-text--w-1-2 { width: 50%; } .skeleton-avatar { border-radius: var(--radius-full); width: 44px; height: 44px; flex-shrink: 0; } .skeleton-avatar--lg { width: 64px; height: 64px; } .skeleton-card { border-radius: var(--radius-xl); height: 200px; } /* ===================================================== prefers-reduced-motion — Cirúrgico ===================================================== */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; filter: none; transition: none; } .hero-sequence > * { opacity: 1; transform: none; animation: none; } .animate-pulse-soft, .animate-float, .animate-spin, .skeleton::after, .skeleton-text::after, .skeleton-avatar::after, .skeleton-card::after { animation: none; } } /* ===================================================== SCROLLBAR — discreta, em harmonia ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-surface-raised); } ::-webkit-scrollbar-thumb { background: rgba(16,39,116,0.25); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(16,39,116,0.45); }