/* ============================================================ Cell Peças — VERSÃO 2: azul de marca no fundo Inerte até o receber data-tema="azul*". Mesma tese da versão escura: aqui só se remapeiam os tokens SEMÂNTICOS. Os tokens brutos de tokens.css (rampas, tipografia, espaçamento) continuam intocados, e nenhum HTML muda. QUATRO NÍVEIS DE CLARIDADE, todos na rampa de azul do próprio Design System (gerada em OKLCH em torno do #006CA8): ?tema=azul-profundo página #011526 (a 1ª proposta) ?tema=azul página #01314F = --blue-900 ?tema=azul-claro página #03436A = --blue-800 ?tema=azul-vivo página #006CA8 = --blue-600, o azul do criativo Quanto mais clara a página, mais claros precisam ficar o texto secundário e as linhas — senão o contraste cai abaixo de AA. Por isso cada nível traz o seu próprio jogo de cinzas, medido, e não só uma troca de fundo. ============================================================ */ /* ============================================================ COMUM A TODOS OS NÍVEIS ============================================================ */ :root[data-tema^="azul"] { /* O fechamento deixa de ser azul: num site inteiro azul, um bloco azul não fecha nada. Vira lime, que é o outro lado da marca. */ --surface-blue: var(--lime-400); /* Azul sobre azul some: quem acentua é o lime, e o azul claro fica só para link. */ --brand-blue-lit: var(--blue-200); --text-link: var(--blue-200); } /* ---------- faixa de fechamento em lime ---------- .band--blue passa a se comportar como .band--lime: fundo lime, texto ink e botão escuro. É o único bloco saturado da página. */ :root[data-tema^="azul"] .band--blue { background: var(--lime-400); color: var(--lime-950); } :root[data-tema^="azul"] .band--blue h2, :root[data-tema^="azul"] .band--blue h3, :root[data-tema^="azul"] .band--blue .lede { color: var(--lime-950); } :root[data-tema^="azul"] .band--blue .cta-final .lede { color: color-mix(in srgb, var(--lime-950) 78%, transparent); } :root[data-tema^="azul"] .band--blue .cp-btn--accent, :root[data-tema^="azul"] .band--blue .cp-btn--primary { background: var(--ink); color: var(--gray-50); } :root[data-tema^="azul"] .band--blue .cp-btn--accent:hover, :root[data-tema^="azul"] .band--blue .cp-btn--primary:hover { background: #000; color: #fff; box-shadow: none; } /* ---------- botão flutuante ---------- Ele é lime e a faixa de fechamento agora também. Quando a faixa toma a tela, o botão sumiria dentro dela. O anel escuro o mantém legível em qualquer fundo — lime, azul ou foto. */ :root[data-tema^="azul"] .wa-float { box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .95), 0 0 0 3px rgba(1, 21, 38, .6); } /* ---------- fotos ---------- A foto do hero é de bancada cinza: dessaturar sozinho não resolve, porque cinza sobre azul continua sendo um corpo estranho. Uma lavagem do próprio azul da marca puxa a foto para a paleta. O brilho e o tom da lavagem acompanham o nível — sobre página clara, foto escura demais vira um buraco. */ :root[data-tema^="azul"] .hero__media img { filter: brightness(var(--foto-brilho)) contrast(1.16) saturate(.5); } :root[data-tema^="azul"] .store__img { filter: brightness(calc(var(--foto-brilho) + .16)) contrast(1.08) saturate(.8); } :root[data-tema^="azul"] .hero__media::after { background: linear-gradient(to right, var(--surface-page), transparent 10%), linear-gradient(to left, var(--surface-page), transparent 11%), linear-gradient(to top, var(--surface-page), transparent 11%), linear-gradient(to bottom, var(--surface-page), transparent 13%), linear-gradient(color-mix(in srgb, var(--foto-lavagem) 42%, transparent), color-mix(in srgb, var(--foto-lavagem) 42%, transparent)); } /* ---------- mapa ---------- O embed do Google é branco e, sobre azul, vira o ponto mais claro da página. A borda lime costura ele ao resto em vez de deixá-lo solto. */ :root[data-tema^="azul"] .map__frame { border-color: var(--line-lime); } /* ============================================================ CAMADA DE PROFUNDIDADE — o que tira o "chapado" Cor cheia num plano grande fica com cara de papel impresso: lisa demais, sem material. Duas camadas resolvem sem inventar cor nova: 1. GRÃO: ruído fino sobre a página inteira. É o mesmo truque de fotografia analógica — a textura quebra a superfície plana. Fica em 4,5%: perceptível como matéria, invisível como sujeira. 2. LUZ: um clarão amplo no topo do hero, do próprio azul um passo mais claro. Dá a sensação de luz caindo em vez de tinta chapada. Nenhuma das duas é gradiente de MARCA (aquilo que o manual proíbe é misturar as cores da marca num degradê). Aqui é a mesma cor variando de intensidade, que é sombra e luz, não degradê de marca. ============================================================ */ :root[data-tema^="azul"] body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { /* grão é estático, segue valendo */ } :root[data-tema^="azul"] .hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%; pointer-events: none; z-index: 0; background: radial-gradient(58% 52% at 62% 0%, color-mix(in srgb, var(--brilho-hero) 62%, transparent), transparent 70%); } /* ============================================================ NÍVEL 1 — AZUL PROFUNDO (a primeira proposta) ============================================================ */ :root[data-tema="azul-profundo"] { --surface-page: #011526; /* mais fundo que o blue-950 */ --surface-sunken: #012036; /* = --blue-950 */ --surface-card: #012B47; --surface-raised: #01314F; /* = --blue-900 */ --text-strong: #EAF4FB; --text-body: #AFC7D8; --text-muted: #7E9AB0; --text-subtle: #6B87A0; --line: rgba(141, 204, 254, .16); --line-strong: rgba(141, 204, 254, .30); --foto-brilho: .66; --foto-lavagem: var(--blue-800); --brilho-hero: var(--blue-800); } /* ============================================================ NÍVEL 2 — AZUL (padrão da versão 2) Página no --blue-900. Claramente mais claro que o nível 1, e ainda escuro o bastante para o lime gritar. ============================================================ */ :root[data-tema="azul"] { --surface-page: #01314F; /* = --blue-900 */ --surface-sunken: #013A5C; --surface-card: #03436A; /* = --blue-800 */ --surface-raised: #044C79; --text-strong: #F1F8FD; --text-body: #C2D7E5; --text-muted: #9DB6C8; --text-subtle: #8CA7BC; /* sobre azul mais claro, linha azulada some: branco segura melhor */ --line: rgba(255, 255, 255, .15); --line-strong: rgba(255, 255, 255, .28); --foto-brilho: .72; --foto-lavagem: var(--blue-700); --brilho-hero: var(--blue-700); } /* ============================================================ NÍVEL 3 — AZUL CLARO Página no --blue-800, um passo do azul cheio da marca. É o limite: acima disso o lime perde força e o texto secundário não fecha AA sem virar quase branco. ============================================================ */ :root[data-tema="azul-claro"] { --surface-page: #03436A; /* = --blue-800 */ --surface-sunken: #044E7A; --surface-card: #035788; /* = --blue-700 */ --surface-raised: #06639A; --text-strong: #F6FAFE; --text-body: #D3E4EF; --text-muted: #B6CCDC; --text-subtle: #A6BFD2; --line: rgba(255, 255, 255, .18); --line-strong: rgba(255, 255, 255, .32); --foto-brilho: .80; --foto-lavagem: var(--blue-600); --brilho-hero: var(--blue-600); } /* ============================================================ NÍVEL 4 — AZUL VIVO O azul do criativo: --blue-600 #006CA8, a cor cheia da marca. É o mais claro possível sem quebrar a leitura, e por isso o que mais exige das outras cores: - o texto secundário fica quase branco (o azul cheio come cinza); - o lime como TEXTO cai para 3,2:1 e reprovaria em AA, então --lime-txt sobe para o --lime-100. Os BOTÕES seguem no lime da marca: como preenchimento grande, 3,2:1 já cumpre o mínimo de componente (3:1), e mexer neles descaracterizaria a marca; - o botão ganha um anel escuro, senão a borda dele se dissolve no azul claro. ============================================================ */ :root[data-tema="azul-vivo"] { --surface-page: #006CA8; /* = --blue-600, o azul da marca */ --surface-sunken: #005E93; --surface-card: #0A78B8; --surface-raised: #1385C6; --text-strong: #FFFFFF; --text-body: #EDF4FA; --text-muted: #E2EEF8; --text-subtle: #D2E5F4; --lime-txt: var(--lime-100); --line: rgba(255, 255, 255, .22); --line-strong: rgba(255, 255, 255, .38); --line-lime: color-mix(in srgb, var(--lime-100) 55%, transparent); --foto-brilho: .86; --foto-lavagem: var(--blue-500); --brilho-hero: var(--blue-500); } /* Ênfase da headline num lime mais cheio. Texto grande tem piso de 3:1 em vez de 4,5:1, então aqui cabe o --lime-200 (4,3:1), que ainda lê como lime da marca. O --lime-100 continua valendo no texto miúdo, que precisa dos 4,5:1. Passar disso (o --lime-400 cheio, 3,2:1) faz o par vibrar: verde e azul saturados na mesma luminosidade brigam em vez de destacar. */ :root[data-tema="azul-vivo"] h1 em, :root[data-tema="azul-vivo"] h2 em, :root[data-tema="azul-vivo"] .guarantee h2 em { color: var(--lime-200); } /* sobre azul claro a borda do botao lime se dissolve: o anel a devolve */ :root[data-tema="azul-vivo"] .cp-btn--primary, :root[data-tema="azul-vivo"] .cp-btn--accent { box-shadow: 0 0 0 1px rgba(1, 32, 54, .3); } /* ---------- foto no azul vivo: sem lavagem ---------- A lavagem azul existe para fundo ESCURO, onde a foto de bancada cinza destoa. Aqui o raciocínio se inverte: sobre azul claro, tingir a foto de azul faz o produto afundar atrás de um filme — some justamente a peça, que é o que o técnico veio ver. Então neste nível a foto é ela mesma, em cor natural, e o que a separa do fundo não é véu e sim SOMBRA: ela passa a estar SOBRE a página em vez de dentro dela. É o oposto do que os níveis escuros pedem. */ :root[data-tema="azul-vivo"] .hero__media img { filter: contrast(1.05) saturate(1.04); border-radius: 20px 0 0 20px; } :root[data-tema="azul-vivo"] .hero__media::after { /* só um respiro na borda esquerda, onde a foto encosta na headline */ background: linear-gradient(to right, color-mix(in srgb, var(--surface-page) 55%, transparent), transparent 7%); } :root[data-tema="azul-vivo"] .hero__media { box-shadow: -18px 24px 60px -24px rgba(0, 26, 44, .55); border-radius: 20px 0 0 20px; } /* a foto da loja segue a mesma regra: cor real, sem tingimento */ :root[data-tema="azul-vivo"] .store__img { filter: contrast(1.04) saturate(1.02); box-shadow: 0 24px 60px -28px rgba(0, 26, 44, .55); } /* No azul claro a lavagem também já pesa: fica em metade da força */ :root[data-tema="azul-claro"] .hero__media::after { background: linear-gradient(to right, var(--surface-page), transparent 10%), linear-gradient(to left, var(--surface-page), transparent 11%), linear-gradient(to top, var(--surface-page), transparent 11%), linear-gradient(to bottom, var(--surface-page), transparent 13%), linear-gradient(color-mix(in srgb, var(--foto-lavagem) 20%, transparent), color-mix(in srgb, var(--foto-lavagem) 20%, transparent)); } :root[data-tema="azul-claro"] .hero__media img { filter: brightness(.92) contrast(1.08) saturate(.85); }