diff --git a/src/lib/sections/MobileApp.svelte b/src/lib/sections/MobileApp.svelte index 9e9a9dc..8d4ea80 100644 --- a/src/lib/sections/MobileApp.svelte +++ b/src/lib/sections/MobileApp.svelte @@ -70,8 +70,64 @@ .app { position: relative; padding: 6rem 1.5rem; - background: #ffffff; overflow: hidden; + + /* Base */ + background-color: #ffffff; + + /* Embroidery-inspired layers */ + background-image: + /* soft radial "fabric tension" */ + radial-gradient( + circle at 20% 30%, + rgba(6, 52, 95, 0.06), + transparent 60% + ), + radial-gradient( + circle at 80% 70%, + rgba(6, 52, 95, 0.05), + transparent 60% + ), + /* diagonal "thread lines" */ + repeating-linear-gradient( + 45deg, + rgba(6, 52, 95, 0.04) 0px, + rgba(6, 52, 95, 0.04) 1px, + transparent 1px, + transparent 12px + ), + /* opposite direction stitching */ + repeating-linear-gradient( + -45deg, + rgba(6, 52, 95, 0.025) 0px, + rgba(6, 52, 95, 0.025) 1px, + transparent 1px, + transparent 14px + ); + } + + .app::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + + background-image: + linear-gradient(rgba(6, 52, 95, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(6, 52, 95, 0.03) 1px, transparent 1px); + + background-size: 40px 40px; + } + + .blob { + position: absolute; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(6, 52, 95, 0.15), transparent 70%); + filter: blur(80px); + top: -100px; + right: -100px; + z-index: 0; } .container {