/* atmosphere.css — shared chrome for every Alpha Command surface. TraderDaddy-Pro-style background (dot grid + top ellipse glow + navy diagonal gradient + two floating ambient orbs) and a professional multi-column footer. Link this LAST in so the unified background wins over a page's own body rule. Orbs are pure CSS (body::before / ::after) — no extra markup needed. */ /* ── Background ─────────────────────────────────────────────────────────── */ body { background: radial-gradient(circle, rgba(63,123,255,0.07) 1px, transparent 1px), radial-gradient(ellipse 110% 45% at 50% 0%, rgba(63,123,255,0.10) 0%, transparent 65%), linear-gradient(160deg, #0a0e27 0%, #0d1230 40%, #0a0e27 100%) !important; background-size: 28px 28px, 100% 100%, 100% 100% !important; background-position: 0 0, 0 0, 0 0 !important; background-attachment: fixed !important; background-color: #0a0e1a !important; } /* floating ambient orbs — blue top-right, gold bottom-left */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform; } body::before { top: -10%; right: -6%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(63,123,255,0.12) 0%, transparent 70%); animation: atmosOrbA 26s ease-in-out infinite; } body::after { bottom: 2%; left: -8%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(232,181,77,0.08) 0%, transparent 70%); animation: atmosOrbB 32s ease-in-out infinite reverse; } @keyframes atmosOrbA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(28px) } } @keyframes atmosOrbB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(28px) } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* keep real page content above the orbs */ body > *:not(script):not(style) { position: relative; z-index: 1; } /* ── Professional footer ────────────────────────────────────────────────── */ .site-footer { position: relative; z-index: 1; margin-top: auto; /* sticky-to-bottom on short flex-column pages */ order: 99; /* dashboard flex reorders sections; footer stays last */ padding: 0; /* neutralize legacy .site-footer padding; inner carries it */ border-top: 1px solid rgba(63,123,255,0.14); background: linear-gradient(180deg, rgba(10,14,39,0) 0%, rgba(8,11,26,0.55) 100%); } .site-footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 24px 28px; display: flex; flex-direction: column; gap: 30px; } .site-footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .sf-brand { display: flex; flex-direction: column; gap: 12px; max-width: 340px; } .sf-brand-row { display: flex; align-items: center; gap: 10px; } .sf-brand-row img { width: 26px; height: 26px; display: block; } .sf-brand-name { font-weight: 700; font-size: 15px; color: #e9f0fb; letter-spacing: -0.01em; font-family: 'Space Grotesk', system-ui, sans-serif; } .sf-tagline { font-size: 13px; color: #9fb0cf; line-height: 1.55; } .sf-cols { display: contents; } /* the three .sf-col become grid items, evenly spread */ .sf-col { display: flex; flex-direction: column; gap: 11px; } .sf-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: #6b7a99; font-weight: 700; margin-bottom: 3px; } .sf-col a { font-size: 13px; color: #c3d0e8; text-decoration: none; transition: color .15s; } .sf-col a:hover { color: #6f9bff; } .site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); } .sf-copy { font-size: 12px; color: #6b7a99; } .sf-legal { display: flex; gap: 18px; flex-wrap: wrap; } .sf-legal a { font-size: 12px; color: #6b7a99; text-decoration: none; transition: color .15s; } .sf-legal a:hover { color: #c3d0e8; } .sf-disclaimer { font-size: 11px; color: #51618a; line-height: 1.6; max-width: 880px; } .sf-disclaimer a { color: #6b7a99; } @media (max-width: 760px) { .site-footer-top { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .sf-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 640px) { .site-footer-inner { padding: 36px 20px 24px; } }