/* ====================================================================== DESIGN TOKENS -- Fogo & Vinho Deriva de DIRECAO_DE_ARTE.md Conceito: "Um carvao que arde por dentro -- escuridao texturizada com fendas de brasa dourada." Arquetipo: Editorial ====================================================================== */ :root { /* --- CORES --- */ /* Marca -- paleta derivada do mundo fisico do evento: verde de adega, dourado de por do sol, laranja de brasa, cobre de heraldica */ --color-primary: #CBA884; /* Dourado evento -- titulos, logo, linhas decorativas */ --color-primary-hover: #B8956F; /* Dourado escurecido para hover/pressed */ --color-primary-light: rgba(203, 168, 132, 0.15); /* Dourado sobre fundo escuro, glow sutil */ --color-secondary: #0A281B; /* Verde profundo -- identidade Don Laurindo, fundo dominante */ --color-secondary-hover: #0D3322; /* Verde um passo mais claro para hover */ --color-accent: #E4815D; /* Laranja brasa -- CTAs, badges, o ponto mais quente */ --color-accent-hover: #D2894A; /* Cobre -- transicao de hover do CTA (laranja -> cobre) */ /* Superficies -- verde escuro dominante, profundidade por variacao tonal */ --color-bg: #0A281B; /* Fundo principal (reforco da textura fundo.jpg) */ --color-surface: #1A4A35; /* Cards, secoes elevadas -- verde um tom acima */ --color-surface-2: #133A2A; /* Variacao intermediaria entre bg e surface */ --color-overlay: #061A11; /* Overlays sobre fotos, header no scroll, sombra profunda */ --color-header-scrolled: rgba(6, 26, 17, 0.92); /* Header solido ao rolar */ --color-overlay-photo: rgba(6, 26, 17, 0.75); /* Overlay sobre fotos (CTA intermediario) */ --color-surface-alpha: rgba(26, 74, 53, 0.6); /* Surface semi-transparente (cards destaques) */ --color-border: rgba(203, 168, 132, 0.2); /* Bordas sutis -- dourado com baixa opacidade */ --color-border-strong: #D2894A; /* Bordas de tabela, separadores visiveis -- cobre marca */ /* Texto */ --color-text: #F2EBE0; /* Off-white quente, pergaminho -- corpo sobre fundo escuro */ --color-text-muted: rgba(242, 235, 224, 0.6); /* Texto secundario, legendas */ --color-text-heading: #EF7953; /* Titulos display -- laranja evento */ --color-text-inverse: #0A281B; /* Texto sobre fundos claros (CTA laranja) */ /* Feedback -- ajustados a paleta quente, nao padrao neon */ --color-success: #4A8C6A; --color-success-bg: rgba(74, 140, 106, 0.15); --color-warning: #D2894A; --color-warning-bg: rgba(210, 137, 74, 0.15); --color-error: #C75D4A; --color-error-bg: rgba(199, 93, 74, 0.15); --color-info: #6A8CA8; --color-info-bg: rgba(106, 140, 168, 0.15); /* --- TIPOGRAFIA --- */ /* Familias -- definidas pela direcao de arte, fontes locais do cliente */ --font-heading: 'BentonModDisp', Georgia, 'Times New Roman', serif; --font-body: 'SF Pro Display', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-decorative: 'Ralinea', cursive; /* USO RESTRITO: apenas eyebrow do hero + separadores */ /* Escala fluida -- Editorial com contraste dramatico Hero monumental, titulos de secao grandes, corpo generoso para leitura sobre fundo escuro. Nada timido. */ --text-xs: clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem); /* 11-12px */ --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); /* 12-13px */ --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18px */ --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem); /* 18-20px */ --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20-24px */ --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 24-30px */ --text-3xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); /* 28-40px */ --text-4xl: clamp(2.25rem, 1.7rem + 2.75vw, 3.25rem); /* 36-52px */ --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.25rem); /* 44-68px */ --text-6xl: clamp(3rem, 2rem + 5vw, 5.5rem); /* 48-88px -- titulos de secao dramaticos */ --text-hero: clamp(3.5rem, 1.5rem + 10vw, 9rem); /* 56-144px -- logo/hero monumental */ /* Pesos -- mapeados aos arquivos OTF disponiveis */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 800; --font-ultra: 900; /* BentonModDisp Ultra -- hero e titulos de secao */ /* Alturas de linha -- editorial: display apertado, corpo generoso */ --leading-none: 1; --leading-display: 1.05; /* Titulos BentonModDisp -- dramatico, apertado */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.7; /* Corpo sobre fundo escuro -- generoso, legivel */ --leading-loose: 2; /* Tracking -- editorial: titulos apertados, labels abertos */ --tracking-tighter: -0.035em; /* Titulos BentonModDisp grandes (as serifas ja criam ritmo) */ --tracking-tight: -0.02em; /* Titulos menores */ --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* Eyebrows, labels uppercase SF Pro */ --tracking-eyebrow: 0.15em; /* Alias semantico para eyebrows */ /* --- ESPACAMENTOS --- */ --space-px: 1px; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; --space-40: 10rem; /* Secoes -- editorial: ritmo generoso com alternancia denso/arejado */ --section-padding-y: clamp(5rem, 12vw, 10rem); /* Padrao arejado */ --section-padding-y-dense: clamp(3rem, 6vw, 5rem); /* Secoes densas (destaques, open wine) */ --section-padding-y-hero: 0; /* Hero e fullscreen, sem padding generico */ --section-padding-x: clamp(1.25rem, 5vw, 2.5rem); /* Lateral responsiva */ /* --- BORDAS --- */ /* Border-radius: 0 em TUDO. Cantos retos. Pedra, madeira, ferro. */ --radius-none: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --radius-full: 0; --border-thin: 1px solid var(--color-border); --border-medium: 2px solid var(--color-border); --border-accent: 1px solid var(--color-border-strong); /* --- SOMBRAS --- */ /* Sombras minimas -- a direcao pede elevacao por cor de fundo, nao box-shadow. Mantidas apenas para uso pontual (header, overlay). */ --shadow-none: none; --shadow-sm: 0 2px 8px rgba(6, 26, 17, 0.3); --shadow-md: 0 4px 16px rgba(6, 26, 17, 0.4); --shadow-lg: 0 8px 32px rgba(6, 26, 17, 0.5); --shadow-glow: 0 0 40px rgba(203, 168, 132, 0.15); /* Glow dourado sutil -- brasa */ /* --- TRANSICOES / MOTION --- */ /* Easings */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Reveals suaves -- titulos, cards */ --ease-power3: cubic-bezier(0.22, 1, 0.36, 1); /* GSAP power3.out equivalente */ --ease-signature: cubic-bezier(0.83, 0, 0.17, 1); /* Momento-assinatura: reveal do logo como brasa */ /* Duracoes */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --duration-reveal: 1100ms; /* Reveals de scroll (titulos, cards) */ --duration-hero: 1800ms; /* Momento-assinatura do hero (1.8s conforme direcao) */ /* Transicoes compostas */ --transition-fast: var(--duration-fast) var(--ease-in-out); --transition-base: var(--duration-base) var(--ease-in-out); --transition-slow: var(--duration-slow) var(--ease-expo); --transition-hover: var(--duration-base) var(--ease-out); /* Hovers de botao e link */ --transition-header: 400ms var(--ease-in-out); /* Header: transparent -> solido */ /* Parallax */ --parallax-offset: 5%; /* Fotos sangradas: translate -5% a 5% no eixo Y */ /* --- LAYOUT --- */ --container-max: 1200px; /* Max-width do conteudo (direcao: 1200px) */ --container-wide: 1440px; /* Margem externa para secoes largas */ --grid-columns: 12; /* Grid editorial de 12 colunas */ --grid-gap: clamp(1rem, 2vw, 2rem); /* Z-index */ --z-hide: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-nav: 80; --z-tooltip: 90; --z-max: 999; }