/* =========================================================================== TOKENS — Karla Duarte (portfólio profissional) ATENÇÃO: este arquivo é DO CLIENTE. Nunca sobrescrever com o tokens.css do starter — os ajustes de paleta e tipografia se perdem. Só o blocos.css vem do starter. =========================================================================== */ /* ============================================================================ TOKENS — Starter de landing pages ORCA ---------------------------------------------------------------------------- Camada 1 de 3 (ver modelos/ESPECIFICACAO.md). Este arquivo NÃO desenha nada. Ele só declara as variáveis que os blocos consomem. Trocar de cliente = trocar valores aqui, nunca mexer nos blocos. Como escolher, em quatro atributos no : data-paleta="mare|carvao|duna|clinica|oficina|viveiro" data-tipografia="editorial|geometrico|humanista" data-raio="reto|discreto|suave|pilula" data-densidade="arejada|media|densa" ========================================================================== */ /* ========================================================================== 1. PALETAS 12 tokens por paleta. Regra: no máximo 6 cores visíveis na página. --brasa é a AÇÃO. Se aparecer em três lugares, perdeu a força. ========================================================================== */ :root, :root[data-paleta="mare"] { /* Maré — restaurante, bar, praia, frutos do mar. Escura, editorial. */ color-scheme: dark; --fundo: #071A1F; --fundo-alto: #0C262C; --fundo-baixo: #041216; --tinta: #F2EDE3; --tinta-fraca: #93A9AB; /* cinza com viés de teal, nunca cinza puro */ --linha: #17383F; --acento: #2FA39B; --realce: #E5C27E; --brasa: #E8703A; --brasa-tinta: #0B0704; --sucesso: #4FB477; --erro: #D9534F; } :root[data-paleta="carvao"] { /* Carvão — estúdio, barbearia, tatuagem, oficina criativa. Escura extrema. */ color-scheme: dark; --fundo: #0A0A0B; --fundo-alto: #131316; --fundo-baixo: #050506; --tinta: #EDEAE4; --tinta-fraca: #8C8A87; --linha: #232327; --acento: #A8A29A; --realce: #D6CFC4; --brasa: #9E2B20; --brasa-tinta: #F7F3EE; --sucesso: #6E9E5B; --erro: #C4453C; } :root[data-paleta="duna"] { /* Duna — arquitetura, imobiliária, escritório, consultoria. Clara, sóbria. */ color-scheme: light; --fundo: #EFEDE7; --fundo-alto: #F7F5F1; --fundo-baixo: #E4E1D9; --tinta: #1B1D1C; --tinta-fraca: #5F635F; --linha: #D3CFC5; --acento: #3F5C4E; --realce: #8A6A4A; --brasa: #B4552B; --brasa-tinta: #FFF8F3; --sucesso: #3F7A55; --erro: #A63A2E; } :root[data-paleta="clinica"] { /* Clínica — saúde, odontologia, estética, laboratório. Clara, serena. */ color-scheme: light; --fundo: #F2F5F6; --fundo-alto: #FFFFFF; --fundo-baixo: #E4EAEC; --tinta: #14282E; --tinta-fraca: #52686E; --linha: #D2DEE1; --acento: #2C7A8C; --realce: #458177; --brasa: #B0511A; --brasa-tinta: #FFFFFF; --sucesso: #3E8F6B; --erro: #C0504A; } :root[data-paleta="oficina"] { /* Oficina — automotivo, construção, serviço técnico, indústria. Escura. */ color-scheme: dark; --fundo: #16181C; --fundo-alto: #1F2228; --fundo-baixo: #0F1114; --tinta: #ECEDEF; --tinta-fraca: #8D9298; --linha: #2C3038; --acento: #6E7A87; --realce: #F0B429; --brasa: #E8541F; --brasa-tinta: #14100D; --sucesso: #57A773; --erro: #D64545; } :root[data-paleta="viveiro"] { /* Viveiro — turismo, natureza, jardinagem, pousada, agro. Clara, quente. */ color-scheme: light; --fundo: #F4F2EA; --fundo-alto: #FBFAF5; --fundo-baixo: #E7E4D8; --tinta: #21281F; --tinta-fraca: #67715F; --linha: #D6D2C2; --acento: #4E7B45; --realce: #9C6425; --brasa: #B5462F; --brasa-tinta: #FDF7F3; --sucesso: #4E7B45; --erro: #A63A2E; } /* ========================================================================== 2. TIPOGRAFIA Duas famílias: DISPLAY (personalidade) e CORPO (legibilidade). Escolher UM caminho de hierarquia — por tamanho OU por peso. Nunca os dois. ========================================================================== */ :root, :root[data-tipografia="editorial"] { /* Serifada elegante + geométrica quente. Hierarquia por TAMANHO. */ --display: "Instrument Serif", Georgia, "Times New Roman", serif; --corpo: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --peso-display: 400; --peso-titulo: 400; } :root[data-tipografia="geometrico"] { /* Sem serifa com caráter. Hierarquia por PESO — corpo pequeno, peso alto. */ --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --corpo: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif; --peso-display: 800; --peso-titulo: 700; } :root[data-tipografia="humanista"] { /* Serifada moderna + humanista. Meio-termo: institucional sem ser frio. */ --display: "Fraunces", Georgia, serif; --corpo: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif; --peso-display: 600; --peso-titulo: 600; } :root { /* --- Os 8 degraus. Não criar o nono. --- */ --t-mini: 0.78rem; /* rótulo maiúsculo, legenda */ --t-peq: 0.88rem; /* apoio, rodapé */ --t-base: clamp(1rem, .95rem + .25vw, 1.125rem);/* corpo — nunca < 16px */ --t-medio: clamp(1.05rem, .95rem + .55vw, 1.4rem); --t-h3: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); --t-h2: clamp(2.2rem, 1.4rem + 3.4vw, 4.25rem); --t-h1: clamp(3rem, 1.6rem + 6.2vw, 7.5rem); --t-numero: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); --entrelinha-titulo: 0.98; --entrelinha-corpo: 1.65; --espacamento-rotulo: 0.16em; /* letter-spacing de maiúsculas */ --medida: 62ch; /* largura ideal de leitura */ } /* ========================================================================== 3. ESPAÇAMENTO Escala de 6 degraus. --respiro-secao é o único que muda por projeto. ========================================================================== */ :root { --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 40px; --e6: 64px; --largura-conteudo: 1180px; --margem-lateral: 1.25rem; } :root, :root[data-densidade="media"] { --respiro-secao: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); } :root[data-densidade="arejada"] { --respiro-secao: clamp(4.5rem, 3rem + 7vw, 9rem); } :root[data-densidade="densa"] { --respiro-secao: clamp(1.75rem, 1.25rem + 2vw, 3rem); } /* ========================================================================== 4. RAIO — por PAPEL do elemento, não um valor único. Botão em pílula não significa foto em pílula. Cada papel tem seu token: --raio-botao botões, etiquetas, pontos --raio-cartao cartões, painéis, superfícies --raio-midia fotos, vídeo, molduras --raio-campo campos de formulário O atributo data-raio define os três de uma vez (preset). Os atributos data-raio-botao / -cartao / -midia sobrescrevem individualmente. Herói e faixas de sangria nunca têm raio — são de ponta a ponta. ========================================================================== */ :root { --r-reto: 0; --r-discreto: 3px; --r-suave: 12px; --r-pilula: 999px; } /* --- presets --- */ :root, :root[data-raio="discreto"] { --raio-botao: var(--r-discreto); --raio-cartao: var(--r-discreto); --raio-midia: var(--r-discreto); } :root[data-raio="reto"] { --raio-botao: var(--r-reto); --raio-cartao: var(--r-reto); --raio-midia: var(--r-reto); } :root[data-raio="suave"] { --raio-botao: var(--r-suave); --raio-cartao: var(--r-suave); --raio-midia: var(--r-suave); } :root[data-raio="pilula"] { /* pílula no botão, mas cartão e mídia continuam suaves — é o que os sites de referência realmente fazem */ --raio-botao: var(--r-pilula); --raio-cartao: var(--r-suave); --raio-midia: var(--r-suave); } /* --- sobrescrita individual --- */ :root[data-raio-botao="reto"] { --raio-botao: var(--r-reto); } :root[data-raio-botao="discreto"] { --raio-botao: var(--r-discreto); } :root[data-raio-botao="suave"] { --raio-botao: var(--r-suave); } :root[data-raio-botao="pilula"] { --raio-botao: var(--r-pilula); } :root[data-raio-cartao="reto"] { --raio-cartao: var(--r-reto); } :root[data-raio-cartao="discreto"] { --raio-cartao: var(--r-discreto); } :root[data-raio-cartao="suave"] { --raio-cartao: var(--r-suave); } :root[data-raio-cartao="pilula"] { --raio-cartao: var(--r-pilula); } :root[data-raio-midia="reto"] { --raio-midia: var(--r-reto); } :root[data-raio-midia="discreto"] { --raio-midia: var(--r-discreto); } :root[data-raio-midia="suave"] { --raio-midia: var(--r-suave); } :root[data-raio-midia="pilula"] { --raio-midia: var(--r-pilula); } :root { --raio-campo: var(--raio-cartao); } /* ========================================================================== 4b. TRILHOS — faixas de cor, horizontais ou verticais. Uma, duas, três cores ou degradê. Servem de divisor de seção, de acento lateral num bloco, ou de assinatura visual da marca. ========================================================================== */ :root { --trilho-fino: 2px; --trilho-medio: 4px; --trilho-grosso: 8px; --trilho-espessura: var(--trilho-medio); /* as cores do trilho — trocáveis por bloco */ --trilho-c1: var(--acento); --trilho-c2: var(--realce); --trilho-c3: var(--brasa); } /* ========================================================================== 5. SOMBRAS Sempre tingidas pelo acento. Sombra preta pura entrega amadorismo. ========================================================================== */ :root { --sombra-1: 0 1px 2px color-mix(in srgb, var(--acento) 22%, transparent); --sombra-2: 0 8px 24px color-mix(in srgb, var(--acento) 18%, transparent); --sombra-3: 0 20px 50px color-mix(in srgb, var(--acento) 26%, transparent); /* Para texto sobre foto — camadas, não uma sombra dura */ --sombra-texto: 0 1px 2px rgb(0 0 0 / .55), 0 8px 30px rgb(0 0 0 / .35); } /* ========================================================================== 6. DEGRADÊS — no máximo 2 ângulos por página. A coesão vem de repetir o ângulo e mudar só as paradas de cor. ========================================================================== */ :root { --angulo-bloco: 147deg; --grad-bloco-acento: linear-gradient(var(--angulo-bloco), color-mix(in srgb, var(--acento) 34%, var(--fundo-alto)), var(--fundo-baixo)); --grad-bloco-realce: linear-gradient(var(--angulo-bloco), color-mix(in srgb, var(--realce) 30%, var(--fundo-alto)), var(--fundo-baixo)); --grad-bloco-brasa: linear-gradient(var(--angulo-bloco), color-mix(in srgb, var(--brasa) 26%, var(--fundo-alto)), var(--fundo-baixo)); /* Cena do herói: malha de 3 focos + base */ --grad-cena: radial-gradient(120% 78% at 72% 108%, color-mix(in srgb, var(--brasa) 62%, transparent) 0%, transparent 58%), radial-gradient(85% 60% at 18% 96%, color-mix(in srgb, var(--realce) 42%, transparent) 0%, transparent 62%), radial-gradient(140% 92% at 50% 0%, color-mix(in srgb, var(--acento) 30%, transparent) 0%, transparent 55%), linear-gradient(178deg, var(--fundo-baixo) 8%, var(--fundo) 46%, var(--fundo-alto) 100%); /* Escurecimento sobre foto, para o texto ler */ --grad-scrim: linear-gradient(to top, var(--fundo) 2%, transparent 42%); } /* ========================================================================== 7. MOVIMENTO E CAMADAS ========================================================================== */ :root { --transicao-rapida: .18s ease; --transicao-media: .3s ease; --z-conteudo: 1; --z-topo: 50; --z-flutuante:60; --z-modal: 100; } /* Quem pediu menos movimento, recebe menos movimento. */ @media (prefers-reduced-motion: reduce) { :root { --transicao-rapida: 0s; --transicao-media: 0s; } } /* ========================================================================== 8. ALVOS DE TOQUE — não é estética, é acessibilidade. A auditoria mostrou as duas referências falhando aqui (25% e 33%). ========================================================================== */ :root { /* Respiro do topo fixo. O fino é calibrado para deixar a barra ~25% mais baixa ao passar a primeira dobra, sem encolher o botão abaixo dos 44px. */ /* Altura total do topo fixo em repouso: respiro em cima e embaixo mais a altura do filho mais alto (o botão, 50px). Serve para o conteúdo começar abaixo da barra em vez de passar por baixo dela. */ --topo-altura: calc(var(--topo-respiro) * 2 + 50px); /* Altura da ação sobre o herói, medida da BASE da imagem para cima. Ajuste este valor para encaixar num ponto específico da foto. */ --heroi-acao-base: 36%; /* Contorno de texto sobre foto. Em em, para acompanhar o tamanho da fonte. */ --contorno-espessura: 0.055em; --contorno-cor: var(--fundo); --topo-respiro: var(--e3); --topo-respiro-fino: 6px; --toque-min: 44px; --botao-altura: 44px; --botao-altura-g: 56px; --botao-padding: .95rem 1.6rem; --botao-padding-g: 1.15rem 2.2rem; } /* No celular nada de texto desce abaixo de 14px. Os dois passos menores da escala foram desenhados para tela grande; no telefone, à distância de leitura normal, viram letra de bula — foi o defeito que medimos nos sites de referência (79% do texto abaixo de 14px em um deles). */ @media (max-width: 700px) { :root { --t-mini: 0.875rem; --t-peq: 0.94rem; } } /* --- ajustes desta página --- O título do herói tem duas frases longas. No tamanho padrão (--t-h2) ele ocupava 416px de altura sozinho e empurrava os botões para BAIXO da primeira dobra — numa tela de 900px eles só apareciam depois de rolar. Aqui ele é menor e com medida mais curta, para a chamada e a ação caberem juntas. */ :root { --heroi-titulo-tamanho: clamp(2rem, 1.1rem + 2.6vw, 3.05rem); --heroi-titulo-medida: 21ch; --heroi-titulo-forte: 1.2em; }