@casoon/dragonfly/effects/themes/neos.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Neo-Effekte
 * 
 * Diese Datei enthält verschiedene Neo-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer components {
    /* Basis Neo-Effekte */
    .neo {
        background: var(--neo-bg, #e0e5ec);
        border-radius: var(--spacing-2-5);
        box-shadow: 
            var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
            -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
    }

    .neo-inset {
        background: var(--neo-bg, #e0e5ec);
        border-radius: var(--spacing-2-5);
        box-shadow: 
            inset var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
            inset -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
    }

    /* Größen-Varianten */
    .neo-sm {
        border-radius: var(--spacing-1-5);
        box-shadow: 
            var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
            -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
    }

    .neo-lg {
        border-radius: var(--spacing-4);
        box-shadow: 
            var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
            -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
    }

    /* Hover-Effekte */
    .neo-hover {
        transition: all 0.3s ease;
    }

    .neo-hover:hover {
        box-shadow: 
            var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
            -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
        transform: translateY(calc(-1 * var(--border-width-thick)));
    }

    .neo-hover-inset:hover {
        box-shadow: 
            inset var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
            inset -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
    }

    /* Aktive Zustände */
    .neo-active {
        transition: all 0.2s ease;
    }

    .neo-active:active {
        box-shadow: 
            inset var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
            inset -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
        transform: var(--transform-scale-98);
    }

    /* Farb-Varianten */
    .neo-primary {
        --neo-bg: var(--color-primary-light, #e6f3ff);
        --neo-shadow-dark: var(--color-primary-dark, #b3d1ff);
        --neo-shadow-light: var(--color-primary-lighter, #f0f7ff);
    }

    .neo-secondary {
        --neo-bg: var(--color-secondary-light, #f0f0f0);
        --neo-shadow-dark: var(--color-secondary-dark, #d1d1d1);
        --neo-shadow-light: var(--color-secondary-lighter, #fff);
    }

    .neo-success {
        --neo-bg: var(--color-success-light, #e6fff0);
        --neo-shadow-dark: var(--color-success-dark, #b3ffd1);
        --neo-shadow-light: var(--color-success-lighter, #f0fff7);
    }

    .neo-error {
        --neo-bg: var(--color-error-light, #ffe6e6);
        --neo-shadow-dark: var(--color-error-dark, #ffb3b3);
        --neo-shadow-light: var(--color-error-lighter, #fff0f0);
    }

    .neo-warning {
        --neo-bg: var(--color-warning-light, #fff7e6);
        --neo-shadow-dark: var(--color-warning-dark, #ffe0b3);
        --neo-shadow-light: var(--color-warning-lighter, #fffaf0);
    }

    .neo-info {
        --neo-bg: var(--color-info-light, #e6f7ff);
        --neo-shadow-dark: var(--color-info-dark, #b3e0ff);
        --neo-shadow-light: var(--color-info-lighter, #f0f9ff);
    }

    /* Spezielle Effekte */
    .neo-glow {
        box-shadow: 
            var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
            -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff),
            0 0 var(--spacing-5) var(--neo-glow, rgb(59 130 246 / 50%));
    }

    .neo-border {
        border: var(--border-width-thick) solid var(--neo-border, rgb(59 130 246 / 20%));
    }

    .neo-gradient {
        background: linear-gradient(
            145deg,
            var(--neo-gradient-start, #e0e5ec),
            var(--neo-gradient-end, #fff)
        );
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .neo-hover,
        .neo-hover-inset,
        .neo-active {
            transition: var(--transition-none);
        }
        
        .neo-hover:hover,
        .neo-active:active {
            transform: var(--transform-none);
        }
    }
}