can you make a site for a brand called "Chowder" that looks really modern and minimalistic, black background, white text and #626344 (olive green) for anything else.. also it is a tech store so have a shopping cart and checkout and that stuff. also make it so that it has like a grainy gradient background and might win the apple design awards... but dont mention that part in the website... also have alot of the text be rather informal like.. "this is a cool store that i suggest you buy from" and stuff like that.. but no keyboard slang like "bs" and stuff... also we started in 2024 so yeah............
884b0e4
verified
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| .grain-bg { | |
| background: | |
| radial-gradient(ellipse at 20% 50%, rgba(98, 99, 68, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 50%, rgba(98, 99, 68, 0.15) 0%, transparent 50%), | |
| url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"), | |
| #000000; | |
| } | |
| /* Smooth scroll behavior */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom selection color */ | |
| ::selection { | |
| background: #626344; | |
| color: white; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #111; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #626344; | |
| border-radius: 4px; | |
| } | |
| /* Animation for product cards */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| product-card { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| animation-delay: calc(var(--order) * 0.1s); | |
| } |