/* Tokens de cor -- rollback do design system "Rococo Romantic Narrative" (não funcionou, ver histórico): de volta ao dourado/laranja #ffb400 já usado no resto do site (ver wp-content/themes/lp/lpstyles.css), com cinza neutro suave no lugar do marrom/rosa do Rococo. Chrome (topbar, sidebar, carrossel, modais) continua claro/arredondado -- isso funcionou e foi pedido pra manter, só a paleta/tipografia é que voltaram atrás. --osd-chip-* é o par neutro (chip em repouso/hover). */ :root { --osd-accent: #ffb400; --osd-accent-strong: #b9840a; --osd-accent-soft: rgba(255, 180, 0, 0.22); --osd-accent-softer: rgba(255, 180, 0, 0.12); --osd-panel-bg: rgba(250, 250, 249, 0.9); --osd-panel-border: rgba(20, 20, 20, 0.08); --osd-modal-bg: #fafaf9; --osd-ink: #1c1c1c; --osd-ink-dim: rgba(20, 20, 20, 0.6); --osd-chip-bg: rgba(20, 20, 20, 0.045); --osd-chip-bg-hover: rgba(20, 20, 20, 0.09); --osd-chip-border: rgba(20, 20, 20, 0.09); --osd-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Vocabulário de forma dos botões -- documentado aqui (2026-08-31, revisão de estilo/usabilidade) porque nunca tinha ficado escrito em lugar nenhum, só existia como convenção implícita espalhada pelo arquivo. NÃO é uma variável CSS (os valores já estão hardcoded em cada seletor -- reescrever tudo pra usar var() é risco maior que o benefício agora) -- é a REGRA que decide qual raio um botão novo deve usar, escopada ao chrome COMPARTILHADO (Editor+Visita ou só Visita; telas 100% Editor -- modais de formulário, lista de Elementos, "Gerenciar galeria" -- continuam com o próprio padrão utilitário mais compacto de propósito, não entram nesta regra): - PILL (border-radius: 999px) = ação de fluxo/toggle -- Próximo, Início, Tour/Livre, Ferramentas, Fechar do certificado. - CÍRCULO (border-radius: 50%) = ação isolada flutuando sobre o canvas, sem vizinho no mesmo grupo -- Recentralizar, Next/Prev, voltar do topbar. - CHIP QUADRADO (border-radius: 10px, .osd-btn/.osd-btn-square) = controle dentro de um grupo/grade da toolbar -- zoom, rotação, ajustar à tela, créditos, elementos. Único ajuste que este vocabulário pediu ao ser escrito: .osd-topbar-back (voltar) era 8px solto, virou círculo (família certa -- ação isolada). */ html, body { margin: 0; padding: 0; height: 100%; /* Rede de segurança contra scroll horizontal de página -- este é um app de tela cheia (.viewer-page já é 100dvh/overflow:hidden por conta própria), nunca um documento rolável de verdade. Bug real reportado (2026-09-02, ver .osd-intro-carousel/max-width acima): controles flutuantes de um modal escapando um pouco além da área visível abriam uma barra de scroll horizontal na PÁGINA (não só no cartão) -- overflow-x:hidden aqui garante que isso nunca mais acontece, não importa qual elemento no futuro escape por engano. */ overflow-x: hidden; background: #111; /* Karla -- mesma fonte de UI do resto do site (ver em index.php), pedido explícito de algo "mais forte, legível, aparente" que o system-ui genérico. Fallback pro stack antigo se a webfont não carregar. */ font-family: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .viewer-page { display: flex; flex-direction: column; width: 100%; /* 100vh no mobile conta a área embaixo da barra de endereço/navegação do navegador, mesmo quando ela some -- estoura o layout, corta ou força scroll. 100dvh é a altura real visível no momento; onde não tem suporte (raro hoje), cai de volta pro 100vh acima por cascata, sem precisar de JS/plugin nenhum. */ height: 100vh; height: 100dvh; overflow: hidden; } /* --- Topbar de branding: barra sólida fixa no topo, empurra o viewport pra baixo em vez de sobrepor a imagem --- */ .osd-topbar { flex: 0 0 auto; height: 56px; display: flex; align-items: center; /* padding-top extra reserva espaço pro notch/ilha dinâmica (iPhone etc.) -- só some via meta viewport-fit=cover; em telas sem notch env() resolve pra 0 e não muda nada. */ padding: env(safe-area-inset-top, 0px) 20px 0 20px; box-sizing: content-box; /* Vidro fosco claro -- coadjuvante, não compete com a imagem embaixo (era um azul petróleo opaco provisório, ver histórico). */ background: rgba(253, 250, 245, 0.92); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid var(--osd-panel-border); z-index: 20; /* Mesmo motivo do touch-action em .osd-viewport -- fora da árvore dela (é irmã, não filha), então precisa da própria regra pra não deixar o navegador fazer pinch-zoom nativo ao tocar a topbar. */ touch-action: pan-y; } /* Link "Voltar" -- leva pro site principal, fora do arqviewer. Fica antes do logo, com respiro pra não colar nele. */ .osd-topbar-back { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 10px; /* Era 8px (squircle) -- único ícone isolado do app fora da família "círculo" (Recentralizar, Next/Prev, ver nota de vocabulário de forma perto do :root). Alinhado -- é uma ação isolada, não um chip de grupo. */ border-radius: 50%; color: var(--osd-ink-dim); transition: background 0.15s ease, color 0.15s ease; } .osd-topbar-back svg { width: 18px; height: 18px; display: block; } .osd-topbar-back:hover { background: var(--osd-chip-bg-hover); color: var(--osd-ink); } .osd-topbar-back:focus-visible { outline: 2px solid var(--osd-accent); outline-offset: 2px; } .osd-topbar-logo { min-height: 40px; display: flex; /* Coluna -- texto em cima, chevron embaixo (só aparece com o painel "Sobre" aberto, ver .osd-topbar-logo-chevron abaixo). Centralizado nos dois eixos -- a topbar (56px) tem folga de sobra pra essa coluna, sem precisar de altura fixa maior. */ flex-direction: column; align-items: center; justify-content: center; /* Reset de