html, body {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.bg-black-05 { background-color: rgba(0,0,0,0.05); }
.bg-black-10 { background-color: rgba(0,0,0,0.1); }
.bg-black-20 { background-color: rgba(0,0,0,0.2); }
.bg-black-30 { background-color: rgba(0,0,0,0.3); }
.bg-black-40 { background-color: rgba(0,0,0,0.4); }
.bg-black-50 { background-color: rgba(0,0,0,0.5); }
.bg-white-05 { background-color: rgba(255,255,255,0.05); }
.bg-white-10 { background-color: rgba(255,255,255,0.1); }
.bg-white-20 { background-color: rgba(255,255,255,0.2); }
.bg-white-30 { background-color: rgba(255,255,255,0.3); }
.bg-white-40 { background-color: rgba(255,255,255,0.4); }
.bg-white-50 { background-color: rgba(255,255,255,0.5); }
.bg-warning-75 { background-color: rgba(255,193,7,0.75); }
.bg-warning-50 { background-color: rgba(255,193,7,0.50); }
.bg-warning-25 { background-color: rgba(255,193,7,0.25); }
.text-warning-75 { color: rgba(255,193,7,0.75); }
.text-warning-50 { color: rgba(255,193,7,0.50); }
.text-warning-25 { color: rgba(255,193,7,0.25); }
.bg-success-75 { background-color: rgba(25,135,84,0.75); }
.bg-success-50 { background-color: rgba(25,135,84,0.50); }
.bg-success-25 { background-color: rgba(25,135,84,0.25); }
.text-success-75 { color: rgba(25,135,84,0.75); }
.text-success-50 { color: rgba(25,135,84,0.50); }
.text-success-25 { color: rgba(25,135,84,0.25); }
.bg-black-25 { background-color: rgba(0,0,0,0.25); }
.bg-black-75 { background-color: rgba(0,0,0,0.75); }
.text-black-25 { color: rgba(0,0,0,0.25); }
.text-black-75 { color: rgba(0,0,0,0.75); }
.text-white-25 { color: rgba(255,255,255,0.25); }
.text-white-75 { color: rgba(255,255,255,0.75); }
.bg-blu { background-color: rgba(5,52,100,1.00); }
.bg-blu-75 { background-color: rgba(5,52,100,0.75); }
.bg-blu-50 { background-color: rgba(5,52,100,0.50); }
.bg-blu-25 { background-color: rgba(5,52,100,0.25); }
.text-blu { color: rgba(5,52,100,1.00); }
.text-blu-75 { color: rgba(5,52,100,0.75); }
.text-blu-50 { color: rgba(5,52,100,0.50); }
.text-blu-25 { color: rgba(5,52,100,0.25); }
.text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.btn-catalogo { background-color: rgba(255,255,255,0.5) !important; }
#breadcrumb a { text-decoration: none; }
ul.pagination a { color: rgba(5,52,100,0.75); }
/* Effetto hover sulle card prodotto */
.card { overflow: hidden; }
.card img { transition: transform 0.4s ease; transform-origin: center center; overflow: hidden; }
.card:hover img { transform: scale(1.10); }
.badge-custom { font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; font-weight: 700; display: inline-block; }
/* Colore tab inattivo */
.nav-pills .nav-link { color: rgb(5,52,100); border:none; background-color: #fefefe; }
.nav-pills .nav-link:hover { color: #0066cc; }
.nav-pills .nav-link.active { color: #ffffff; background-color: rgb(5,52,100); border: none; }
/* Rimuove le freccette native */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield; /* Firefox */
}
/* Due quadrati affiancati */
.small-box {
position: relative;
width: calc(50% - 15px); /* come nel sito di esempio */
aspect-ratio: 1 / 1; /* mantiene la forma quadrata */
border-radius: .5rem;
overflow: hidden;
}
.small-box .bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .6s ease;
z-index: 0;
}
.small-box:hover .bg-image {
transform: scale(1.1);
}
.small-box .z-1 {
position: relative;
z-index: 1;
}
/* Box rettangolare inferiore */
.full-box {
width: 100%;
aspect-ratio: 2.1 / 1; /* proporzione simile a quella del controller */
border-radius: .5rem;
overflow: hidden;
}
.full-box .bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(0px);
transform: scale(1.0);
transition: transform .6s ease, filter .6s ease;
z-index: 0;
}
.full-box:hover .bg-image {
filter: blur(0px);
transform: scale(1.10);
}
/* Assicura che i box crescano bene */
@media (max-width: 992px) {
.col-lg-5 {
gap: 1rem;
}
.small-box {
width: calc(50% - 15px); /* come nel sito di esempio */
aspect-ratio: 1 / 1; /* forma più orizzontale su mobile */
}
.full-box {
aspect-ratio: 1.5 / 1;
}
}
/* ------------------------------
MOVIMENTI DI PARTENZA
------------------------------ */
.from-top { transform: translateY(-50px); }
.from-bottom { transform: translateY(50px); }
.from-left { transform: translateX(-100px); }
.from-right { transform: translateX(100px); }
/* ------------------------------
ANIMAZIONI BASE
------------------------------ */
@keyframes move-in {
to { transform: translate(0, 0); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ------------------------------
CLASSI DI MOVIMENTO
------------------------------ */
.move-in { animation: move-in 1s ease-out forwards; }
/* ------------------------------
CLASSI DI FADE (solo opacità )
------------------------------ */
.fade-1 { animation: fade-in 0.5s ease-in-out forwards; }
.fade-2 { animation: fade-in 1s ease-in-out forwards; }
.fade-3 { animation: fade-in 2s ease-in-out forwards; }
/* ------------------------------
CLASSI DI DELAY
------------------------------ */
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1s; }
.delay-3 { animation-delay: 2s; }
/* ------------------------------
COMBINAZIONI: movimento + fade
(serve per evitare sovrascrizioni)
------------------------------ */
.from-right.move-in.fade-1,
.from-right.move-in.fade-2,
.from-right.move-in.fade-3,
.from-left.move-in.fade-1,
.from-left.move-in.fade-2,
.from-left.move-in.fade-3,
.from-top.move-in.fade-1,
.from-top.move-in.fade-2,
.from-top.move-in.fade-3,
.from-bottom.move-in.fade-1,
.from-bottom.move-in.fade-2,
.from-bottom.move-in.fade-3 {
animation-name: move-in, fade-in;
animation-duration: 1s, 1s;
animation-fill-mode: forwards, forwards;
animation-timing-function: ease-out, ease-in-out;
}
/* --- ZOOM EFFECT --- */
@keyframes zoom-out {
from { transform: scale(1.1); }
to { transform: scale(1); }
}
.zoom-1 { animation: zoom-out 0.2s ease-out forwards; }
.zoom-2 { animation: zoom-out 0.5s ease-out forwards; }
.zoom-3 { animation: zoom-out 1.0s ease-out forwards; }
/* Evita che lo zoom vada oltre i bordi */
.overflow-hidden { overflow: hidden; }
/* ------------------------------
DELAY + COMBINAZIONI (ritardi globali)
------------------------------ */
.delay-1 { animation-delay: 0.5s, 0.5s; }
.delay-2 { animation-delay: 1s, 1s; }
.delay-3 { animation-delay: 2s, 2s; }
/* ------------------------------
PREPARAZIONE E OTTIMIZZAZIONI
------------------------------ */
[class*="from-"] {
opacity: 0;
will-change: transform, opacity;
}
[class*="fade-"] {
opacity: 0;
will-change: opacity;
}