/* CentroPago Custom Styles */ /* Anti-FOUC: hide body until theme.js removes 'js' sentinel */ html.js body { visibility: hidden; } /* Landing nav mobile-menu slide-down animation */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-down { animation: fadeInDown 0.3s ease-out forwards; } /* Prevent layout shift from scrollbar appearing/disappearing between pages */ html { scrollbar-gutter: stable; } /* ========================================================================== SPA Shell — Anti-flicker + HTMX transitions ========================================================================== Layer 1 (blocking script in ): document.documentElement.classList.add('js') → hides #page-content immediately before any rendering happens Layer 2 (HTMX swap timing): hx-swap="innerHTML swap:100ms" gives htmx-swapping CSS time to fade out Layer 3 (htmx:afterSettle): Removes opacity:0 after first load, starting the CSS transition ========================================================================== */ /* Initial hide — script in adds 'js' class synchronously */ html.js #page-content { opacity: 0; } /* Content area: default transition (fade-in after settle) */ #page-content { transition: opacity 0.15s ease-in; will-change: opacity; } /* HTMX adds this class during the swap:Xms delay — triggers fade-out */ #page-content.htmx-swapping { opacity: 0; transition: opacity 0.08s ease-out; } /* Generic HTMX: fade-in for newly added elements (hx-get append, OOB swaps) */ .htmx-added { opacity: 0; } .htmx-added.htmx-settling { opacity: 1; transition: opacity 0.2s ease; } /* ========================================================================== Collapsible Sidebar ========================================================================== */ #app-sidebar { width: 256px; /* 16rem — expanded */ transition: width 0.22s cubic-bezier(0.4,0,0.2,1); overflow-x: hidden; flex-shrink: 0; } #app-sidebar.sidebar-collapsed { width: 68px; /* icon only */ } /* Nav labels: fade out when collapsing */ #app-sidebar .sidebar-label { transition: opacity 0.15s ease, max-width 0.22s ease; max-width: 180px; white-space: nowrap; overflow: hidden; } #app-sidebar.sidebar-collapsed .sidebar-label { opacity: 0; max-width: 0; } /* Section headings: hide when collapsed */ #app-sidebar .sidebar-section-title { transition: opacity 0.12s ease; } #app-sidebar.sidebar-collapsed .sidebar-section-title { opacity: 0; pointer-events: none; } /* Toggle button chevron rotation */ #sidebar-toggle-icon { transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); } #app-sidebar.sidebar-collapsed #sidebar-toggle-icon { transform: rotate(180deg); } /* Collapsed: reduce horizontal padding so icons are visible and centered */ #app-sidebar.sidebar-collapsed .glass-card { padding-left: 4px; padding-right: 4px; margin-left: 6px; margin-right: 6px; } #app-sidebar.sidebar-collapsed nav a { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } #app-sidebar.sidebar-collapsed .sidebar-toggle-header { justify-content: center; padding-left: 0; padding-right: 0; } /* Tooltip on hover when collapsed */ #app-sidebar.sidebar-collapsed nav a { position: relative; } #app-sidebar.sidebar-collapsed nav a .sidebar-label { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--brand-tooltip-bg); color: #f1f5f9; font-size: 0.7rem; font-weight: 700; white-space: nowrap; padding: 4px 10px; border-radius: 8px; opacity: 0; max-width: none; pointer-events: none; z-index: 100; transition: opacity 0.15s ease; } #app-sidebar.sidebar-collapsed nav a:hover .sidebar-label { opacity: 1; } /* SPA loading progress bar (top of viewport) */ #htmx-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--brand-progress-gradient); z-index: 9999; pointer-events: none; width: 0%; opacity: 0; } /* Active nav item indicator */ .nav-item-active { background-color: var(--brand-primary) !important; color: #fff !important; box-shadow: 0 4px 14px -3px var(--brand-nav-shadow); } .nav-item-active i { color: #fff !important; } /* Dark mode scrollbar */ .dark { color-scheme: dark; } .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: #0f172a; } .dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Dual-brand logo: CSS-first switching via data-brand="rl" on . Set synchronously by inline script before body renders — zero flash. .brand-logo-link has min-width sized to the wider brand name (RemindLedger) so the header never reflows when switching between brands. */ .brand-rl { display: none; } [data-brand="rl"] .brand-cp { display: none; } [data-brand="rl"] .brand-rl { display: inline-flex; } .brand-logo-link { min-width: 210px; } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); } .dark .glass-card { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(51, 65, 85, 0.5); } /* Period selector active state */ .active-period { background: white; color: var(--brand-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .dark .active-period { background: var(--brand-dark-card); color: var(--brand-primary); } /* ========================================================================== Sub-page headers inside the SPA shell ========================================================================== When a sub-page is loaded inside the dashboard shell, its internal
would create a second top-bar alongside the shell's own header. On desktop the sidebar handles navigation, so inner headers are hidden entirely. On mobile ( #spa-content > header, #main-wrapper #page-content > #spa-content > #main-wrapper > header { display: none !important; } } /* Mobile ( #spa-content > header, #main-wrapper #page-content > #spa-content > #main-wrapper > header { position: static !important; box-shadow: none !important; } } /* AI chat bubbles — used in ai-copilot.html and dashboard widget */ .chat-bubble { max-width: 80%; padding: 0.875rem 1rem; border-radius: 1.5rem; position: relative; font-size: 0.9rem; line-height: 1.5; } .chat-user { background-color: var(--brand-chat-user-bg); color: #fff; margin-left: auto; border-bottom-right-radius: 0.25rem; } .chat-ai { background-color: #f1f5f9; color: #1e293b; margin-right: auto; border-bottom-left-radius: 0.25rem; } .dark .chat-ai { background-color: #1e293b; color: #e2e8f0; }