:root { --overlay-color: rgba(0, 0, 0, 0.3); --font-family: Arial, sans-serif; --text-color: #ffffff; --btn-bg: #007bff; --btn-bg-hover: #0056b3; } * { margin: 0; padding: 0; box-sizing: border-box; } /* IMPORTANTE: não colocar background-color aqui. O background do vira o "canvas background" da página, pintado ANTES de qualquer z-index negativo — isso escondia o vídeo/imagem de fundo completamente. */ body, html { width: 100%; height: 100%; overflow: hidden; font-family: var(--font-family); color: var(--text-color); } /* Vídeo com zoom (cover) como antes, deslocado para a direita pra abrir espaço visual pro menu lateral esquerdo */ #bg-video { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; object-fit: cover; object-position: 70% center; /* desloca o "foco" do crop para a direita */ z-index: -1; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-color); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; z-index: 1; pointer-events: none; } .overlay > * { pointer-events: auto; } h1 { font-size: 2.5rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } p { font-size: 1.2rem; margin-bottom: 1.5rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } button { padding: 12px 24px; font-size: 1rem; font-weight: bold; color: var(--text-color); background-color: var(--btn-bg); border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: var(--btn-bg-hover); } /* Botão de mutar/desmutar: redondo e com estilo glass, igual ao menu. position:fixed tira ele do fluxo centralizado da .overlay. */ #toggle-audio-btn { position: fixed; top: 24px; left: 24px; width: 64px; height: 64px; padding: 0; font-size: 1.6rem; color: var(--text-color); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } #toggle-audio-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); transform: scale(1.06); } #toggle-audio-btn:active { transform: scale(0.97); } #debug-msg { position: fixed; bottom: 10px; left: 10px; font-size: 0.85rem; color: #ff6666; background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 4px; max-width: 90%; z-index: 10; display: none; line-height: 1.4; } /* Menu lateral com estilo "glass" (vidro fosco) */ .side-menu { position: fixed; top: 50%; left: 140px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 5; } .menu-btn { padding: 34px 64px; font-size: 2rem; font-weight: 600; letter-spacing: 0.5px; color: var(--text-color); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 18px; cursor: pointer; text-align: center; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .menu-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); transform: translateX(6px); } .menu-btn:active { transform: translateX(6px) scale(0.97); }