/* Core palette */ :root { --space-950: #0b0f14; --space-900: #10161f; --space-800: #151c28; --space-700: #1f2633; --space-600: #2a3240; --space-500: #3a4353; --space-200: #9aa4b2; --space-100: #cbd5e1; --space-50: #f1f5f9; --radius-sm: 6px; --radius-md: 10px; } * { box-sizing: border-box; } body.space-body { margin: 0; min-height: 100vh; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background-color: var(--space-950); color: var(--space-50); position: relative; overflow-x: hidden; } body.space-body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='0.08'%3E%3Ccircle cx='18' cy='22' r='1'/%3E%3Ccircle cx='62' cy='14' r='1'/%3E%3Ccircle cx='96' cy='38' r='1'/%3E%3Ccircle cx='30' cy='70' r='1'/%3E%3Ccircle cx='78' cy='86' r='1'/%3E%3Ccircle cx='110' cy='102' r='1'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0.7; pointer-events: none; z-index: 0; } .site-header { background-color: rgba(11, 15, 20, 0.94); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; } .navbar-brand { letter-spacing: 0.04em; font-size: 0.95rem; } .nav-link { font-size: 0.85rem; } .container { position: relative; z-index: 1; } .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; } .display-6 { font-size: 2.2rem; line-height: 1.2; } .lead { font-size: 1rem; } .panel { background-color: var(--space-900); border: 1px solid var(--space-700); border-radius: var(--radius-md); padding: 1.75rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .form-control-dark { background-color: var(--space-800); border: 1px solid var(--space-700); color: var(--space-50); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; } .form-control-dark::placeholder { color: var(--space-200); } .form-control-dark:focus { background-color: var(--space-800); color: var(--space-50); border-color: var(--space-500); box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.15); } .btn { border-radius: var(--radius-sm); font-size: 0.85rem; padding: 0.65rem 1.1rem; } .btn-light { background-color: var(--space-50); color: var(--space-950); border: 1px solid var(--space-50); } .btn-light:hover { background-color: var(--space-100); border-color: var(--space-100); } .btn-outline-light { border-color: var(--space-500); color: var(--space-50); } .btn-outline-light:hover { background-color: var(--space-700); border-color: var(--space-500); } .btn-outline-secondary { border-color: var(--space-600); color: var(--space-200); } .btn-outline-secondary:hover { background-color: var(--space-700); color: var(--space-50); } .chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--space-700); border-radius: 999px; padding: 0.35rem 0.75rem; color: var(--space-100); text-decoration: none; font-size: 0.75rem; } .chip:hover { background-color: var(--space-800); color: var(--space-50); } .orbit { position: absolute; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 50%; pointer-events: none; z-index: 0; } .orbit-lg { width: 520px; height: 520px; top: -180px; right: -140px; } .orbit-md { width: 360px; height: 360px; bottom: -140px; left: -120px; } .orbit-sm { width: 180px; height: 180px; top: 40%; left: 45%; } .border-top, .border-bottom { border-color: var(--space-700) !important; } .text-muted { color: var(--space-200) !important; } .badge.text-bg-dark { background-color: var(--space-800) !important; border: 1px solid var(--space-700); color: var(--space-100); } .toast { border-radius: var(--radius-sm); } .toast-header { font-size: 0.75rem; } @media (max-width: 991px) { .navbar .btn { display: none; } } @media (max-width: 767px) { .display-6 { font-size: 1.85rem; } .orbit-lg, .orbit-md, .orbit-sm { display: none; } }