/* backgrounds.css — Advanced background system for landings */ /* ============================================ THEME PRESETS Add data-theme to or : - data-theme="dark" (default) - data-theme="light" - data-theme="glass" ============================================ */ /* --- Light Theme Override --- */ [data-theme="light"] { --bg-primary: #FAFAFA; --bg-secondary: #F0F0F2; --bg-card: #FFFFFF; --color-text: #1A1A2E; --color-text-secondary: #555566; --color-heading: #0D0D1A; --color-border: #E0E0E6; --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); } /* Light theme specific adjustments */ [data-theme="light"] .btn-secondary { background: #fff; border-color: var(--color-border); } [data-theme="light"] .logo-strip img { filter: grayscale(1) brightness(0.4); } [data-theme="light"] .testimonial, [data-theme="light"] .card { box-shadow: var(--shadow-sm); } /* --- Glass Theme (frosted glass on gradient bg) --- */ [data-theme="glass"] { --bg-primary: transparent; --bg-secondary: rgba(255,255,255,0.04); --bg-card: rgba(255,255,255,0.06); --color-text: #E5E5E7; --color-text-secondary: #A1A1A6; --color-heading: #FFFFFF; --color-border: rgba(255,255,255,0.1); } [data-theme="glass"] .card, [data-theme="glass"] .testimonial { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); } [data-theme="glass"] .nav-sticky { background: rgba(14,14,16,0.6); } /* ============================================ ANIMATED BACKGROUNDS Add class to or a wrapper
============================================ */ /* --- Animated Gradient (like aceleratucrm.com) --- */ .bg-animated-gradient { position: fixed; inset: 0; z-index: -2; background: linear-gradient( 125deg, var(--bg-primary) 0%, color-mix(in srgb, var(--color-primary) 15%, var(--bg-primary)) 25%, var(--bg-primary) 50%, color-mix(in srgb, var(--color-accent) 10%, var(--bg-primary)) 75%, var(--bg-primary) 100% ); background-size: 400% 400%; animation: bg-gradient-flow 15s ease infinite; } @keyframes bg-gradient-flow { 0% { background-position: 0% 50%; } 25% { background-position: 50% 0%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 100%; } 100% { background-position: 0% 50%; } } /* --- Mesh Gradient (static but complex) --- */ .bg-mesh-gradient { position: fixed; inset: 0; z-index: -2; background: var(--bg-primary); } .bg-mesh-gradient::before, .bg-mesh-gradient::after { content: ''; position: fixed; border-radius: 50%; filter: blur(120px); opacity: 0.15; pointer-events: none; } .bg-mesh-gradient::before { width: 600px; height: 600px; top: -10%; left: -5%; background: var(--color-primary); animation: mesh-float-1 20s ease-in-out infinite; } .bg-mesh-gradient::after { width: 500px; height: 500px; bottom: -10%; right: -5%; background: var(--color-accent); animation: mesh-float-2 25s ease-in-out infinite; } @keyframes mesh-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(80px, 40px) scale(1.1); } 66% { transform: translate(-40px, 80px) scale(0.95); } } @keyframes mesh-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-60px, -30px) scale(1.05); } 66% { transform: translate(40px, -60px) scale(0.9); } } /* Extra orb for more depth */ .bg-mesh-gradient--3orbs::before { opacity: 0.12; } .bg-mesh-gradient--3orbs .bg-orb-extra { position: fixed; width: 400px; height: 400px; top: 40%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(100px); opacity: 0.1; background: color-mix(in srgb, var(--color-primary) 50%, var(--color-accent)); animation: mesh-float-3 18s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes mesh-float-3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-30%, -40%) scale(1.15); } } /* --- Subtle Grain Texture (adds depth to flat backgrounds) --- */ .bg-grain::after { content: ''; position: fixed; inset: 0; z-index: -1; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* ============================================ SECTION-LEVEL BACKGROUNDS Add to individual
elements ============================================ */ /* Gradient section background (subtle) */ .section-bg-gradient { background: linear-gradient( 180deg, var(--bg-primary) 0%, var(--bg-secondary) 100% ); } /* Accent glow section */ .section-bg-glow { position: relative; overflow: hidden; } .section-bg-glow::before { content: ''; position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-primary); filter: blur(120px); opacity: 0.06; pointer-events: none; } /* Diagonal split background */ .section-bg-diagonal { position: relative; background: var(--bg-secondary); } .section-bg-diagonal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: var(--bg-primary); clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%); } /* ============================================ LIGHT THEME BACKGROUNDS ============================================ */ /* Soft gradient for light themes */ .bg-light-gradient { position: fixed; inset: 0; z-index: -2; background: linear-gradient( 135deg, #FAFAFA 0%, color-mix(in srgb, var(--color-primary) 5%, #FAFAFA) 30%, #FAFAFA 60%, color-mix(in srgb, var(--color-accent) 3%, #FAFAFA) 80%, #FAFAFA 100% ); } /* Dot pattern for light themes */ .bg-dots { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.4; }