/* ==================================================== BattleFrog Arcade Shared Backgrounds ==================================================== Usage: or ==================================================== */ /* ================================================== Base Background Framework ================================================== */ [class^="bf-bg-"] { min-height: 100vh; } /* ================================================== Neon Grid 8-Bit Battle Recentered ================================================== */ .bf-bg-neon-grid { --bg: #05060d; --grid-color: rgba(255,255,255,.035); --accent-a: rgba(96,255,122,.14); --accent-b: rgba(183,92,255,.16); --accent-c: rgba(45,226,255,.11); background: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), radial-gradient(circle at 12% 16%, var(--accent-a), transparent 24%), radial-gradient(circle at 86% 6%, var(--accent-b), transparent 25%), radial-gradient(circle at 54% 92%, var(--accent-c), transparent 28%), var(--bg); background-size: 32px 32px, 32px 32px, auto, auto, auto, auto; } /* ================================================== Dungeon Dash Stone / Torch ================================================== */ .bf-bg-dungeon-stone { --bg: #0d0906; background: linear-gradient( rgba(255,255,255,.02) 2px, transparent 2px ), linear-gradient( 90deg, rgba(255,255,255,.02) 2px, transparent 2px ), radial-gradient( circle at 15% 20%, rgba(255,180,80,.12), transparent 30% ), radial-gradient( circle at 85% 75%, rgba(255,220,120,.08), transparent 35% ), var(--bg); background-size: 64px 32px, 64px 32px, auto, auto, auto; } /* ================================================== Frog Hopper Pond ================================================== */ .bf-bg-frog-pond { background: radial-gradient( circle at 20% 30%, rgba(60,255,120,.10), transparent 20% ), radial-gradient( circle at 80% 60%, rgba(80,180,255,.10), transparent 20% ), linear-gradient( #07130a, #0a1d10 ); } /* ================================================== Ninja vs Samurai Sunset ================================================== */ .bf-bg-samurai-sunset { background: radial-gradient( circle at center, rgba(255,120,80,.12), transparent 25% ), linear-gradient( #18081a, #09050f ); } /* ================================================== Asteroid Miner Industrial ================================================== */ .bf-bg-industrial { background: linear-gradient( rgba(255,180,60,.03) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,180,60,.03) 1px, transparent 1px ), linear-gradient( #0b0b0b, #131313 ); background-size: 24px 24px, 24px 24px, auto; } /* ================================================== Arcade Dots Retro Console / Bubble Grid ================================================== */ .bf-bg-arcade-dots { --bg: #e5e7eb; --dot-color: #3b82f6; background-color: var(--bg); background-image: radial-gradient( var(--dot-color) 20%, transparent 20% ), radial-gradient( var(--dot-color) 20%, transparent 20% ); background-size: 40px 40px; background-position: 0 0, 20px 20px; } /* ================================================== Arcade Stripes Retro Cabinet / Warning Stripe ================================================== */ .bf-bg-arcade-stripes { --color-a: #f3f4f6; --color-b: #ffde4d; --color-c: #ff4c4c; background: repeating-linear-gradient( 45deg, var(--color-a), var(--color-a) 40px, var(--color-b) 40px, var(--color-b) 80px, var(--color-c) 80px, var(--color-c) 120px ); } /* ================================================== Arcade Crosshatch X Pattern ================================================== */ .bf-bg-crosshatch { --bg: #05060d; --line-a: rgba(45, 226, 255, 0.10); --line-b: rgba(183, 92, 255, 0.10); background: repeating-linear-gradient( 45deg, transparent 0px, transparent 18px, var(--line-a) 18px, var(--line-a) 20px ), repeating-linear-gradient( -45deg, transparent 0px, transparent 18px, var(--line-b) 18px, var(--line-b) 20px ), var(--bg); } /* ================================================== Hex Grid ================================================== */ .bf-bg-hex { --bg: #05060d; --line: rgba(45, 226, 255, 0.10); background: linear-gradient(30deg, var(--line) 12%, transparent 12.5%, transparent 87%, var(--line) 87.5%, var(--line)), linear-gradient(150deg, var(--line) 12%, transparent 12.5%, transparent 87%, var(--line) 87.5%, var(--line)), linear-gradient(90deg, var(--line) 2%, transparent 2.5%, transparent 97%, var(--line) 97.5%, var(--line)), var(--bg); background-size: 80px 140px; } /* ================================================== Diamond ================================================== */ .bf-bg-diamond { --bg: #05060d; --diamond: rgba(183, 92, 255, 0.12); background: linear-gradient( 45deg, var(--diamond) 25%, transparent 25% ), linear-gradient( -45deg, var(--diamond) 25%, transparent 25% ), var(--bg); background-size: 64px 64px; } /* ================================================== Starfield ================================================== */ .bf-bg-starfield { background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.8) 1px, transparent 2px), radial-gradient(circle at 40% 60%, rgba(255,255,255,.6) 1px, transparent 2px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.7) 1px, transparent 2px), radial-gradient(circle at 65% 85%, rgba(255,255,255,.5) 1px, transparent 2px), #05060d; background-size: 200px 200px; } /* ================================================== Radar Rings ================================================== */ .bf-bg-radar { --bg: #05060d; background: repeating-radial-gradient( circle at center, rgba(45,226,255,.08) 0px, rgba(45,226,255,.08) 2px, transparent 2px, transparent 60px ), var(--bg); } /* ================================================== Pixel Blocks ================================================== */ .bf-bg-pixel { --bg: #05060d; --pixel: rgba(96,255,122,.12); background: linear-gradient( 90deg, transparent 75%, var(--pixel) 75% ), linear-gradient( transparent 75%, var(--pixel) 75% ), var(--bg); background-size: 32px 32px; }