NativeON/aesthetic-haven

1/* Aesthetic Haven - Main Stylesheet */2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500&display=swap');3 4* {5    box-sizing: border-box;6    margin: 0;7    padding: 0;8}9 10html {11    scroll-behavior: smooth;12}13 14body {15    font-family: 'Inter', sans-serif;16    overflow-x: hidden;17}18 19/* Custom Animations */20@keyframes fadeInUp {21    from {22        opacity: 0;23        transform: translateY(30px);24    }25    to {26        opacity: 1;27        transform: translateY(0);28    }29}30 31@keyframes float {32    0%, 100% {33        transform: translateY(0);34    }35    50% {36        transform: translateY(-10px);37    }38}39 40.fade-in-up {41    animation: fadeInUp 0.8s ease-out forwards;42}43 44.float-animation {45    animation: float 3s ease-in-out infinite;46}47 48/* Custom Scrollbar */49::-webkit-scrollbar {50    width: 8px;51}52 53::-webkit-scrollbar-track {54    background: #f1f1f1;55}56 57::-webkit-scrollbar-thumb {58    background: #888;59    border-radius: 4px;60}61 62::-webkit-scrollbar-thumb:hover {63    background: #666;64}65 66/* Product Hover Effects */67.product-hover {68    transition: transform 0.3s ease, box-shadow 0.3s ease;69}70 71.product-hover:hover {72    transform: translateY(-5px);73    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);74}75 76/* Loading State */77.loading-spinner {78    display: inline-block;79    width: 20px;80    height: 20px;81    border: 2px solid rgba(0,0,0,.1);82    border-radius: 50%;83    border-top-color: #000;84    animation: spin 1s ease-in-out infinite;85}86 87@keyframes spin {88    to { transform: rotate(360deg); }89}90 91/* Responsive Typography */92@media (max-width: 640px) {93    .hero-title {94        font-size: 2.5rem;95    }96}97 98/* Focus Styles */99:focus {100    outline: 2px solid rgba(0,0,0,0.2);101    outline-offset: 2px;102}103 104:focus:not(:focus-visible) {105    outline: none;106}