/* ========================================================= Global AI-page background — base + glow + dot grid + arcs Applied to from _Layout.cshtml. ========================================================= */ html { background: transparent; } /* Decorative layers must never expand the mobile layout viewport (Chrome expands it past device-width when content overflows -> whole page zooms out) */ html, body.ai-page { overflow-x: hidden; overflow-x: clip; } body.ai-page { position: relative; min-height: 100vh; background: radial-gradient( 900px 650px at 82% 4%, rgba(92, 54, 210, 0.20) 0%, rgba(54, 70, 190, 0.10) 35%, transparent 72% ), radial-gradient( 700px 500px at 52% 18%, rgba(42, 90, 180, 0.07) 0%, transparent 70% ), linear-gradient( 180deg, #0b0f18 0%, #090e16 50%, #080d14 100% ); color: #e2e8f0; } /* Subtle dot grid — fades at top and bottom so content stays readable */ body.ai-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2; background-image: radial-gradient( circle, rgba(130, 145, 190, 0.16) 1px, transparent 1px ); background-size: 22px 22px; opacity: 0.45; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 65%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 65%, transparent 100% ); } /* Extra right/top purple glow for depth */ body.ai-page::after { content: ""; position: absolute; width: 900px; height: 700px; right: -250px; top: -220px; pointer-events: none; z-index: -1; background: radial-gradient( ellipse, rgba(90, 47, 210, 0.15) 0%, rgba(55, 77, 190, 0.08) 40%, transparent 72% ); filter: blur(10px); } /* Giant faint elliptical arcs */ .background-orbits { position: absolute; width: 1800px; height: 900px; left: 50%; top: 80px; transform: translateX(-50%); border: 1px solid rgba(110, 125, 180, 0.055); border-radius: 50%; pointer-events: none; z-index: -3; } .background-orbits::before, .background-orbits::after { content: ""; position: absolute; border: 1px solid rgba(110, 125, 180, 0.04); border-radius: 50%; } .background-orbits::before { inset: 90px -180px; } .background-orbits::after { inset: 180px -360px; } /* Mobile: the 1800px arcs and the offset glow overflow a phone viewport; drop the arcs and keep the glow inside the screen */ @media (max-width: 992px) { .background-orbits { display: none; } body.ai-page::after { right: 0; width: 100vw; max-width: 100%; } } /* Light theme: keep readable, much lighter grid */ [data-bs-theme="light"] body.ai-page { background: radial-gradient( 900px 650px at 82% 4%, rgba(92, 54, 210, 0.08) 0%, rgba(54, 70, 190, 0.04) 35%, transparent 72% ), radial-gradient( 700px 500px at 52% 18%, rgba(42, 90, 180, 0.03) 0%, transparent 70% ), linear-gradient( 180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100% ); color: #0f172a; } [data-bs-theme="light"] body.ai-page::before { background-image: radial-gradient( circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px ); opacity: 0.35; } [data-bs-theme="light"] body.ai-page::after { background: radial-gradient( ellipse, rgba(90, 47, 210, 0.06) 0%, rgba(55, 77, 190, 0.03) 40%, transparent 72% ); } [data-bs-theme="light"] .background-orbits, [data-bs-theme="light"] .background-orbits::before, [data-bs-theme="light"] .background-orbits::after { border-color: rgba(15, 23, 42, 0.04); }