/* ========================================================================== Barra interna dos flogs (v20y) — visual do header da home, porém: - SEM menu (institucional/termos/faq/contato); - guest: só "Entrar"; logado: ações do flog (postar foto, painel, ajuda, sair). Tudo namespaced em .fvbar pra NÃO colidir com o Bootstrap/main.css do flog. Auto-contido (não depende do app.css). Tema via [data-theme] no . ========================================================================== */ .fvbar { --wine: #552B2D; --pink: #D73570; --orange: #E76F35; --gold: #F2A43A; --bg: rgba(251, 247, 242, .82); --surface: rgba(255, 255, 255, .78); --surface-2: #F6EEE8; --text: #21191A; --text-soft: #6F6062; --border: rgba(85, 43, 45, .13); --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; position: sticky; top: 0; left: 0; right: 0; z-index: 1000; background: var(--bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; font-family: var(--font); transition: .22s ease; } [data-theme="dark"] .fvbar { --bg: rgba(15, 16, 22, .80); --surface: rgba(24, 26, 37, .76); --surface-2: #202333; --text: #F5EEF0; --text-soft: #C7B8BC; --border: rgba(255, 255, 255, .10); } /* o flog (main.css) empurra o body 40px pra navbar fixa antiga; nossa barra é sticky (fica no fluxo), então zeramos essa margem só nas páginas de flog. */ body { margin-top: 0 !important; } .fvbar * { box-sizing: border-box; } .fvbar.is-scrolled { border-color: var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); } .fvbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; min-height: 60px; display: flex; align-items: center; gap: 18px; transition: min-height .22s ease; } .fvbar.is-scrolled .fvbar-inner { min-height: 52px; } /* ---- marca ---- */ .fvbar-brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .fvbar-logo { height: 40px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 8px 16px rgba(85, 43, 45, .14)); transition: height .22s ease; } .fvbar.is-scrolled .fvbar-logo { height: 32px; } .fvbar-logo--dark { display: none; } [data-theme="dark"] .fvbar-logo--light { display: none; } [data-theme="dark"] .fvbar-logo--dark { display: block; } /* ---- área de ações (direita) ---- */ .fvbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .fvbar-links { display: flex; align-items: center; gap: 6px; } /* mesma fonte/estética dos links de menu da home (.nav-links a) */ .fvbar-link { padding: 10px 12px; border-radius: 999px; color: var(--text-soft); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: .18s ease; } .fvbar-link:hover { color: var(--text); background: var(--surface-2); } .fvbar-link.is-me { color: var(--wine); font-weight: 800; } [data-theme="dark"] .fvbar-link.is-me { color: var(--gold); } /* ---- botões (copiados do .btn da home) ---- */ .fvbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: .18s ease; } .fvbar-btn--primary { color: #fff; background: linear-gradient(135deg, var(--pink), var(--orange)); box-shadow: 0 12px 28px rgba(215, 53, 112, .22); } .fvbar-btn--ghost { color: var(--text); background: var(--surface); border-color: var(--border); } .fvbar-btn--primary:hover { filter: brightness(1.05); } .fvbar-btn--ghost:hover { border-color: var(--text-soft); } /* ---- botão de tema ---- */ .fvbar-toggle { width: 42px; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; color: var(--text); background: transparent; cursor: pointer; font-size: 17px; line-height: 1; transition: .16s ease; } .fvbar-toggle:hover { background: var(--surface-2); } /* ---- dropdown "Entrar" (guest) ---- */ .fvbar-login-wrap { position: relative; } .fvbar-login { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; padding: 16px; background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(85, 43, 45, .18); display: none; flex-direction: column; gap: 10px; } .fvbar-login.is-open { display: flex; } .fvbar-input { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; } .fvbar-login .fvbar-btn { width: 100%; } .fvbar-login-help { margin: 2px 0 0; font-size: 12.5px; color: var(--text-soft); text-align: center; } .fvbar-login-help a { color: var(--wine); font-weight: 700; text-decoration: none; } [data-theme="dark"] .fvbar-login-help a { color: var(--gold); } /* ---- hamburger + painel mobile ---- */ .fvbar-burger { display: none; width: 42px; min-width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 18px; } .fvbar-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 22px 16px; border-top: 1px solid var(--border); } .fvbar-mobile.is-open { display: flex; } .fvbar-mobile a, .fvbar-mobile .fvbar-link { padding: 10px 8px; color: var(--text); font-weight: 700; text-decoration: none; border-radius: 10px; } @media (max-width: 820px) { .fvbar-links { display: none; } .fvbar-burger { display: inline-flex; } .fvbar-logo { height: 34px; } } /* ========================================================================== BLINDAGEM — os flogs permitem CSS próprio do usuário (style.css) + têm CSS legado (`body,td,th{font...}`, `a:link{color}`) com especificidade/posição que vazam fonte, tamanho e cor pro menu. A barra NÃO pode ser afetada. Forçamos a tipografia e as cores da .fvbar com !important (única forma confiável contra CSS arbitrário do usuário). ========================================================================== */ .fvbar, .fvbar * { font-family: var(--font) !important; font-style: normal !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; text-decoration: none !important; } .fvbar .fvbar-link, .fvbar .fvbar-mobile a { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; } .fvbar .fvbar-link.is-me, .fvbar .fvbar-mobile a.is-me { font-weight: 800 !important; } .fvbar .fvbar-btn { font-size: 14px !important; font-weight: 800 !important; } .fvbar .fvbar-input { font-size: 14px !important; font-weight: 400 !important; } .fvbar .fvbar-login-help { font-size: 12.5px !important; font-weight: 400 !important; } /* cores (vencem o a:link legado e o style.css do usuário) */ .fvbar .fvbar-link { color: var(--text-soft) !important; } .fvbar .fvbar-link:hover { color: var(--text) !important; } .fvbar .fvbar-link.is-me { color: var(--wine) !important; } [data-theme="dark"] .fvbar .fvbar-link.is-me { color: var(--gold) !important; } .fvbar .fvbar-mobile a { color: var(--text) !important; } .fvbar .fvbar-mobile a.is-me { color: var(--wine) !important; } .fvbar .fvbar-login-help a { color: var(--wine) !important; } [data-theme="dark"] .fvbar .fvbar-login-help a { color: var(--gold) !important; } /* botões: "Criar flog" é — o a:link legado roubaria a cor; forçamos */ .fvbar .fvbar-btn--primary { color: #fff !important; } .fvbar .fvbar-btn--ghost { color: var(--text) !important; }