/** * Critical CSS - First paint / above-the-fold * Load this file BLOCKING in before any other CSS. * Ensures navbar and main layout render correctly on initial load. */ /* ========================================================================== CSS Variables ========================================================================== */ :root { --primary-color: #7D19FF; --secondary-color: #F4CA81; --background-color: #1a1b1e; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.6); --card-bg: #25262b; --hover-bg: #2c2e33; --border-color: #2c2e33; } /* ========================================================================== Base ========================================================================== */ html, body { background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 0; min-height: 100vh; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ========================================================================== Header & Navbar - Constrained width, centered, side margins visible ========================================================================== */ .header-container { position: fixed; top: 0; left: 0; right: 0; height: 64px; padding-bottom: 0.75rem; box-sizing: content-box; z-index: 300; width: 100%; background-color: transparent; display: flex; justify-content: center; align-items: stretch; } .header-container .navbar { width: 100%; max-width: 1400px; height: 64px; padding: 0; margin: 0; flex: 0 1 auto; background: transparent !important; background-color: transparent !important; border-bottom: none; position: relative; display: flex; align-items: center; overflow: visible; } .header-container .navbar .container-fluid, .navbar > .container-fluid { max-width: 1400px; width: 100%; margin: 0 auto; padding-left: 2.5rem; padding-right: 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; overflow: visible; min-height: 64px; } @media (max-width: 768px) { .header-container .navbar .container-fluid, .navbar > .container-fluid { padding-left: 1rem; padding-right: 1rem; } } /* Navbar logo */ .navbar-brand.logo-bg { display: block; width: 200px; height: 40px; min-width: 120px; min-height: 32px; padding: 0 !important; margin: 0 !important; background-color: transparent !important; background-image: url("../images/communityone-logo.ba7f5e42e83a.png"); background-size: contain; background-repeat: no-repeat; background-position: center left; } .navbar-brand { padding: 0 !important; margin: 0 !important; } /* Hamburger toggler - stable position before Bootstrap loads */ .navbar-toggler { border: none; background: transparent; padding: 8px; color: #fff; cursor: pointer; flex-shrink: 0; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Desktop: show nav, hide hamburger, center Features/Resources/Listing */ @media (min-width: 769px) { .navbar-expand-md .navbar-collapse { display: flex !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; flex-wrap: nowrap !important; flex: 1; } .navbar-toggler { display: none !important; } .navbar .container-fluid { position: relative; } .navbar .mobile-menu-container { display: flex !important; position: static; min-height: 64px; width: 100%; align-items: center; } /* Features, Resources, Listing - centered between logo and mobile-menu-bottom (position relative to container-fluid) */ .navbar .mobile-menu-top { position: absolute !important; left: 50%; transform: translateX(-50%); } .navbar .mobile-menu-top .navbar-nav { gap: 0.25rem; } .navbar .mobile-menu-bottom { position: absolute !important; right: 1rem; } .navbar .mobile-menu-bottom .navbar-nav > li { margin-left: 0.75rem !important; } .navbar .mobile-menu-bottom .navbar-nav > li:first-child { margin-left: 0 !important; } } @media (max-width: 768px) { .navbar-brand.logo-bg { width: 180px; height: 32px; } } /* Nav items - horizontal, single line */ .navbar-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .navbar .mobile-menu-container { display: flex; align-items: center; flex-wrap: nowrap; } @media (min-width: 769px) { .navbar .mobile-menu-top .navbar-nav, .navbar .mobile-menu-bottom .navbar-nav { flex-direction: row !important; flex-wrap: nowrap !important; } } .navbar-icon-svg { flex-shrink: 0; display: inline-block; vertical-align: middle; } @media (min-width: 769px) { .navbar .nav-item.dropdown .dropdown-toggle, .navbar .mobile-menu-bottom .nav-item { display: flex; align-items: center; } .navbar .dropdown-toggle img.rounded-circle { width: 32px; height: 32px; object-fit: cover; } } /* Nav links - Features, Resources, Listing */ .navbar .nav-link, .navbar .mobile-menu-top .nav-link, .navbar .mobile-menu-top .dropdown-toggle { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; padding: 0.5rem 0.3rem !important; font-weight: 500 !important; font-size: 0.9rem; } .navbar .nav-link:hover, .navbar .mobile-menu-top .nav-link:hover, .navbar .mobile-menu-top .dropdown-toggle:hover { color: #fff !important; } /* ========================================================================== Layout ========================================================================== */ /* Layout - prevent CLS when style.css loads */ .wrapper { min-height: 100vh; background-color: var(--background-color); display: flex; flex-direction: column; } .wrapper > .container-fluid { padding-top: 84px; /* 64px header + 0.75rem bottom spacing + 8px top margin */ flex: 1; display: flex; flex-direction: column; padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5); padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5); } .wrapper > .container-fluid > .row { flex: 1; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .main-content { background-color: var(--background-color); } /* ========================================================================== Utilities (minimal, for above-fold) ========================================================================== */ .d-flex { display: flex !important; } .d-block { display: block !important; } .d-none { display: none !important; } .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .align-items-center { align-items: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } /* ========================================================================== Breadcrumb ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; background-color: transparent; } .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-right: 0.5rem; color: #6c757d; } .breadcrumb-item a { color: #6c757d; text-decoration: none; } .breadcrumb-item.active { color: #fff; } /* ========================================================================== Buttons (minimal for above-fold) ========================================================================== */ .btn { display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.375rem; text-decoration: none; } .btn-primary { color: #fff; background-color: #7d19ff; border-color: #7d19ff; } /* ========================================================================== Hide elements not needed for first paint ========================================================================== */ .collapse:not(.show) { display: none; } .modal { display: none; } .dropdown-menu:not(.show) { display: none; } /* Announcement detail layout rules are in critical_announcement.css */