/* hzero — temas. O tema é escolhido pelo atributo data-theme no . Sem atributo, vale o escuro: ele é o :root abaixo e continua sendo exatamente o que sempre foi — nenhum valor do tema original foi apagado, só ganhou nome. escuro (padrão) claro Os tokens semânticos (surface, text, border) vêm do design system em _ds/.../tokens/colors.css. Esta folha redefine, por tema, esses tokens e mais os que são só do site — cabeçalho, grade, cena do hero, scrims. PARA CRIAR UM TEMA NOVO: copie o bloco :root[data-theme="light"] inteiro, troque o nome, ajuste os valores e acrescente o nome ao array THEMES em shared/chrome.jsx. Nada precisa ser removido. */ /* ── escuro (padrão) ─────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; /* lima como texto: sobre superfície escura ela se sustenta */ --hz-accent-text: var(--hz-lime); /* superfícies compostas do site */ --hz-header-bg: rgba(0, 0, 0, .78); --hz-mega-bg: rgba(0, 0, 0, .96); --hz-panel-bg: rgba(0, 0, 0, .97); --hz-solnav-bg: rgba(0, 0, 0, .86); --hz-card-hover-bg: #111; --hz-card-hover-border: rgba(204, 255, 3, .45); --hz-solcard-hover-border: rgba(255, 255, 255, .28); --hz-select-bg: #0d0d0d; --hz-marquee-edge: #000; /* grade técnica */ --hz-grid-bg: #000; --hz-grid-line-a: rgba(255, 255, 255, .055); --hz-grid-line-b: rgba(255, 255, 255, .075); /* véus sobre o hero, para o texto continuar legível por cima da cena */ --hz-hero-scrim: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 28%, rgba(0, 0, 0, .42) 56%, rgba(0, 0, 0, .12) 100%), linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 24%); --hz-hero-scrim-mobile: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .9) 46%, rgba(0, 0, 0, .7) 100%), linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 30%); --hz-heroslot-scrim: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .1) 100%); /* cena animada do hero */ --hz-scene-accent: var(--hz-lime); --hz-scene-terrain-a: rgba(255, 255, 255, .05); --hz-scene-terrain-b: rgba(255, 255, 255, .075); --hz-scene-pole: rgba(255, 255, 255, .17); --hz-scene-route: rgba(255, 255, 255, .24); --hz-scene-lane: rgba(255, 255, 255, .32); --hz-scene-hole: #000; /* logos dos clientes são arquivos brancos: no escuro entram como estão */ --hz-clientlogo-filter: none; --hz-bar-glow: var(--glow-lime); /* acento de cada solução (usado em shared/data.js) */ --hz-sol-konq: var(--hz-lime); --hz-sol-afere: var(--hz-cyan); --hz-sol-consultoria: var(--hz-orange); /* hover dos links do rodapé */ --hz-footlink-hover: var(--hz-lime); } /* ── claro ─────────────────────────────────────────────────────────────────── Os valores semânticos são os mesmos do escopo .hz-light do design system, que já vem do manual de marca. A regra que organiza tudo: a lima continua sendo preenchimento (barra, botão, chip), nunca texto — sobre branco ela tem contraste de 1,4:1 e sumiria. Como texto, entra o grafite. */ :root[data-theme="light"] { color-scheme: light; --surface-page: var(--hz-white); --surface-raised: var(--hz-grey-50); --surface-card: var(--hz-white); --surface-inset: var(--hz-grey-100); --surface-inverse: var(--hz-black); --surface-overlay: rgba(255, 255, 255, .8); --text-primary: var(--hz-black); --text-secondary: var(--hz-grey-850); --text-muted: var(--hz-grey-600); --text-accent: var(--hz-grey-900); --border-subtle: rgba(0, 0, 0, .12); --border-default: var(--hz-grey-200); --border-strong: var(--hz-grey-400); --grid-line: rgba(0, 0, 0, .05); --state-hover-tint: rgba(204, 255, 3, .30); --focus-ring: var(--focus-ring-light); --hz-accent-text: var(--hz-grey-900); --hz-header-bg: rgba(255, 255, 255, .82); --hz-mega-bg: rgba(255, 255, 255, .97); --hz-panel-bg: rgba(255, 255, 255, .98); --hz-solnav-bg: rgba(255, 255, 255, .9); --hz-card-hover-bg: var(--hz-grey-50); --hz-card-hover-border: var(--hz-grey-400); --hz-solcard-hover-border: var(--hz-grey-400); --hz-select-bg: var(--hz-white); --hz-marquee-edge: var(--hz-white); --hz-grid-bg: var(--hz-white); --hz-grid-line-a: rgba(0, 0, 0, .05); --hz-grid-line-b: rgba(0, 0, 0, .07); --hz-hero-scrim: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 28%, rgba(255, 255, 255, .42) 56%, rgba(255, 255, 255, .12) 100%), linear-gradient(0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 24%); --hz-hero-scrim-mobile: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .7) 100%), linear-gradient(0deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 30%); --hz-heroslot-scrim: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .1) 100%); /* A cena vira monocromática: lima sobre branco não se lê. Os traços são mais fortes que os equivalentes do tema escuro de propósito — sob o véu branco do hero, uma linha escura fina desaparece bem antes de uma linha clara sobre preto. */ --hz-scene-accent: var(--hz-grey-900); --hz-scene-terrain-a: rgba(0, 0, 0, .06); --hz-scene-terrain-b: rgba(0, 0, 0, .10); --hz-scene-pole: rgba(0, 0, 0, .26); --hz-scene-route: rgba(0, 0, 0, .40); --hz-scene-lane: rgba(0, 0, 0, .48); --hz-scene-hole: var(--hz-white); /* os arquivos dos clientes são versões brancas monocromáticas */ --hz-clientlogo-filter: invert(1); --hz-bar-glow: none; /* mesma matiz de cada produto, escurecida até ficar legível sobre branco */ --hz-sol-konq: #5c7300; --hz-sol-afere: #0d5c5e; --hz-sol-consultoria: #8b2104; --hz-footlink-hover: var(--hz-lime); } /* Peças que trocam de arquivo, não de cor — o logotipo tem versão branca e versão preta, e o ícone do botão de tema é sol ou lua. As duas versões vão sempre para o HTML e o CSS mostra a do tema. Isso não é só conveniência: as páginas são pré-renderizadas, e no servidor não existe localStorage para saber o tema de quem vai abrir. Escolher em JS faria quem está no claro receber a marcação do escuro, e a hidratação acusaria a diferença. Escolhendo em CSS, a marcação é uma só. */ .hz-when-light, :root[data-theme="light"] .hz-when-dark { display: none } /* O Logo do design system traz display:block no style inline, e style inline vence qualquer seletor. Sem !important as duas versões ficam na página: a do tema errado não some, só fica invisível contra o fundo — e continua ocupando os 22px dela, empurrando o logotipo para cima dentro do cabeçalho. */ .hz-logo-light, :root[data-theme="light"] .hz-logo-dark { display: none !important } :root[data-theme="light"] .hz-logo-light { display: block !important } :root[data-theme="light"] .hz-when-light { display: inline-block } /* O botão "link" do design system pinta o texto de lima por dentro do style inline; no claro isso precisa ser vencido de fora. */ :root[data-theme="light"] .hz-linkbtn { color: var(--hz-accent-text) !important; border-bottom-color: var(--hz-accent-text) !important }