/* ============================================================ DESIGN TOKENS — Mecano Soluções Digitais Fonte: Manual de marca v1 (2026). Fonte única da verdade para cor, tipografia, espaço e forma. style.css só usa estes tokens. MARCA — regras do manual que o código precisa respeitar - Logo do topo/rodapé: assets/marca/lockup-fundo-escuro.svg (horizontal com descritor; só sobre fundo grafite). - Largura mínima na tela: 140 px (horizontal com descritor); 96 px (horizontal curta, quando existir); símbolo 16 px. - Área de proteção x = metade da altura do símbolo, nos 4 lados. O símbolo ocupa ~87,5% da altura do lockup, então com --logo-h: 36px, x ≈ 16px = --logo-clear. Nada entra nessa área. - Solda (#FF5A1F) é a única cor de ação, ~8% da área. Como TEXTO, só sobre grafite; sobre papel usar solda-texto (#B93A0B). - Não distorcer, girar, recolorir, sombrear o logo. ============================================================ */ /* ============================================================ LIQUID METAL (N4/F15) — parametros de cor para o shader Porca cromada no hero da home. NAO e o logo (o manual proibe brilho/troca de cor no logo). Sem solda no metal. Mascara: assets/marca/porca-mascara.svg (hexagono com furo; preto = metal). Fallback: assets/marca/porca-cromada.webp (600x693; mesma caixa do canvas, .hero-nut, proporcao 600/693). LiquidMetal (@paper-design/shaders): colorBack #0E0D0B (grafite; o hero e grafite) colorTint #F4F2EC (papel; luz do metal) Tons do metal: grafite #0E0D0B -> #24221E -> #746F65 -> aco #A29C90 -> papel #F4F2EC (alto brilho). Faixas alternadas escuro/claro como o fallback. Realce especular: #FFFDF8 (so ponto pequeno, nunca area). Sugestao inicial (ajustar a olho contra o fallback): speed 0.25-0.4; repetition 3-4; softness 0.4; shiftRed/Blue 0 (sem aberracao colorida: nada de laranja/azul no metal); distortion ~0.1; contour ~0.4; scale 1; fit "contain". Fundo do canvas transparente (o hero ja e grafite). ============================================================ */ :root { /* --- Cor: paleta da marca ------------------------------------ */ --color-grafite: #0E0D0B; --color-papel: #F4F2EC; --color-aco: #A29C90; --color-solda: #FF5A1F; --color-solda-texto: #B93A0B; /* solda legível como texto sobre papel (AA) */ /* Apoio do manual (superfícies, linhas, texto secundário) */ --color-panel: #FBFAF6; /* cards sobre papel */ --color-muted: #6B655B; /* texto secundário sobre papel */ --color-line: #E2DDD2; /* bordas sobre papel */ --color-panel-dark: #181613; /* cards sobre grafite */ --color-line-dark: #2C2924; /* bordas sobre grafite */ /* --- Cor: papéis semânticos ---------------------------------- */ --color-primary: var(--color-grafite); --color-accent: var(--color-solda); --color-bg-dark: var(--color-grafite); --color-bg-light: var(--color-papel); --color-support-1: var(--color-muted); --color-support-2: var(--color-line); --color-surface: var(--color-panel); --color-surface-dark: var(--color-panel-dark); --color-border-dark: var(--color-line-dark); --color-text: var(--color-grafite); --color-text-muted: var(--color-muted); --color-text-inverse: var(--color-papel); --color-text-inverse-muted: var(--color-aco); /* Solda como texto/ícone/foco: papel -> solda-texto; grafite -> solda. Seções escuras redefinem em style.css. */ --accent-ink: var(--color-solda-texto); --color-accent-hover: #E64D15; /* solda -10% (botão sobre papel) */ --color-accent-hover-inverse: #FF7A45; /* solda +10% (botão sobre grafite) */ --color-success: #176F46; --color-success-bg: #E8F5EE; --color-success-border: #B6E3CB; --color-error: #B3301D; --color-error-bg: #FBE9E6; --color-error-border: #F1BEB2; /* --- Tipografia (Manual v1) ----------------------------------- Archivo Expanded 800 nos títulos e na marca; Archivo normal no texto; JetBrains Mono 500 nos rótulos. Razão modular ~1.25. */ --font-display: "Archivo", "Arial Black", "Arial", sans-serif; --font-body: "Archivo", -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace; --stretch-display: 125%; /* Expanded */ --weight-display: 800; --weight-mono: 500; --fs-small: 1rem; /* 16px */ --fs-body: 1.125rem; /* 18px */ --fs-h4: 1.25rem; /* 20px */ --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); /* 20-26px */ --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* 24-36px */ --fs-h1: clamp(1.75rem, 1.3rem + 2.4vw, 3rem); /* 28-48px */ --fs-display: clamp(2rem, 1.2rem + 3.8vw, 3.75rem); /* 32-60px */ --lh-heading: 1.08; --lh-body: 1.6; --ls-heading: -0.03em; /* --- Espaço (múltiplos de 4/8px) --- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ /* --- Logo ---------------------------------------------------- */ --logo-h: 36px; /* lockup 260x64 -> 146px de largura (>= 140) */ --logo-clear: 1rem; /* área de proteção x ≈ 16px */ /* --- Grid --- */ --container-max: 1200px; --gutter: var(--sp-5); /* 24px mobile */ /* --- Forma --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(14, 13, 11, 0.06); --shadow-md: 0 8px 24px rgba(14, 13, 11, 0.08); /* --- Movimento --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 260ms; --dur-enter: 420ms; } @media (min-width: 768px) { :root { --gutter: var(--sp-6); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-enter: 0ms; } }