/* backgrounds.body.css — Full page backgrounds without wrappers - Apply classes directly to - No pseudo elements or overflow hacks - Dark and Bright variants - Gentle motion; respects prefers-reduced-motion */ .container-StyleScore:before { /* backgrounds.body.css — Full page backgrounds without wrappers content: ""; display: flex; position: fixed; width: 100%; height: 100%; background: #ffffff; top: 0; left: 0; z-index: -1;*/ } :root{ --lime: #39FF14; --blue: #4B7BFF; --violet: #AD26FF; --bg-mid: #1d2740; --bg-speed: 28s; } /* Base for any body background */ body[class*="body-bg-"]{ background-color: var(--bg-mid); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } /* ======================= Dark variants ======================== */ /* 1) Aurora (soft drifting blobs) */ body.body-bg-aurora, .body-bg-aurora{ --a1x: 18%; --a1y: 16%; --a2x: 82%; --a2y: 20%; --a3x: 52%; --a3y: 86%; background-image: radial-gradient(40% 32% at var(--a1x) var(--a1y), rgba(57,255,20,.16), transparent 60%), radial-gradient(38% 34% at var(--a2x) var(--a2y), rgba(75,123,255,.14), transparent 60%), radial-gradient(50% 46% at var(--a3x) var(--a3y), rgba(173,38,255,.15), transparent 60%); background-size: 100% 100%; animation: bodyAurora var(--bg-speed) ease-in-out infinite alternate; } @keyframes bodyAurora { to{ --a1x: 20%; --a1y: 15%; --a2x: 80%; --a2y: 22%; --a3x: 54%; --a3y: 84%; } } /* 2) Brand gradient sheen */ body.body-bg-gradient, .body-bg-gradient{ background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.04)), var(--grad, linear-gradient(135deg, var(--lime), var(--blue) 45%, var(--violet))); background-size: 120% 120%, 120% 120%; animation: bodySheen var(--bg-speed) linear infinite alternate; } @keyframes bodySheen { from { background-position: 0% 0%, 0% 0%; } to { background-position: 2% 0%, 2% 0%; } } /* 3) Mesh (very calm blobs) */ body.body-bg-mesh, .body-bg-mesh{ --m1x: 20%; --m1y: 30%; --m2x: 80%; --m2y: 25%; --m3x: 60%; --m3y: 80%; background-image: radial-gradient(30% 28% at var(--m1x) var(--m1y), rgba(57,255,20,.12), transparent 65%), radial-gradient(36% 30% at var(--m2x) var(--m2y), rgba(75,123,255,.12), transparent 65%), radial-gradient(42% 38% at var(--m3x) var(--m3y), rgba(173,38,255,.12), transparent 65%); background-size: 100% 100%; animation: bodyMesh calc(var(--bg-speed) * 1.2) ease-in-out infinite alternate; } @keyframes bodyMesh { to{ --m1y: 32%; --m2x: 78%; --m3y: 78%; } } /* 4) Stripes */ body.body-bg-stripes, .body-bg-stripes{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 8px, transparent 8px, transparent 22px); background-size: 140% 140%; animation: bodyStripes calc(var(--bg-speed) * 0.7) linear infinite; } @keyframes bodyStripes { to { background-position: 2% 0%; } } /* 5) Dots */ body.body-bg-dots, .body-bg-dots{ background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.5px); background-size: 14px 14px; animation: bodyDots calc(var(--bg-speed) * 1.4) linear infinite alternate; } @keyframes bodyDots { to { background-position-y: 1.5%; } } /* 6) Clean (vignette) */ body.body-bg-clean, .body-bg-clean{ background-image: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.06), transparent 60%), radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.10), transparent 55%); background-size: 100% 100%, 100% 100%; } /* ======================= Bright (light) variants Use: body-bg-*-bright ======================== */ body[class*="body-bg-"][class*="-bright"]{ --bg-mid: #fbfbfb; /* light neutral */ background-color: var(--bg-mid); } /* 1) Aurora — bright */ body.body-bg-aurora-bright{ --a1x: 18%; --a1y: 16%; --a2x: 82%; --a2y: 20%; --a3x: 52%; --a3y: 86%; background-image: radial-gradient(40% 32% at var(--a1x) var(--a1y), rgba(57,255,20,.12), transparent 62%), radial-gradient(38% 34% at var(--a2x) var(--a2y), rgba(75,123,255,.11), transparent 64%), radial-gradient(50% 46% at var(--a3x) var(--a3y), rgba(173,38,255,.12), transparent 62%), radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.06), transparent 55%); background-size: 100% 100%; animation: bodyAurora var(--bg-speed) ease-in-out infinite alternate; } /* 2) Gradient sheen — bright */ body.body-bg-gradient-bright{ background-image: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.55)), var(--grad, linear-gradient(135deg, var(--lime), var(--blue) 45%, var(--violet))); background-size: 120% 120%, 140% 140%; animation: bodySheen var(--bg-speed) linear infinite alternate; } /* 3) Mesh — bright */ body.body-bg-mesh-bright{ --m1x: 20%; --m1y: 30%; --m2x: 80%; --m2y: 25%; --m3x: 60%; --m3y: 80%; background-image: radial-gradient(30% 28% at var(--m1x) var(--m1y), rgba(57,255,20,.10), transparent 66%), radial-gradient(36% 30% at var(--m2x) var(--m2y), rgba(75,123,255,.10), transparent 66%), radial-gradient(42% 38% at var(--m3x) var(--m3y), rgba(173,38,255,.11), transparent 66%); background-size: 100% 100%; animation: bodyMesh calc(var(--bg-speed) * 1.2) ease-in-out infinite alternate; } /* 4) Stripes — bright */ body.body-bg-stripes-bright{ background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 8px, transparent 8px, transparent 22px); background-size: 140% 140%; animation: bodyStripes calc(var(--bg-speed) * 0.7) linear infinite; } /* 5) Dots — bright */ body.body-bg-dots-bright{ background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.10) 1px, transparent 1.5px); background-size: 14px 14px; animation: bodyDots calc(var(--bg-speed) * 1.4) linear infinite alternate; } /* 6) Clean — bright */ body.body-bg-clean-bright{ background-image: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.08), transparent 55%); background-size: 100% 100%, 100% 100%; } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce){ body.body-bg-aurora, body.body-bg-gradient, body.body-bg-mesh, body.body-bg-stripes, body.body-bg-dots, body.body-bg-aurora-bright, body.body-bg-gradient-bright, body.body-bg-mesh-bright, body.body-bg-stripes-bright, body.body-bg-dots-bright { animation: none !important; } } /* iOS Safari performance */ @supports (-webkit-touch-callout: none){ body[class*="body-bg-"]{ background-attachment: scroll; } }