/* ============================================================= BACKGROUND.CSS — Full-page animated gradient 6epixels.com · Ramesh Mandal Portfolio Strategy: - Animation lives on via background-size + keyframes - Covers the ENTIRE page height (not just viewport) - Very subtle: base is #f5f5f3, blue tints never exceed ~18% opacity so content is never competed with - Three slow independently-cycling gradient layers via background-image stacking — gives organic "mesh" feel without canvas or JS - .background div becomes display:none (unused) - Grid overlay moved to a ::before on body ============================================================= */ /* ============================================================= 01. BODY — the full-page animated gradient lives here ============================================================= */ html { /* Ensure html stretches full height so body gradient covers all */ min-height: 100%; } body { /* Base warm near-white — never changes */ background-color: #f5f5f3; /* THREE gradient layers stacked: Layer 1 — Large primary blob, top-left → drifts across Layer 2 — Secondary blob, bottom-right corner Layer 3 — Accent ghost, centre-right wander All use radial gradients. Colours are #1a46c9 blue mixed heavily toward #f5f5f3 — resulting tints are so pale that on content sections they read as near-white with a hint of warmth. Only on the hero (plain bg) do they register as visible colour. */ background-image: radial-gradient( ellipse 80% 60% at var(--bx1, 15%) var(--by1, 20%), rgba(207, 222, 255, 0.55) 0%, rgba(220, 232, 255, 0.25) 40%, transparent 75% ), radial-gradient( ellipse 70% 55% at var(--bx2, 85%) var(--by2, 78%), rgba(215, 228, 255, 0.45) 0%, rgba(225, 235, 255, 0.18) 45%, transparent 72% ), radial-gradient( ellipse 55% 45% at var(--bx3, 55%) var(--by3, 45%), rgba(230, 238, 255, 0.30) 0%, rgba(235, 242, 255, 0.12) 50%, transparent 78% ); /* Large background size so blobs are big and soft */ background-size: 200% 200%, 200% 200%, 180% 180%; /* Stagger starting positions */ background-position: 0% 0%, 100% 100%, 50% 50%; /* THE ANIMATION */ animation: bg-shift-1 28s ease-in-out infinite alternate, bg-shift-2 36s ease-in-out infinite alternate-reverse, bg-shift-3 44s ease-in-out infinite alternate; /* Smooth transition if reduced-motion guard kicks in */ transition: background-color 0.5s ease; } /* ============================================================= 02. KEYFRAMES — three independent slow drifts Each moves the background-position of one layer. alternate / alternate-reverse means they never repeat mechanically — always wandering. ============================================================= */ /* Layer 1 — primary blob, top-left ↔ bottom-right wander */ @keyframes bg-shift-1 { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 25% { background-position: 30% 20%, 70% 80%, 60% 40%; } 50% { background-position: 60% 10%, 40% 90%, 30% 70%; } 75% { background-position: 20% 50%, 80% 50%, 70% 30%; } 100% { background-position: 80% 40%, 20% 60%, 45% 55%; } } /* Layer 2 — secondary blob, counter-drift */ @keyframes bg-shift-2 { 0% { background-size: 200% 200%, 200% 200%, 180% 180%; } 33% { background-size: 220% 210%, 190% 195%, 200% 185%; } 66% { background-size: 195% 215%, 210% 200%, 175% 195%; } 100% { background-size: 210% 195%, 195% 210%, 190% 175%; } } /* Layer 3 — slow opacity breathe via size scaling */ @keyframes bg-shift-3 { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 20% { background-position: 15% 35%, 85% 65%, 35% 65%; } 40% { background-position: 50% 15%, 50% 85%, 65% 35%; } 60% { background-position: 35% 60%, 65% 40%, 20% 80%; } 80% { background-position: 70% 30%, 30% 70%, 80% 20%; } 100% { background-position: 25% 80%, 75% 20%, 55% 45%; } } /* ============================================================= 03. .BACKGROUND DIV — kept in DOM but purely structural now. Gradient lives on body. Grid lives on .grid directly. ============================================================= */ .background { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden; } /* ============================================================= 04. GRID — fixed to viewport, sits above body gradient, below all page content. Independent of .background z-index. ============================================================= */ .grid { position: fixed; inset: 0; z-index: 0; /* above body bg (-10), below content (1+) */ pointer-events: none; background-image: linear-gradient( to right, rgba(26, 70, 201, 0.05) 1px, transparent 1px ); background-size: 98px 100%; /* Fade at top and bottom edges */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); } /* ============================================================= 05. OLD ORBS — hidden (background.js removes them too, double-guard in case JS is slow) ============================================================= */ .orb { display: none !important; } /* ============================================================= 06. MOUSE LIGHT — interactive cursor glow Follows cursor via lerp in background.js ============================================================= */ .mouse-light { position: fixed; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; z-index: -5; background: radial-gradient( circle, rgba(26, 70, 201, 0.055) 0%, rgba(26, 70, 201, 0.018) 45%, transparent 70% ); filter: blur(50px); transform: translate(-50%, -50%); will-change: left, top; } @media (max-width: 768px) { .mouse-light { width: 280px; height: 280px; display: none; /* touch devices don't have mouse */ } } /* ============================================================= 07. SECTION BACKGROUNDS — keep transparent so body gradient shows through on EVERY section, not just hero ============================================================= */ /* Any section or wrapper that previously had a hard background-color set to #f5f5f3 or white must be transparent. List the ones that exist in your codebase: */ .hero-wrapper, .transform-section, .stats, .experience-section, .philosophy-section, .bento-section, .testimonials-section, .footer-section { background: transparent; } /* The header is intentionally kept with its own background so it doesn't become see-through on scroll. Its existing background-color in navigation.css takes priority. */ /* ============================================================= 08. CARD SURFACES — slight glass feel so they sit over the gradient without blocking it completely ============================================================= */ .stat, .bento-card, .transform-card, .testimonial-card, .article-card { /* Ensure cards have at least a semi-transparent white surface so gradient shows subtly around/behind them */ background-color: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================= 09. REDUCED MOTION — static, no animation at all ============================================================= */ @media (prefers-reduced-motion: reduce) { body { animation: none !important; background-image: radial-gradient( ellipse 80% 60% at 15% 20%, rgba(207, 222, 255, 0.40) 0%, transparent 70% ); background-size: 100% 100%; background-position: 0 0; } .mouse-light { display: none; } } /* ============================================================= 10. PERFORMANCE HINTS ============================================================= */ body { will-change: background-position, background-size; }