/**
* SNELLIX - Logo Styles
* Stili per gestire i diversi loghi dell'app
*
* File disponibili:
* - /assets/images/logo.png - Logo nero da colorare via CSS
* - /assets/images/icon.png - Icon colorato da mantenere originale
* - /assets/images/scritta.png - Scritta nera da colorare via CSS
*/
/* ============================================
SCRITTA SNELLIX (scritta.png)
============================================ */
/* Scritta bianca (per header e loader) */
.snellix-text-white {
filter: brightness(0) invert(1);
}
/* Scritta viola brand */
.snellix-text-purple {
filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(228deg) brightness(100%) contrast(119%);
/* Colore: #667eea */
}
/* Scritta gradient effect */
.snellix-text-gradient {
filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(228deg) brightness(100%) contrast(119%);
animation: color-shift 3s ease-in-out infinite;
}
@keyframes color-shift {
0%, 100% {
filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(228deg) brightness(100%) contrast(119%);
}
50% {
filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(2878%) hue-rotate(286deg) brightness(92%) contrast(101%);
}
}
/* ============================================
LOGO SNELLIX (logo.png)
============================================ */
/* Logo bianco */
.snellix-logo-white {
filter: brightness(0) invert(1);
}
/* Logo viola brand */
.snellix-logo-purple {
filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(228deg) brightness(100%) contrast(119%);
}
/* Logo nero originale */
.snellix-logo-black {
filter: none;
}
/* Logo con ombra colorata */
.snellix-logo-glow {
filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(102, 126, 234, 0.8));
}
/* ============================================
ICON SNELLIX (icon.png)
============================================ */
/* Icon a colori originali - NO filtri */
.snellix-icon {
filter: none;
}
/* Icon con ombra */
.snellix-icon-shadow {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}
/* Icon con glow */
.snellix-icon-glow {
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.6));
}
/* ============================================
DIMENSIONI COMUNI
============================================ */
.logo-xs { height: 20px; width: auto; }
.logo-sm { height: 30px; width: auto; }
.logo-md { height: 40px; width: auto; }
.logo-lg { height: 60px; width: auto; }
.logo-xl { height: 80px; width: auto; }
.logo-2xl { height: 120px; width: auto; }
/* ============================================
ANIMAZIONI
============================================ */
.logo-pulse {
animation: logo-pulse 2s ease-in-out infinite;
}
@keyframes logo-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
.logo-bounce {
animation: logo-bounce 1s ease-in-out infinite;
}
@keyframes logo-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.logo-rotate {
animation: logo-rotate 3s linear infinite;
}
@keyframes logo-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================
USAGE EXAMPLES
============================================ */
/*
*/