/* ═══════════════════════════════════════════════════════════════════ Vitalis Coach · camada de ritmo do site ─────────────────────────────────────────────────────────────────── Não traz cores novas nem fontes novas. O problema não era a paleta, era tudo aparecer com a mesma forma, no mesmo fundo e com o mesmo peso, do topo ao fundo da página. Cinco recursos, por ordem de impacto: 1. fundos que alternam, incluindo uma secção clara a meio 2. a calha lateral, que numera e mostra onde se vai 3. alinhamento a duas colunas nas secções de argumento 4. as frases soltas com um sítio onde se apoiar 5. movimento discreto à entrada de cada bloco ═══════════════════════════════════════════════════════════════════ */ :root{ /* A secção clara, emprestada dos carrosséis. É o único acrescento à paleta, e não é uma cor nova: é a mesma que já se usa no Instagram. */ --claro:#F4F1E8; --claro-tinta:#0A1410; --claro-dim:#4A5A50; --claro-verde:#0E5B3A; --claro-linha:#DDD7C7; --calha:64px; } /* ── 1 · RITMO DE FUNDOS ────────────────────────────────────────── A página deixa de ser um bloco escuro contínuo. */ section.afundado{ background:var(--bg-sunken); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* A secção clara não sobrescreve regra a regra: REDEFINE AS VARIÁVEIS dentro dela. Todo o CSS do site já lê `var(--bone)`, `var(--bg-raised)` e companhia, por isso adapta-se sozinho, sem guerras de especificidade. A primeira tentativa foi por seletor e perdia sempre para regras mais específicas do site (`.duo .bloco .intro` ganha a `section.claro p`), deixando texto quase branco sobre papel. */ section.claro{ --bone:#0A1410; --bone-dim:#4A5A50; --bone-faint:#617167; /* afinado até passar 4.5:1 sobre papel E sobre cartão */ --bg:var(--claro); --bg-raised:#FFFDF7; --bg-sunken:#EFEBE0; --bg-hair:rgba(10,20,16,.05); --line:var(--claro-linha); --line-hi:#CFC8B6; --vital:var(--claro-verde); --vital-bright:#1B7A4F; --vital-deep:#0A4A2E; background:var(--claro); color:var(--claro-tinta); } /* O acento passou a escuro: um botão cheio precisa de texto claro por cima. */ section.claro .btn-primary{background:var(--claro-verde);color:#FFFDF7} section.claro .btn-primary:hover{background:#1B7A4F} /* Os SVG trazem a cor num atributo; a propriedade CSS ganha-lhe. */ section.claro .icon svg, section.claro .tick svg{stroke:var(--claro-verde)} /* ── 2 · A CALHA LATERAL ────────────────────────────────────────── Numera as secções, diz em qual se está e quanto falta. É a peça que dá identidade à página: as outras mudanças são ritmo, esta é assinatura. Duas decisões que valeram correções: 1. O progresso vive ATRÁS dos pontos, não numa barra à parte. Com as duas coisas separadas a calha ficava com mais de 400px de altura e atravessava a fronteira entre duas secções, o que deixava metade dela pintada para o fundo errado. 2. Tem fundo próprio. Uma calha sem corpo é ilegível quando passa por cima de uma imagem ou de um limite de secção. Com a pastilha, lê-se sempre. Só aparece quando há margem para ela sem apertar o conteúdo (o corpo do site tem 1080px de largura máxima). */ .calha{display:none} /* O menu do telemóvel também é um