/** * Demo Mode Compact Header * Task #128910: Collapse nav + toggle into one bar for demo mode * * Shows ONE horizontal bar with: * [Toggle switch] [Page title] [Login] [Start Free Trial] [← Back] */ /* Demo mode compact header */ .demo-mode-compact-header { position: sticky; top: 0; left: 280px; /* FIX #199462: Start after sidebar to avoid overlapping logo */ right: 0; z-index: 10000; background: #1a1a1a; border-bottom: 1px solid #2a2a2a; padding: 12px 24px; display: none; /* Hidden by default, shown by demo-mode-header.js */ align-items: center; gap: 16px; flex-wrap: wrap; } /* Show in demo mode */ body[data-demo-mode="true"] .demo-mode-compact-header { display: flex; } /* Hide original header in demo mode */ body[data-demo-mode="true"] .header { display: none; } /* Toggle switch (inline, compact) */ .demo-header-toggle { display: flex; gap: 4px; background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 100px; padding: 4px; } .demo-header-toggle-btn { padding: 6px 16px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #A8A29E; border-radius: 100px; cursor: pointer; transition: all 0.3s; background: none; border: none; outline: none; white-space: nowrap; } .demo-header-toggle-btn:hover { color: #F5F5F4; } .demo-header-toggle-btn.active { background: linear-gradient(135deg, #F59E0B, #FBBF24); color: #0A0A0A; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); } /* Page title */ .demo-header-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: #e0e0e0; margin: 0; flex: 1; } /* Action buttons */ .demo-header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; } .demo-header-btn { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 8px; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; outline: none; white-space: nowrap; } .demo-header-btn.login { color: #A8A29E; background: transparent; border: 1px solid transparent; } .demo-header-btn.login:hover { color: #F5F5F4; } .demo-header-btn.signup { color: #0A0A0A; background: linear-gradient(135deg, #F59E0B, #FBBF24); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .demo-header-btn.signup:hover { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); transform: translateY(-1px); } .demo-header-btn.back { color: #e0e0e0; background: #252525; border: 1px solid #2a2a2a; } .demo-header-btn.back:hover { background: #2a2a2a; } /* Mobile responsive */ @media (max-width: 768px) { .demo-mode-compact-header { left: 0; /* FIX #199462: Reset to full width on mobile (sidebar is hidden) */ padding: 10px 16px; gap: 10px; } .demo-header-toggle-btn { padding: 5px 12px; font-size: 12px; } .demo-header-title { font-size: 18px; width: 100%; order: -1; } .demo-header-actions { width: 100%; justify-content: flex-end; } .demo-header-btn { padding: 7px 14px; font-size: 12px; } } /* FIX #182567: Hide dashboard's own toggle, exit bar, and compact header when embedded in landing page iframe. The parent page (index.html) already has the toggle — dashboard's toggle creates a duplicate. Uses html.in-iframe (set synchronously in ) for instant hiding before first paint. */ html.in-iframe .view-toggle-container, body.in-iframe .view-toggle-container, html.in-iframe .mobile-demo-exit, body.in-iframe .mobile-demo-exit, html.in-iframe .demo-mode-compact-header, body.in-iframe .demo-mode-compact-header, html.in-iframe .use-case-ticker, body.in-iframe .use-case-ticker { display: none !important; /* FIX #199462: Hide dashboard ticker when in iframe - landing page ticker is enough */ } /* When in iframe, hide parent nav + ensure content fills viewport (no black space below) */ body.in-iframe, html.in-iframe body { padding-top: 0 !important; min-height: 100vh !important; /* Fill full viewport height */ height: auto !important; overflow-y: auto !important; /* Allow scrolling if content is tall */ } /* FIX #160764: Ensure main content area fills viewport in demo mode */ body.in-iframe .main-content { min-height: 100vh !important; height: auto !important; } /* FIX #160188 + #160764: Ensure sidebar stays sticky in iframe and doesn't allow content bleed-through */ body.in-iframe .sidebar { position: fixed !important; /* CRITICAL: Must stay fixed even in iframe context */ left: 0 !important; top: 0 !important; bottom: 0 !important; background: #141414 !important; /* Solid background, no transparency */ z-index: 10000 !important; /* Above all content */ } /* Mobile: Add backdrop behind sidebar when open */ @media (max-width: 768px) { body.in-iframe.sidebar-open::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 9999; pointer-events: auto; } body.in-iframe.sidebar-open .sidebar { z-index: 10000; } }