/* ═══════════════════════════════════════════════════════ Bíblia Financeira · Navbar CSS (centralizado) Incluir em todas as páginas no . ─ root: href="css/navbar.css" ─ subpages: href="../css/navbar.css" ═══════════════════════════════════════════════════════ */ /* ── Mobile menu animation ── */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .mobile-menu.active { max-height: 1200px; } /* ── Shared navbar shell ── */ .bf-navbar { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .bf-nav-icon { font-size: 19px !important; line-height: 1; } /* ── Global typography baseline (professional readability) ── */ html { font-size: 100%; } body { font-size: 1rem; line-height: 1.6; } /* Minimum readable size for long-form UI text */ .text-xs { font-size: 0.8125rem !important; line-height: 1.45 !important; } /* Tailwind arbitrary tiny classes used in some pages */ [class*="text-[10px]"] { font-size: 0.8125rem !important; line-height: 1.45 !important; } [class*="text-[11px]"] { font-size: 0.8125rem !important; line-height: 1.45 !important; } [class*="text-[12px]"] { font-size: 0.8125rem !important; line-height: 1.45 !important; } /* Recurrent tiny utility values found in local page styles */ [style*="font-size:0.7rem"], [style*="font-size: 0.7rem"], [style*="font-size:0.75rem"], [style*="font-size: 0.75rem"] { font-size: 0.8125rem !important; line-height: 1.45 !important; } /* Inline tiny font-size declarations recurring in templates */ [style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 12px !important; } [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 13px !important; } [style*="font-size:12px"], [style*="font-size: 12px"] { font-size: 13px !important; } /* Standardize tooltip readability across all pages */ #bf-tooltip, .bf-tip::after { font-size: 13px !important; line-height: 1.45 !important; } /* Local badges and dense table headers that were set to 0.7rem */ .badge-blue, .badge-green, .badge-amber, .badge-red, .data-table th { font-size: 0.8125rem !important; line-height: 1.35 !important; } /* ── Dropdown section labels ── */ .dd-section { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; padding: 8px 16px 4px; } /* ── Dropdown separator ── */ .dd-sep { height: 1px; background: #e2e8f0; margin: 4px 8px; } .dark .dd-sep { background: #334155; } /* ── Dropdown animation ── */ .nav-dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; pointer-events: none; } /* Ponte invisível para o cursor passar do botão ao menu sem fechar */ .nav-dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav-dropdown-menu { padding-top: 10px !important; margin-top: -10px !important; } .nav-dropdown-menu > * { position: relative; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ── Chevron rotation ── */ .nav-dropdown-chevron { transition: transform 0.2s ease; } .nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); } /* ═══════════════════════════════════════ ACTIVE PAGE HIGHLIGHTING ═══════════════════════════════════════ */ /* Direct nav links (Aprender, Sobre) */ nav a.nav-link { position: relative; } nav a.nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #1990e6; border-radius: 99px; transition: width 0.2s ease; } nav a.nav-link:hover::after { width: 60%; } nav a.nav-link.active { color: #1990e6 !important; font-weight: 600; } nav a.nav-link.active::after { width: 60%; } .dark nav a.nav-link.active { color: #60a5fa !important; } /* Dropdown parent button — página filha está activa */ .nav-dropdown-btn.active-parent { color: #1990e6 !important; font-weight: 600; } .dark .nav-dropdown-btn.active-parent { color: #60a5fa !important; } .nav-dropdown-btn.active-parent .nav-dropdown-chevron { color: #1990e6; } .dark .nav-dropdown-btn.active-parent .nav-dropdown-chevron { color: #60a5fa; } /* Dropdown item — esta página exacta */ .nav-dropdown-menu a.active-item { color: #1990e6 !important; font-weight: 600; background: #eff6ff; border-radius: 12px; } .dark .nav-dropdown-menu a.active-item { color: #60a5fa !important; background: rgba(99, 162, 250, 0.08); } .nav-dropdown-menu a.active-item::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1990e6; margin-right: 6px; flex-shrink: 0; align-self: center; } .dark .nav-dropdown-menu a.active-item::before { background: #60a5fa; } /* Mobile menu — item ativo */ #mobile-menu a.mobile-active { color: #1990e6 !important; font-weight: 700; background: #eff6ff; } .dark #mobile-menu a.mobile-active { color: #60a5fa !important; background: rgba(99, 162, 250, 0.08); } /* ── Reusable info card ── */ .info-card { background: white; border: 1px solid #e2e8f0; border-radius: 1rem; transition: box-shadow 0.2s, border-color 0.2s; } .dark .info-card { background: #1e293b; border-color: #334155; } .info-card:hover { box-shadow: 0 4px 16px rgba(25, 144, 230, 0.08); border-color: #93c5fd; } .dark .info-card:hover { border-color: #1990e6; } /* ── Tooltip consistency: evitar ALL CAPS herdado de labels ── */ .bf-tip, .bf-tip::after { text-transform: none !important; letter-spacing: normal !important; } /* ── Footer: manter marca visivel e esconder colunas de links no mobile ── */ @media (max-width: 767px) { .footer-links-grid > div:nth-child(2), .footer-links-grid > div:nth-child(3) { display: none; } .footer-links-grid > div:nth-child(4) h4 { display: none; } .footer-links-grid > div:nth-child(4) ul li { display: none; } .footer-links-grid > div:nth-child(4) ul li:nth-last-child(-n+3) { display: list-item; } } /* ── Hide page sidebars on mobile ── */ @media (max-width: 1023px) { main aside { display: none; } }