style.css

/* Custom styles for RoseRadiance Design Showcase */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* CSS Variables */
:root {
    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-300: #fda4af;
    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;
    --color-rose-900: #881337;
}

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Grid background pattern */
.bg-grid-rose-200\/20 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(251 207 232 / 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

/* Custom animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-rose-50);
}

::-webkit-scrollbar-thumb {
    background: var(--color-rose-300);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-rose-400);
}

/* Image hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(244, 63, 94, 0.15);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--color-rose-500), var(--color-rose-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Card hover effect */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(244, 63, 94, 0.25);
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--color-rose-50) 25%, var(--color-rose-100) 50%, var(--color-rose-50) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Mobile menu animation */
.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
}

.mobile-menu-exit {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 300ms, transform 300ms;
}

/* Responsive container */
.container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Focus styles for accessibility */
.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}