.bg-gray { background-color: #f6efef; } .header-nav .nav > li:hover > a { color: #C71D20; } .header-nav .nav > li.active > a, .header-nav .nav > li.current-menu-item > a { color: #C71D20; } .site-button:hover { background-color: #C71D20; color: #000; } a.m-b15.site-button-secondry.text-uppercase.letter-spacing-2:hover{ background-color: #C71D20; color: #000; } .btn-filter-wrap li.btn-active { color: #C71D20; } h2 a.text-white.font-20.letter-spacing-4.text-uppercase:hover{ color: #C71D20; } .overlay-bx-2 div.line-amiation div.text-white.font-weight-300.p-a40 a.v-button.letter-spacing-4.font-12.text-uppercase.p-l20:hover{ color: #C71D20; } .widget.widget_services.inline-links ul li a:hover{ color: #C71D20; } .logo-header{ display:table; float:left; width:300px; height:90px; vertical-align:middle; padding:0; font-size:36px; color:#1bbce8; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; position:relative; z-index:9; } @media only screen and (max-width:991px) { .logo-header{ width:240px; height:75px; } } @media only screen and (max-width:480px) { .logo-header{ width:190px; height:60px; } } .is-fixed .logo-header{ height:70px; } @media only screen and (max-width:991px) { .is-fixed .logo-header{ height:60px; } } @media only screen and (max-width:480px) { .is-fixed .logo-header{ height:50px; } } /* Avvicina il sottotitolo al titolo sopra nello slider home, riducendo lo spazio tra le due righe */ #slide-902-layer-7, #slide-903-layer-7, #slide-904-layer-7 { transform: translateY(-15px) !important; } /* Riduce la dimensione del titolo centrale (es. "Lavorazione Marmo") */ #slide-902-layer-5, #slide-903-layer-5, #slide-904-layer-5 { font-size: 26px !important; line-height: 30px !important; } /* Aggiunge spazio tra lo slider e la sezione sottostante */ #welcome_wrapper { margin-bottom: 20px !important; } .wt-breadcrumb li a{ color: #C71D20; } x; line-height:44px; } } /* ========================================================== GALLERIA SENA MARMI — stili Da linkare nell': ========================================================== */ /* ---------- Barra filtri (stile menu header, a destra, con separatori) ---------- */ .galleria-filtri { text-align: right; margin: 4px 0 26px; line-height: 1.8; } .galleria-filtri .filtro { display: inline-block; background: none; border: 0; border-left: 1px solid #d0d0d0; /* separatore tra una voce e l'altra */ padding: 2px 0 2px 22px; margin-left: 22px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #333; cursor: pointer; line-height: 1; vertical-align: middle; transition: color .2s ease; } .galleria-filtri .filtro:first-child { /* la prima voce non ha separatore a sinistra */ border-left: 0; padding-left: 0; margin-left: 0; } .galleria-filtri .filtro:hover, .galleria-filtri .filtro.active { color: #E30613; } /* rosso brand — adatta all'esatto rosso del tema */ @media (max-width: 480px) { .galleria-filtri { text-align: center; } .galleria-filtri .filtro { padding-left: 12px; margin-left: 12px; } .galleria-filtri .filtro:first-child { padding-left: 0; margin-left: 0; } } /* ========================================================== GRIGLIA MASONRY (colonne CSS) Rispetta l'aspect ratio reale: orizzontali e verticali convivono senza deformazioni. Il max-width evita che su monitor molto grandi (container-fluid) le colonne diventino troppo larghe e le foto si sgranino. ========================================================== */ .galleria { max-width: 1600px; margin: 0 auto; column-gap: 12px; -webkit-column-gap: 12px; column-count: 4; -webkit-column-count: 4; } @media (max-width: 1199px) { .galleria { column-count: 3; -webkit-column-count: 3; } } @media (max-width: 767px) { .galleria { column-count: 2; -webkit-column-count: 2; } } @media (max-width: 480px) { .galleria { column-count: 1; -webkit-column-count: 1; } } .galleria-item { display: inline-block; width: 100%; margin: 0 0 12px; position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; -webkit-column-break-inside: avoid; break-inside: avoid; box-shadow: 0 1px 3px rgba(0,0,0,.15); background: #fff; } .galleria-item.is-hidden { display: none; } /* nascosto dal filtro */ .galleria-item img { display: block; width: 100%; height: auto; /* mantiene le proporzioni originali */ transition: transform .35s ease; } .galleria-item:hover img { transform: scale(1.06); } .galleria-item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); transition: background .3s ease; display: flex; align-items: center; justify-content: center; } .galleria-item:hover .overlay { background: rgba(0,0,0,.35); } .galleria-item .overlay .glyphicon { color: #fff; font-size: 28px; opacity: 0; transition: opacity .3s ease; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .galleria-item:hover .overlay .glyphicon { opacity: 1; } /* ========================================================== LIGHTBOX ========================================================== */ .lb-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.92); z-index: 2000; display: none; opacity: 0; transition: opacity .25s ease; } .lb-overlay.open { display: block; opacity: 1; } .lb-stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 60px 70px; } /* orizzontali + verticali: limite sia in larghezza che in altezza */ .lb-img { max-width: 100%; max-height: 100%; display: block; border-radius: 3px; box-shadow: 0 4px 30px rgba(0,0,0,.6); background: #111; } .lb-close, .lb-prev, .lb-next { position: absolute; z-index: 2010; color: #fff; background: rgba(0,0,0,.35); border: none; cursor: pointer; user-select: none; border-radius: 50%; transition: background .2s ease; } .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.25); } .lb-close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 20px; line-height: 44px; text-align: center; } .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 22px; line-height: 52px; text-align: center; } .lb-prev { left: 18px; } .lb-next { right: 18px; } .lb-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 18px; text-align: center; color: #eee; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); font-size: 14px; } .lb-counter { position: absolute; top: 22px; left: 22px; color: #ccc; font-size: 13px; letter-spacing: 1px; z-index: 2010; } @media (max-width: 600px) { .lb-stage { padding: 50px 12px; } .lb-prev { left: 6px; } .lb-next { right: 6px; } .lb-prev, .lb-next { width: 44px; height: 44px; line-height: 44px; } } .rosso{ color: #C71D20; } /* --- reset minimo solo per l'anteprima --- */ body{ margin:0; font-family:'Poppins',Arial,sans-serif; background:#fff; } /* ============ SEZIONE SEDI ============ */ .sedi-blocchi{ width:100%; } .sedi-blocchi .riga{ display:flex; flex-wrap:wrap; width:100%; } .sedi-blocchi .info, .sedi-blocchi .mappa{ flex:1 1 50%; min-width:0; } /* pannello testo */ .sedi-blocchi .info{ display:flex; flex-direction:column; justify-content:center; padding:55px 60px; } .sedi-blocchi .info .sub{ text-transform:uppercase; letter-spacing:3px; font-size:12px; opacity:.55; margin-bottom:14px; } .sedi-blocchi .info h3{ margin:0 0 18px; font-size:30px; line-height:1.1; text-transform:uppercase; letter-spacing:1px; font-weight:700; } .sedi-blocchi .info p{ margin:5px 0; font-size:15px; line-height:1.65; } .sedi-blocchi .info a{ color:inherit; text-decoration:none; } /* colori alternati */ .sedi-blocchi .info.nero{ background:#1a1a1a; color:#fff; } .sedi-blocchi .info.bianco{ background:#fff; color:#1a1a1a; border:1px solid #e6e6e6; /* si stacca se la pagina è già bianca */ } /* mappa */ .sedi-blocchi .mappa{ line-height:0; } .sedi-blocchi .mappa iframe{ width:100%; height:100%; min-height:400px; border:0; display:block; } /* ---------- MOBILE: tutto impilato ---------- */ @media (max-width:768px){ .sedi-blocchi .info, .sedi-blocchi .mappa{ flex:0 0 100%; } .sedi-blocchi .info{ padding:38px 26px; } .sedi-blocchi .info h3{ font-size:26px; } .sedi-blocchi .mappa iframe{ min-height:320px; } /* nella 2ª sede mostra la mappa SOPRA il testo */ .sedi-blocchi .riga.invertita{ flex-direction:column-reverse; } } /* Form contatti: box più stretto (solo email+social) e campi più larghi */ .cons-contact-form .contact-one{ padding-right:280px !important; position:relative; } .cons-contact-form .contact-info{ width:240px; } .cons-contact-form .social-bx{ padding:0; } .cons-contact-form .social-bx li a{ display:inline-block; width:36px; height:36px; line-height:36px; text-align:center; margin:0 6px 0 0; border-radius:50%; border:1px solid rgba(255,255,255,.35); color:#fff; transition:.3s; } .cons-contact-form .social-bx li a:hover{ background:#fff; color:#000; } @media (max-width:768px){ .cons-contact-form .contact-one{ padding-right:40px !important; } .cons-contact-form .contact-info{ width:auto; position:static; margin-top:25px; } } /* Form contatti: box più stretto (solo email+social) e campi più larghi */ .cons-contact-form .contact-one{ padding-right:280px !important; position:relative; } .cons-contact-form .contact-info{ width:240px; } /* --- BOX rosso invece che nero --- */ .cons-contact-form .contact-info.bg-black{ background:#ce2525 !important; } /* --- PULSANTE invia rosso --- */ .cons-contact-form .site-button.black{ background:#ce2525 !important; } .cons-contact-form .site-button.black:hover{ background:#a71d1d !important; } /* rosso più scuro all'hover */ /* social dentro il box rosso */ .cons-contact-form .social-bx{ padding:0; } .cons-contact-form .social-bx li a{ display:inline-block; width:36px; height:36px; line-height:36px; text-align:center; margin:0 6px 0 0; border-radius:50%; border:1px solid rgba(255,255,255,.55); color:#fff; transition:.3s; } .cons-contact-form .social-bx li a:hover{ background:#fff; color:#ce2525; } @media (max-width:768px){ .cons-contact-form .contact-one{ padding-right:40px !important; } .cons-contact-form .contact-info{ width:auto; position:static; margin-top:25px; } } /* --- BOX rosso con bordo nero --- */ .cons-contact-form .contact-info.bg-black{ background:#ce2525 !important; border:6px solid #000; } /* --- PULSANTE invia rosso con bordo nero --- */ .cons-contact-form .site-button.black{ background:#ce2525 !important; border:6px solid #000 !important; } .cons-contact-form .site-button.black:hover{ background:#a71d1d !important; border:6px solid #000 !important; /* il bordo resta anche all'hover */ }