/* * Background System * ================= * Different background styles that work with any theme. * Add a class to to activate: * * - Soft gradient mesh (recommended) * - Animated glow orbs * - Subtle noise texture * - Subtle dot pattern * - Solid color only * * Remove the old "with-gradient" class when using these. */ /* ═══════════════════════════════════════════════════════════════════════════ BASE - Reset gradient for all backgrounds ═══════════════════════════════════════════════════════════════════════════ */ body[class*="bg-"] { background: var(--color-bg); } /* ═══════════════════════════════════════════════════════════════════════════ MESH GRADIENT Soft, organic gradient blobs positioned around the page ═══════════════════════════════════════════════════════════════════════════ */ .bg-mesh { background: /* Top right warm glow */ radial-gradient( ellipse 80% 50% at 85% 5%, color-mix(in oklab, var(--color-accent), transparent 85%), transparent 70% ), /* Left side accent */ radial-gradient( ellipse 60% 80% at -5% 40%, color-mix(in oklab, var(--color-accent-2), transparent 90%), transparent 60% ), /* Bottom center subtle */ radial-gradient( ellipse 100% 40% at 50% 100%, color-mix(in oklab, var(--color-accent), transparent 95%), transparent 50% ), var(--color-bg); background-attachment: fixed; } /* ═══════════════════════════════════════════════════════════════════════════ GLOW ORBS Animated floating gradient orbs (like Linear, Vercel) ═══════════════════════════════════════════════════════════════════════════ */ .bg-glow { position: relative; overflow-x: clip; } .bg-glow::before, .bg-glow::after { content: ''; position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; z-index: -1; } .bg-glow::before { width: 600px; height: 600px; background: var(--color-accent); top: -200px; right: -100px; animation: float-1 20s ease-in-out infinite; } .bg-glow::after { width: 500px; height: 500px; background: var(--color-accent-2); bottom: -150px; left: -100px; animation: float-2 25s ease-in-out infinite; } @keyframes float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, 80px) scale(1.1); } 66% { transform: translate(30px, -40px) scale(0.95); } } @keyframes float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -70px) scale(0.9); } 66% { transform: translate(-40px, 50px) scale(1.05); } } /* ═══════════════════════════════════════════════════════════════════════════ GRAIN TEXTURE Subtle noise overlay for warmth and depth ═══════════════════════════════════════════════════════════════════════════ */ .bg-grain { position: relative; } .bg-grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* Combine grain with mesh for best effect */ .bg-grain.bg-mesh::before { opacity: 0.025; } /* ═══════════════════════════════════════════════════════════════════════════ DOT PATTERN Subtle geometric dot grid ═══════════════════════════════════════════════════════════════════════════ */ .bg-dots { background-image: radial-gradient( circle at center, color-mix(in oklab, var(--color-muted), transparent 85%) 1px, transparent 1px ); background-size: 24px 24px; background-position: 0 0; } /* Dots + mesh combo */ .bg-dots.bg-mesh { background-image: radial-gradient( circle at center, color-mix(in oklab, var(--color-muted), transparent 85%) 1px, transparent 1px ), radial-gradient( ellipse 80% 50% at 85% 5%, color-mix(in oklab, var(--color-accent), transparent 85%), transparent 70% ), radial-gradient( ellipse 60% 80% at -5% 40%, color-mix(in oklab, var(--color-accent-2), transparent 90%), transparent 60% ); background-size: 24px 24px, 100% 100%, 100% 100%; background-attachment: scroll, fixed, fixed; } /* ═══════════════════════════════════════════════════════════════════════════ CLEAN No gradients, just solid background color ═══════════════════════════════════════════════════════════════════════════ */ .bg-clean { background: var(--color-bg); } /* ═══════════════════════════════════════════════════════════════════════════ VIGNETTE Add-on: subtle edge darkening for depth Can combine with any background: ═══════════════════════════════════════════════════════════════════════════ */ .bg-vignette { position: relative; } .bg-vignette > *:first-child::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient( ellipse 80% 60% at 50% 50%, transparent 30%, color-mix(in oklab, var(--color-bg), black 15%) 100% ); z-index: -1; } /* ═══════════════════════════════════════════════════════════════════════════ REDUCE MOTION Respect user preferences ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .bg-glow::before, .bg-glow::after { animation: none; } }