/* * Sinch Voice Ebook - theme toggle button. * * Botao discreto no navbar (desktop) e no offcanvas (mobile). Estilo * alinhado com o design system Sinch: bordas sutis, hover suave, focus * acessivel. Ícone sun em modo dark (clique vira light) e ícone moon em * modo light (clique volta pra dark). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid currentColor; background-color: transparent; color: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.08); transform: translateY(-1px); } [data-ebook-mode="light"] .theme-toggle:hover { background-color: rgba(0, 0, 0, 0.06); } .theme-toggle:focus-visible { outline: 2px solid var(--sinch-primary, #FFE97A); outline-offset: 2px; } .theme-toggle svg { width: 20px; height: 20px; display: block; } /* Default (dark mode): mostra sun (proxima acao = ir pra light). * Especificidade dupla pra ganhar de regras genericas do design system Sinch. */ .theme-toggle .theme-toggle__sun { display: block; } .theme-toggle .theme-toggle__moon { display: none; } /* Light mode ativo: mostra moon (proxima acao = voltar pra dark) */ [data-ebook-mode="light"] .theme-toggle .theme-toggle__sun { display: none; } [data-ebook-mode="light"] .theme-toggle .theme-toggle__moon { display: block; } /* Wrapper no offcanvas mobile: alinha junto com botoes CTA */ .theme-toggle-mobile { display: flex; justify-content: flex-start; margin-bottom: 0.5rem; } /* Col dedicada do toggle no desktop: separa visualmente dos CTAs com gap * e linha vertical sutil. Fica colado na borda direita do container. */ .theme-toggle-col { display: flex; align-items: center; padding-left: 1rem; margin-left: 0.75rem; border-left: 1px solid rgba(255, 255, 255, 0.16); } [data-ebook-mode="light"] .top-nav .theme-toggle-col { border-left-color: rgba(255, 255, 255, 0.16); } /* * Body bg fallback enquanto o JS nao carregou. Reage ao data-ebook-mode * aplicado pelo inline script no , evitando flash branco-preto * brutal na primeira carga em modo light. */ html[data-ebook-mode="light"] { background-color: #fff; } html[data-ebook-mode="light"] body { background-color: #fff; color: #14181C; }