/* header-compact.css — Header compacto no scroll (nível 2). O toggle do estado (data-compact="true"/"false" em [data-site-header] ao passar de 24px de scroll, throttled) já existe em FT.headerScroll (wwwroot/js/app.js) e as transições de altura do nav / escala do logo / sombra já vivem em app.src.css (.ft-site-header[data-compact='true'] e afins). Este arquivo cobre só a peça que faltava: esconder o wordmark ("facilita.tools") em telas pelo script síncrono do (_Layout), antes do paint. */ .ft-announce-off #ft-announce { display: none; } .ft-announce-row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; padding-right: 2rem; /* reserva o canto do botão de fechar */ } .ft-announce-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; min-width: 0; font-size: 13px; color: rgb(var(--color-text-primary)); text-decoration: none; } .ft-announce-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ft-announce-text strong { color: rgb(var(--color-voice-brand)); font-weight: 600; } .dark .ft-announce-text strong { color: #BC8CFF; /* --color-secondary dark: violeta legível sobre fundo escuro */ } .ft-announce-cta { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; font-weight: 600; color: rgb(var(--color-voice-brand)); } .dark .ft-announce-cta { color: #BC8CFF; } .ft-announce-link:hover .ft-announce-cta svg { transform: translateX(2px); } .ft-announce-cta svg { transition: transform 160ms ease; } .ft-announce-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: rgb(var(--color-text-muted)); transition: color 150ms ease, background-color 150ms ease; } .ft-announce-close:hover { color: rgb(var(--color-text-primary)); background: rgb(var(--color-text-primary) / 0.06); } .ft-announce-close:focus-visible { outline: 2px solid rgb(var(--color-voice-brand)); outline-offset: 1px; } /* ── Header camaleão (home Voice-first) ───────────────────────────────────── Enquanto a folha creme do Voice está sob o header, o chrome do site veste o papel do produto. É uma troca de variáveis: fundo, bordas, textos, busca, botões e a faixa de anúncio adaptam sozinhos — e o acento vira o violeta do Voice. A classe é aplicada/removida por voice-stage.js conforme o scroll; a transição de fundo/borda já existente em .ft-site-header faz o morph. */ .ft-site-header.ft-header-voice { /* Fundo SÓLIDO: o bg-background/85 translúcido do header deixa o body escuro vazar por trás no dark mode — creme a 85% sobre preto virava um cinza sujo. !important: estado terminal do header, nada pode repintar por cima. */ background-color: rgb(247 245 241 / 0.98) !important; --color-background: 247 245 241; /* papel do Voice */ --color-surface: 255 255 255; --color-elevated: 239 237 231; --color-border: 229 225 216; /* linhas #E5E1D8 */ --color-text-primary: 27 26 23; /* tinta #1B1A17 */ --color-text-muted: 107 103 94; /* #6B675E */ --color-primary: 86 70 229; /* acento = violeta da marca */ --color-accent: 86 70 229; --color-btn-bg: 27 26 23; --color-btn-text: 247 245 241; --color-surface-hover: 239 237 231; --color-surface-active: 231 227 218; } /* No dark, o violeta do anúncio clareia via .dark; sobre o papel volta ao tom pleno. */ .ft-site-header.ft-header-voice .ft-announce-text strong, .ft-site-header.ft-header-voice .ft-announce-cta { color: rgb(var(--color-voice-brand)); }