/** Shopify CDN: Minification failed
Line 143:2 Unexpected "<"
Line 178:4 Unexpected "<"
**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
.image-slideshow > .w-full.h-full img {
filter: brightness(1.1); /* Increases brightness for a clearer appearance */
}
#b_defd90f0-1a0e-4d4c-a8a5-a94ad4fca11c span {
color: #fff; /* White text */
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6); /* Soft shadow for subtle border effect */
}
.message.start {
display: none;
}
/* Contenitore principale */
.icon-banner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
background-color: #111;
padding: 20px;
color: #000;
}
/* Stile comune per tutti i child */
.icon-card {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
transition: transform 1s ease-in-out; /* Transizione fluida */
position: relative;
}
/* Primo child: rotazione antioraria */
.icon-card:nth-child(1):hover {
transform: rotate(-360deg); /* Rotazione completa antioraria */
}
/* Secondo child: rotazione oraria */
.icon-card:nth-child(2):hover {
transform: rotate(360deg); /* Rotazione completa oraria */
}
/* Terzo child: zoom */
.icon-card:nth-child(3):hover {
transform: scale(1.1); /* Zoom del 10% */
}
/* Quarto child: traslazione */
.icon-card:nth-child(4):hover {
transform: translateY(-10px); /* Traslazione verso l'alto */
}
/* Luxury Hero Slider - Centered Content Overlay */
.home-hero-jewelry-slider {
position: relative;
}
.home-hero-jewelry-slider .slider-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
max-width: 800px;
z-index: 10;
}
.home-hero-jewelry-slider .slider-content h1 {
font-family: 'Bodoni Moda', 'Playfair Display', serif;
font-size: 72px;
font-weight: 400;
letter-spacing: 0.5px;
color: #ffffff;
margin: 0 0 40px 0;
line-height: 1.2;
text-transform: none;
}
.home-hero-jewelry-slider .slider-content .cta-button {
display: inline-block;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
padding: 16px 48px;
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.4s ease;
font-family: inherit;
}
.home-hero-jewelry-slider .slider-content .cta-button:hover {
background-color: #ffffff;
color: #111111;
border-color: #ffffff;
}
/* Mobile Optimization */
@media (max-width: 768px) {
.home-hero-jewelry-slider .slider-content {
width: 85%;
padding: 0 15px;
}
.home-hero-jewelry-slider .slider-content h1 {
font-size: 32px;
margin: 0 0 24px 0;
letter-spacing: 0.3px;
}
.home-hero-jewelry-slider .slider-content .cta-button {
padding: 12px 36px;
font-size: 11px;
letter-spacing: 1.5px;
}
}
/* Ensure slider controls remain visible and functional */
.home-hero-jewelry-slider .slider-dots,
.home-hero-jewelry-slider .slider-arrows {
position: relative;
z-index: 20;
}
/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
Immagine con Sconto
35% OFF
}
/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
.group-button .add-to-cart.js_add_to_cart_button {
border-radius: 10px;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.custom-css{padding: 10px;}
}
/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
}
/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
/* Contenitore principale */
.icon-banner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
background-color: #111; /* Sfondo principale scuro */
padding: 20px;
color: #000;
}
/* Prima card */
.icon-card:nth-child(1) {
background: linear-gradient(135deg, #2c2c2c, #000);
color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.icon-card:nth-child(1) .card-content {
font-size: 1.5rem;
margin-top: 10px;
}
/* Seconda card */
.icon-card:nth-child(2) {
background-color: #f4c2c2;
color: #000;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.icon-card:nth-child(2) .card-content {
font-size: 2rem;
font-weight: bold;
margin-top: 10px;
}
/* Terza card */
.icon-card:nth-child(3) {
background-color: #ffdd57;
color: #000;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.icon-card:nth-child(3) .card-content {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 10px;
}
/* Effetto hover generale */
.icon-card:hover {
transform: translateY(-10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
/* Testo generale */
.card-content h3, .card-content p {
margin: 0;
transition: color 0.3s ease;
}
.icon-card:hover .card-content h3 {
color: #ff7043;
}
.icon-card:hover .card-content p {
color: #444;
}
}