/* ═══════════════════════════════════════════════════ PREVIEW — temas de marca (cores reais dos logos) Uso: e a página INTEIRA veste a farda da rede. Ao contrário de uma troca só de acento, cada tema muda também os fundos claros (--paper) e as faixas neutras (--stone/--line): assim a cor permeia a página toda, não só botões e letras. As secções escuras (--navy) levam o tom escuro da marca; o botão primário (--btn-*) a cor da rede com o texto no tom de contraste certo. Selecionados os que mais se distinguem entre si (ByMG + 4). Ficaram de fora ERA e ImoTrust por serem "outro vermelho", perto do RE/MAX. ═══════════════════════════════════════════════════ */ /* Tons secundários derivados dos principais (comuns a qualquer marca). */ :root[data-tema]{ --navy-deep: color-mix(in srgb, var(--navy) 80%, #000); --muted: color-mix(in srgb, var(--text) 50%, var(--paper)); } /* ---------- Vinho & Azeitona — bordô-vinho + verde-azeitona ---------- Vinho (#7F2332) manda no acento e no CTA; o verde-azeitona (#A5A020) é o acento claro sobre as secções escuras (eyebrows, números, avatares). As secções escuras num carvão quente aubergine, para o vinho e o azeitona saltarem sem competir; a página veste um creme quente. Vinho e azeitona são quase complementares na roda das cores — daí a tensão viva. */ :root[data-tema="vinho"]{ --champ:#7F2332; --champ-soft:#A5A020; --ink:#241A1C; --navy:#2B2023; /* fundo: creme-blush quente, com o leve rubor do vinho */ --paper:#F7EFE9; --stone:#EEE0D7; --line:#E1D2C6; --text:#2A2320; --btn-bg:#7F2332; --btn-fg:#FFFFFF; --btn-bg-hover:#651A27; } /* ---------- Century 21 — dourado + cinza-quase-preto ---------- Botão dourado com texto PRETO (o dourado claro é ilegível como texto); acento em dourado escuro; claros num greige quente. */ :root[data-tema="c21"]{ --champ:#9A7B45; --champ-soft:#D8CBA6; --ink:#201F1E; --navy:#252526; /* fundo: greige dourado, o dourado da marca a permear a página */ --paper:#F5F1E6; --stone:#EAE2CF; --line:#DCD3BE; --text:#2A2926; --btn-bg:#BEAF87; --btn-fg:#121212; --btn-bg-hover:#A19276; } /* ---------- Decisões e Soluções — verde-profundo + latão ---------- As cores da 1.ª versão do template (evergreen #12352A + brass #B8873E). Secções em verde, botão em latão com texto quase-preto, o latão claro a brilhar sobre o verde. */ :root[data-tema="ds"]{ --champ:#A9762F; --champ-soft:#CBA35E; --ink:#12352A; --navy:#12352A; /* fundo: creme-sálvia, um véu verde-suave a condizer com o evergreen */ --paper:#F1F4EC; --stone:#E2E8D8; --line:#D2DAC6; --text:#1C221E; --btn-bg:#B8873E; --btn-fg:#1A1206; --btn-bg-hover:#CBA35E; } /* ═══════════ Barra de seleção (só na preview) ═══════════ Cores fixas de propósito: é um controlo, não faz parte do design. */ .preview-bar{ position:fixed;left:18px;bottom:18px;z-index:200; display:flex;align-items:center;gap:.45rem; background:#fff;border:1px solid #E5E0D5;border-radius:44px; padding:.5rem .8rem;box-shadow:0 14px 34px -14px rgba(16,27,36,.4); font-family:"Figtree",system-ui,sans-serif;max-width:calc(100vw - 24px); } .pv-label{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8A8577;padding:0 .2rem 0 .25rem;white-space:nowrap} .pv-swatch{ width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:none; cursor:pointer;padding:0;flex:none;display:flex;align-items:center;justify-content:center; transition:transform .15s ease, border-color .15s ease; } .pv-swatch>span{ width:20px;height:20px;border-radius:50%;background:var(--sw); box-shadow:inset 0 0 0 3px var(--sw2); } .pv-swatch:hover{transform:translateY(-2px)} .pv-swatch.is-active{border-color:var(--sw)} .pv-swatch:focus-visible{outline:2px solid #16232E;outline-offset:2px} @media (max-width:640px){ .pv-label{display:none} /* encostada à esquerda para não bater no botão flutuante do WhatsApp */ .preview-bar{left:10px;right:auto;transform:none;bottom:12px;padding:.4rem .45rem;gap:.3rem} .pv-swatch{width:30px;height:30px} .pv-swatch>span{width:19px;height:19px} } @media (prefers-reduced-motion:reduce){ .pv-swatch{transition:none} }