/* ========================================================================== MARMORARIA NOVA ALIANÇA — Design Tokens Paleta extraída por amostragem da logo oficial (logo 1.jpeg). Nenhuma cor aqui foi inventada: todas saíram de uma análise k-means dos pixels da marca. Ver README.md. ========================================================================== */ :root { /* --------------------------------------------------------------------- SUPERFÍCIES ESCURAS — "noite" São 92% da logo. É a cor institucional da marca. Usadas em: topo, hero, faixas de chamada, rodapé. --------------------------------------------------------------------- */ --c-noite-900: #050604; /* 19,0% da logo — o preto mais profundo */ --c-noite-800: #0b0c09; /* 33,7% da logo — fundo principal */ --c-noite-700: #131412; /* 25,4% da logo — cartões sobre o preto */ --c-noite-600: #21211e; /* 14,1% da logo — bordas, divisores */ --c-noite-500: #2e2e2a; /* derivado — estados hover no escuro */ /* --------------------------------------------------------------------- SUPERFÍCIES CLARAS — "pedra" Não vêm da logo: são neutros quentes derivados do dourado, para que a pedra apareça. Fundo claro é o que faz textura de granito e mármore "ler" na tela. --------------------------------------------------------------------- */ --c-pedra-50: #faf8f5; /* fundo claro principal */ --c-pedra-100: #f2eee8; /* seções alternadas */ --c-pedra-200: #e5dfd6; /* bordas e divisores no claro */ --c-pedra-300: #d2cabe; /* bordas de ênfase */ /* --------------------------------------------------------------------- DOURADO — a cor de acento da marca Medido: 3,8% dos pixels da logo. Média #bb9a72, variando de #ffedca (brilho) a #795a34 (sombra). --------------------------------------------------------------------- */ --c-ouro-100: #ffedca; /* brilho — realce sobre dourado */ --c-ouro-200: #efd9b6; --c-ouro-300: #e0c49b; /* hover de links no escuro */ --c-ouro-500: #c8ac89; /* ★ PRINCIPAL — 9.08:1 no escuro */ --c-ouro-600: #bb9a72; /* dourado médio medido */ --c-ouro-700: #8e7a61; /* bordas sutis — 4.77:1 no escuro */ --c-ouro-800: #6b5c48; /* ★ dourado PARA FUNDO CLARO */ --c-ouro-900: #53483a; /* sombra do dourado */ /* ⚠ ARMADILHA VERIFICADA: --c-ouro-500 sobre fundo claro dá só 2.04:1 — ilegível. Em seção clara, texto dourado usa SEMPRE --c-ouro-800 (6.10:1) ou --c-ouro-900 (8.41:1). O papel semântico --acento-claro, lá embaixo, já cuida disso. */ /* O veio de mármore cinza da letra "A" da logo */ --c-veio-claro: #cfcac4; --c-veio-escuro: #6e6a65; /* --------------------------------------------------------------------- TEXTO Pares verificados contra WCAG — ver styleguide.html --------------------------------------------------------------------- */ --c-texto-claro: #ede9e3; /* sobre fundo escuro — 16.22:1 AAA */ --c-texto-claro-sutil: #b3aea5; /* secundário no escuro — 8.89:1 AAA */ --c-texto-escuro: #16150f; /* sobre fundo claro — 17.25:1 AAA */ --c-texto-escuro-sutil:#514c43; /* secundário no claro — 8.04:1 AAA */ /* Estados */ --c-sucesso: #4e7d52; /* WhatsApp: o verde oficial com texto BRANCO dá 1.98:1 e reprova. Texto escuro sobre o mesmo verde dá 9.89:1 e passa em AAA, mantendo o verde que o cliente reconhece de imediato. */ --c-whatsapp: #25d366; --c-whatsapp-escuro: #1da851; --c-whatsapp-texto: var(--c-noite-900); /* --------------------------------------------------------------------- PAPÉIS SEMÂNTICOS O resto do CSS usa SEMPRE estes, nunca as cores cruas acima. Trocar a marca = mexer só aqui. --------------------------------------------------------------------- */ --fundo: var(--c-noite-800); --fundo-elevado: var(--c-noite-700); --fundo-claro: var(--c-pedra-50); --fundo-claro-alt: var(--c-pedra-100); --borda: var(--c-noite-600); --borda-clara: var(--c-pedra-200); --acento: var(--c-ouro-500); /* dourado SOBRE ESCURO */ --acento-forte: var(--c-ouro-300); --acento-claro: var(--c-ouro-800); /* dourado SOBRE CLARO */ --texto: var(--c-texto-claro); --texto-sutil: var(--c-texto-claro-sutil); /* --------------------------------------------------------------------- TIPOGRAFIA Display: Cormorant Garamond — serifada de alto contraste. O eixo fino/grosso dela ecoa o veio do mármore; é a face "cara" do site. Texto: Inter — grotesca neutra, altamente legível em tela pequena. Marca: Inter em caixa alta com entreletra larga, imitando o tratamento de "NOVA ALIANÇA · MARMORARIA" na logo. --------------------------------------------------------------------- */ --fonte-display: "Cormorant Garamond", "Times New Roman", Georgia, serif; --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fonte-marca: var(--fonte-texto); /* Escala fluida: encolhe sozinha no celular, sem media query. Base 16px @360px → 18px @1440px */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-md: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem); --fs-lg: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem); --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --fs-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.75rem); --fs-3xl: clamp(2.75rem, 2rem + 3.3vw, 5.5rem); --entreletra-marca: 0.18em; /* o tracking largo da logo */ --entreletra-titulo: -0.01em; --altura-linha-titulo: 1.08; --altura-linha-texto: 1.65; /* --------------------------------------------------------------------- ESPAÇAMENTO — escala de 4px --------------------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem; --e-9: 4rem; --e-10: 5rem; --e-11: 6rem; --e-12: 8rem; /* Respiro vertical das seções — também fluido */ --secao-y: clamp(3.5rem, 2rem + 7vw, 7.5rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* Larguras */ --largura-conteudo: 1240px; --largura-texto: 68ch; /* --------------------------------------------------------------------- FORMA E PROFUNDIDADE Raios discretos: pedra é cortada reta, não arredondada. --------------------------------------------------------------------- */ --raio-sm: 2px; --raio: 4px; --raio-lg: 8px; --raio-pill: 999px; --sombra-sm: 0 1px 2px rgb(5 6 4 / 0.3); --sombra: 0 4px 16px -4px rgb(5 6 4 / 0.35); --sombra-lg: 0 18px 48px -12px rgb(5 6 4 / 0.45); --sombra-ouro: 0 8px 32px -8px rgb(200 172 137 / 0.28); /* Movimento */ --t-rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1); --t: 240ms cubic-bezier(0.4, 0, 0.2, 1); --t-lento: 520ms cubic-bezier(0.22, 1, 0.36, 1); --z-base: 1; --z-cabecalho: 100; --z-flutuante: 200; --z-modal: 300; } /* Quem pediu menos movimento, recebe menos movimento. */ @media (prefers-reduced-motion: reduce) { :root { --t-rapido: 1ms; --t: 1ms; --t-lento: 1ms; } }