/* ═══ 1. GLOBAIS (tokens, reset, tipografia) ═══ */ /* * Tokens da marca Boi Bandeira. * * Concatenado de _design/tokens/ (colors, typography, spacing, effects) sem * alterar um unico valor: o pacote esta aprovado e a paridade visual e o criterio. * * Duas diferencas em relacao ao original, ambas exigidas pela conversao: * - as familias tipograficas saem do next/font (--font-display, --font-body, * --font-script sao injetadas no pelo layout raiz), entao as * declaracoes de familia daqui foram removidas para nao sobrescrever a * fonte otimizada pela versao do Google Fonts; * - o @import de fonts.css saiu pelo mesmo motivo. */ :root { /* --- Marca: vermelho amostrado da logo Boi Bandeira (#C93931) --- */ --red-50: #fbeceb; --red-100: #f4cbc8; --red-200: #e79b95; --red-300: #db6a62; --red-400: #d44f45; --red-500: #c93931; /* cor da marca */ --red-600: #ab2b25; --red-700: #85211d; --red-800: #5c1614; --red-900: #380d0c; /* --- Neutros quentes (carvão / brasa apagada) --- */ --ink-900: #100e0d; --ink-800: #191614; --ink-700: #221e1b; --ink-600: #2e2825; --ink-500: #3d3733; --ink-400: #5a524d; --ink-300: #8a807a; --ink-200: #b6ada6; /* --- Claros (papel de açougue / osso) --- */ --bone-100: #ffffff; --bone-200: #f8f4ed; --bone-300: #efe8dc; --bone-400: #e0d6c5; --bone-500: #c9bda8; /* --- Acento: dourado de selo/carimbo --- */ --gold-400: #d9b45c; --gold-500: #c19a3d; --gold-600: #9a7a2c; /* --- Semânticos --- */ --success-500: #4f7a45; --warning-500: #c19a3d; --danger-500: #c93931; /* --- Terceiros --- */ /* Verde oficial do WhatsApp. Não é cor da identidade Boi Bandeira: fica aqui só para não sobrar hex solto em componente. */ --whatsapp-500: #1fa855; /* --- Aliases semânticos: superfícies --- */ --surface-page: var(--bone-200); --surface-card: var(--bone-100); --surface-muted: var(--bone-300); --surface-dark: var(--ink-800); --surface-dark-elevated: var(--ink-700); --surface-brand: var(--red-500); /* --- Aliases semânticos: texto --- */ --text-strong: var(--ink-900); --text-body: var(--ink-600); --text-muted: var(--ink-400); --text-on-dark: var(--bone-200); --text-on-dark-muted: var(--ink-200); --text-brand: var(--red-500); --text-on-brand: var(--bone-100); /* --- Aliases semânticos: bordas --- */ --border-subtle: var(--bone-400); --border-strong: var(--ink-500); --border-on-dark: rgba(248, 244, 237, 0.14); --border-brand: var(--red-500); } :root { /* Famílias vêm do next/font, no layout raiz. */ /* Escala tipográfica */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 21px; --text-2xl: 26px; --text-3xl: 33px; --text-4xl: 42px; --text-5xl: 54px; --text-6xl: 68px; --text-7xl: 86px; /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Entrelinha */ --leading-tight: 1.02; --leading-snug: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Espaçamento entre letras */ --tracking-display: 0.01em; --tracking-eyebrow: 0.22em; --tracking-button: 0.12em; --tracking-body: 0; /* Papéis prontos */ --type-hero: var(--weight-bold) var(--text-7xl) / var(--leading-tight) var(--font-display); --type-h1: var(--weight-bold) var(--text-5xl) / var(--leading-snug) var(--font-display); --type-h2: var(--weight-bold) var(--text-4xl) / var(--leading-snug) var(--font-display); --type-h3: var(--weight-semibold) var(--text-2xl) / var(--leading-snug) var(--font-display); --type-eyebrow: var(--weight-semibold) var(--text-xs) / var(--leading-normal) var(--font-body); --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-body); --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-relaxed) var(--font-body); --type-label: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-body); --type-button: var(--weight-bold) var(--text-sm) / 1 var(--font-body); --type-price: var(--weight-bold) var(--text-2xl) / 1 var(--font-display); } :root { /* Escala de espaçamento (base 4) */ --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; --space-32: 128px; /* Ritmo de página */ --section-padding-y: var(--space-24); --section-padding-y-sm: var(--space-16); --container-max: 1200px; --container-gutter: var(--space-6); --grid-gap: var(--space-6); } :root { /* Raios — cantos quase retos; a marca é açougue, não app fintech */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Sombras — quentes e discretas, nunca azuladas */ --shadow-sm: 0 1px 2px rgba(16, 14, 13, 0.08); --shadow-md: 0 6px 18px rgba(16, 14, 13, 0.10); --shadow-lg: 0 18px 44px rgba(16, 14, 13, 0.16); --shadow-brand: 0 10px 24px rgba(201, 57, 49, 0.28); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Bordas */ --border-width: 1px; --border-width-strong: 2px; --rule-accent: 3px solid var(--red-500); /* Véus sobre foto (proteção de legibilidade) */ --scrim-dark: linear-gradient(180deg, rgba(16, 14, 13, 0.15) 0%, rgba(16, 14, 13, 0.82) 100%); --scrim-side: linear-gradient(90deg, rgba(16, 14, 13, 0.92) 0%, rgba(16, 14, 13, 0.55) 55%, rgba(16, 14, 13, 0) 100%); --scrim-flat: rgba(16, 14, 13, 0.62); /* Movimento */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 220ms; --duration-slow: 420ms; /* Camadas */ --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* Animações de entrada — usadas no hero e em blocos de abertura. */ @keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bb-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes bb-fade-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } @keyframes bb-fade-stamp { from { opacity: 0; transform: rotate(-8deg) scale(.9); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } @media (prefers-reduced-motion: reduce) { [style*="bb-fade"] { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Reset — vinha do