/* NeoSense — Pure CSS theme overrides for Bootstrap 5.3+ Place AFTER bootstrap.min.css HTML root supports theming: or "dark" */ /* ========= Brand tokens ========= */ :root { /* Brand palette */ --ns-primary: #0f2a4b; /* midnight navy */ --ns-secondary: #6b7a90; /* slate */ --ns-info: #10bce7; /* cyan accent */ --ns-success: #16a34a; --ns-warning: #f59e0b; --ns-danger: #dc2626; --ns-light: #f8fafc; --ns-dark: #0b1220; /* Bootstrap color vars */ --bs-primary: var(--ns-primary); --bs-secondary: var(--ns-secondary); --bs-info: var(--ns-info); --bs-success: var(--ns-success); --bs-warning: var(--ns-warning); --bs-danger: var(--ns-danger); --bs-light: var(--ns-light); --bs-dark: var(--ns-dark); /* Base */ --bs-body-bg: #ffffff; --bs-body-color:#0b1220; --bs-link-color: var(--bs-primary); /* Radii (Bootstrap components read these) */ --bs-border-radius: 0.75rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1rem; /* Component-specific radii (supported by BS 5.3) */ --bs-btn-border-radius: 1.5rem; --bs-card-border-radius: 1.25rem; --bs-dropdown-border-radius: var(--bs-border-radius); --bs-modal-border-radius: var(--bs-border-radius-lg); --bs-badge-border-radius: 10rem; /* Shadows */ --ns-shadow: 0 8px 30px rgba(15,42,75,.08); --ns-shadow-lg: 0 12px 40px rgba(15,42,75,.12); /* Cards / surfaces */ --ns-card-bg: #ffffff; /* Muted text */ --ns-muted: #6b7a90; } /* ========= Optional Dark Theme ========= */ html[data-bs-theme="dark"] { --bs-body-bg: #0b1220; --bs-body-color: #e6e8ee; --bs-link-color: var(--ns-info); --ns-card-bg: #0f1a2a; --ns-muted: #9aa4b2; } /* ========= Buttons ========= */ .btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,0)); border: 0; box-shadow: 0 4px 14px rgba(15,42,75,.20); } .btn-primary:hover, .btn-primary:focus { box-shadow: 0 6px 18px rgba(15,42,75,.28); } /* ========= Cards ========= */ .card.ns-card { background-color: var(--ns-card-bg); box-shadow: var(--ns-shadow); border: 1px solid rgba(15,42,75,.06); } /* ========= “Glass” utility (hero, trust center) ========= */ .ns-glass { background: rgba(255,255,255,.6); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border: 1px solid rgba(15,42,75,.08); border-radius: 1.25rem; } html[data-bs-theme="dark"] .ns-glass { background: rgba(15,26,42,.5); border-color: rgba(255,255,255,.08); } /* ========= Feature list (icon bullets) ========= */ .ns-feature { display: flex; gap: .75rem; align-items: flex-start; } .ns-feature .ns-bullet { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: rgba(16,188,231,.12); display: grid; place-items: center; flex: 0 0 auto; } .ns-feature .ns-bullet i, .ns-feature .ns-bullet .bi { /* supports Bootstrap Icons */ font-size: .9rem; color: var(--ns-info); } /* ========= KPI tag ========= */ .ns-kpi { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(16,188,231,.1); color: #05556a; font-weight: 600; } /* ========= Sections / spacing ========= */ .section { padding: clamp(2.5rem, 5vw, 5rem) 0; } /* ========= Footer ========= */ footer { border-top: 1px solid rgba(15,42,75,.08); } /* ========= Accessible focus rings ========= */ :focus-visible { outline: 3px solid rgba(16,188,231,.65); outline-offset: 2px; } /* ========= Subtle helper styles ========= */ /* Light text tone for secondary copy */ .text-secondary { color: var(--ns-muted) !important; } /* Optional: hero background helper (if you want a quick gradient) */ .ns-hero-bg { background: radial-gradient(1200px 400px at 20% -20%, rgba(16,188,231,.18), transparent), linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); } html[data-bs-theme="dark"] .ns-hero-bg { background: radial-gradient(1200px 400px at 20% -20%, rgb(4, 41, 50), transparent), linear-gradient(180deg, #000000 0%, #070a0c 100%); } /* Optional: emphasize a “featured” card with a primary border */ .ns-featured { border: 2px solid var(--bs-primary) !important; } /* Optional: section header row spacing */ .ns-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; } /* Optional: link styles in dark for better contrast */ html[data-bs-theme="dark"] a:not(.btn) { color: var(--ns-info); } html[data-bs-theme="dark"] a:not(.btn):hover { opacity: .9; } /* Keep nav a bit crisper on scroll (works with .sticky-top) */ .navbar.bg-body { backdrop-filter: saturate(140%) blur(6px); z-index: 9999; } /* .navbar .nav-item.dropdown.dropdown-mega.show .dropdown-menu.mega { right: 0; left: auto; transform: none; } */