/* ========================================================================== 1. RESET, VARIABILI E REGOLE BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --green: #16554f; --green-dark: #11443f; --green-light: #e8f5e9; --black: #1a1a1a; --dark: #5a5a5a; --white: #ffffff; --gray-light: #f5f5f5; --gray-mid: #e0e0e0; --gray-text: #666666; --font: 'Segoe UI', Arial, sans-serif; } body { font-family: var(--font); color: var(--black); font-size: 1 rem; line-height: 1.6; position: relative; /* ── IL TUO SFONDO SU TUTTO IL SITO ── */ background: url('img/bg_services.jpg') center top / cover no-repeat fixed; /* Nota: ho aggiunto 'fixed' così lo sfondo resta immobile e l'effetto blueprint è spettacolare mentre i contenuti ci scorrono sopra. Se preferisci che si muova, cancella 'fixed' */ } /* 2. SE NON AVEVI UN'IMMAGINE DI SFONDO GENERALE, CANCELLA DEL TUTTO QUESTO BLOCCO SOTTO (body::before). Se invece l'avevi, imposta qui il percorso corretto della tua immagine */ body::before { content: ''; position: fixed; inset: 0; background: url('../img/IL_TUO_SFONDO_ORIGINALE.jpg') center/cover no-repeat; opacity: 1; /* Regola l'opacità se vuoi che si veda lo sfondo del body sotto */ z-index: -1; } /* ── AGGIUNTI PER RISOLVERE IL TUO PROBLEMA ── */ img { max-width: 100%; height: auto; } main { width: 100%; background-color: transparent; /* Rimossa la larghezza massima: ora le sezioni interne respirano a tutto schermo */ /* Elimina lo spazio vuoto tra il main e il footer */ margin-bottom: 0 !important; } /* Se la tua Home Page deve essere a tutto schermo, ti basta aggiungere la classe "home-page" al tag solo nel file HTML della home (es: ). In questo modo il codice qui sotto si attiverà SOLO lì senza rompere le altre pagine. */ body.home-page main { max-width: none; padding: 0; margin: 0; } /* ══════════════════════════════════════ COOKIE BANNER Aggiungere in fondo al file style.css ══════════════════════════════════════ */ .cookie-banner { position: fixed; bottom: -100%; left: 0; right: 0; z-index: 9999; padding: 0 24px 24px; pointer-events: none; transition: bottom 0.4s cubic-bezier(0.34, 1.26, 0.64, 1); } .cookie-banner.visible { bottom: 0; pointer-events: all; } .cookie-banner.hiding { bottom: -100%; transition: bottom 0.4s ease-in; } .cookie-banner-inner { max-width: 860px; margin: 0 auto; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .cookie-banner-text { flex: 1; } .cookie-banner-text strong { display: block; color: #fff; font-size: 0.95rem; margin-bottom: 4px; } .cookie-banner-text p { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; line-height: 1.5; margin: 0; } .cookie-banner-text a { color: #4caf50; text-decoration: underline; } .cookie-banner-btn { flex-shrink: 0; background: #4caf50; color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; white-space: nowrap; } .cookie-banner-btn:hover { background: #43a047; } .cookie-banner-btn:active { transform: scale(0.97); } /* Mobile */ @media (max-width: 600px) { .cookie-banner { padding: 0 12px 12px; } .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px; } .cookie-banner-btn { width: 100%; text-align: center; } } /* ========================================================================== 2. LAYOUT STRUTTURALE (TOPBAR, NAV, NAVIGATION) ========================================================================== */ .topbar { background: var(--green); color: rgba(255,255,255,0.75); font-size: 0.8125rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .topbar-inner { max-width: 75rem; margin: 0 auto; padding: 0 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.375rem; } .topbar-left { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; } .topbar-left a { color: rgba(255,255,255,0.7); text-decoration: none; display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; transition: color .2s; } .topbar-left a:hover { color: var(--black); } .topbar-right { display: flex; gap: 0.625rem; } .topbar-right a { color: rgba(255,255,255,0.55); font-size: 1.125rem; text-decoration: none; line-height: 1; transition: color .2s; display: flex; align-items: center; } .topbar-right a:hover { color: var(--black); } header { background: var(--black); position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--green); } nav { max-width: 100rem; margin: 0 auto; padding: 0 1.25rem; height: 10rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .logo img { height: 8rem; display: block; } .nav-links { list-style: none; display: flex; gap: 0.25rem; align-items: center; } .nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9375rem; font-weight: 500; padding: 0.4375rem 1rem; border-radius: 5px; transition: all .2s; } .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); } .nav-links a.active { color: #fff; background: var(--green); } .nav-cta { background: var(--green); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.875rem; padding: 0.625rem 1.375rem; border-radius: 6px; white-space: nowrap; transition: background .2s; } .nav-cta:hover { background: var(--green-dark); } .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; background: none; border: none; cursor: pointer; padding: 0.25rem; gap: 0.3125rem; z-index: 1001; } .hamburger span { display: block; width: 1.5rem; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 3. SEZIONI COMPONENTI DELLA PAGINA (HERO, CHI SIAMO, SERVIZI, ECC) ========================================================================== */ /* ── PAGE HEADER & BREADCRUMB ── */ .page-header { background: var(--dark); padding: 3rem 1.25rem 2.75rem; text-align: center; } .breadcrumb { font-size: 0.8125rem; color: rgba(255,255,255,0.4); margin-bottom: 0.875rem; display: flex; justify-content: center; gap: 0.375rem; align-items: center; } .breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; } .breadcrumb a:hover { color: var(--green); } .page-header h1 { font-size: 2.625rem; font-weight: 700; color: var(--white); } /* ── HERO SECTION ── */ .hero { background: #2a2a2a; min-height: 80vh; display: flex; align-items: center; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(22,85,79,0.35) 0%, transparent 70%); pointer-events: none; } .hero-inner { max-width: 75rem; margin: 0 auto; padding: 5rem 3rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: 100%; position: relative; z-index: 1; } .hero-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 1.25rem; } .hero-text h1 { font-size: clamp(2.4rem, 4.5vw, 3.75rem); font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: 1.375rem; letter-spacing: -0.025em; } .hero-text p { font-size: 1.0625rem; color: rgba(255,255,255,0.6); font-style: italic; line-height: 1.65; margin-bottom: 2.25rem; max-width: 30rem; } .btn-hero { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.875rem 1.75rem; border-radius: 6px; transition: background .2s, transform .15s; } .btn-hero:hover { background: var(--green-dark); transform: translateY(-1px); } .btn-hero svg { flex-shrink: 0; } .hero-visual { display: flex; justify-content: center; align-items: center; } .hero-visual img { max-height: 26rem; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); } /*hero riparazioni*/ .hero-riparazioni { background-image: url('img/img-riparazioni.jpg'); background-size: cover; background-position: center; position: relative; } .hero-riparazioni::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* overlay scuro */ z-index: 0; } .hero-riparazioni .hero-inner { position: relative; z-index: 1; } /*hero accessori*/ .hero-accessori { background-image: url('img/img-accessori.jpg'); background-size: cover; background-position: center; position: relative; } .hero-accessori::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* overlay scuro */ z-index: 0; } .hero-accessori .hero-inner { position: relative; z-index: 1; } /*hero ricondizionati*/ .hero-ricondizionati { background-image: url('img/img-ricondizionati.jpg'); background-size: cover; background-position: center; position: relative; } .hero-ricondizionati::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* overlay scuro */ z-index: 0; } .hero-ricondizionati .hero-inner { position: relative; z-index: 1; } /*hero valutazioni*/ .hero-valutazioni { background-image: url('img/img-vendita.jpg'); background-size: cover; background-position: center; position: relative; } .hero-valutazioni::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* overlay scuro */ z-index: 0; } .hero-valutazioni .hero-inner { position: relative; z-index: 1; } /* ── FOTO NEGOZIO SLIDER ── */ .negozio-slider-outer { width: 80%; max-width: 1200px; margin: 4rem auto; overflow: hidden; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); aspect-ratio: 16 / 9; } .negozio-slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.8s ease-in-out; } .negozio-slider-track img { min-width: 100%; width: 100%; height: 100%; object-fit: cover; display: block; } .negozio-photo-placeholder { width: 100%; height: 18rem; background: linear-gradient(90deg, #c8c8c8 0%, #e0e0e0 50%, #c8c8c8 100%); display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ── FEATURE CARDS ── */ .features-section { width: 100%; background: transparent; /* ◄ Rende la sezione invisibile per mostrare il body sotto */ /* Distanze verticali perfettamente speculari per non avere sbilanciamenti */ padding-top: 5rem; /* ◄ Spazio esatto rispetto alla foto sopra */ padding-bottom: 5rem; /* ◄ Spazio esatto rispetto alla sezione sotto */ margin: 0; /* ◄ Elimina ogni margine sporco */ } .features-grid { max-width: 75rem; margin: 0 auto; /* ◄ Centra il gruppo delle 3 schede */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; padding: 0 2rem; /* ◄ Protezione per non farle attaccare ai bordi sui portatili */ } .feature-item { text-align: center; display: flex; flex-direction: column; align-items: center; background-color: var(--white); padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .feature-icon { width: 5rem; height: 5rem; margin: 0 auto 1.5rem; color: var(--green); } .feature-icon svg { width: 100%; height: 100%; } .feature-item h3 { font-size: 1.25rem; font-weight: 700; color: var(--black); margin-bottom: 0.875rem; } .feature-item p { font-size: 0.9375rem; color: var(--gray-text); line-height: 1.7; max-width: 22rem; margin: 0 auto; text-align: center; } /* ── CHI SIAMO ── */ .chi-siamo { background: #f7f7f7; padding: 5rem 2rem; } .chi-siamo-inner { max-width: 75rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .chi-siamo-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--gray-mid); line-height: 0; } .chi-siamo-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .chi-siamo-placeholder { width: 100%; height: 100%; min-height: 20rem; background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%); display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } .chi-siamo-text .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; } .chi-siamo-text h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 800; color: var(--black); line-height: 1.15; margin-bottom: 1.375rem; letter-spacing: -0.02em; } .chi-siamo-text p { color: var(--gray-text); font-size: 0.9375rem; line-height: 1.75; } /* ── SERVIZI ── */ .servizi-section { padding: 6rem 0 3rem; } .servizi-header { text-align: center; padding: 2rem 1.25rem; max-width: 100%; /* Blocca la larghezza del testo introduttivo */ margin: 0 auto 2em; background-color: var(--white); } .servizi-header .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; } .servizi-header h2 { font-size: clamp(2rem, 4vw, 2.875rem); font-weight: 800; color: var(--black); line-height: 1.15; margin-bottom: 1rem; letter-spacing: -0.02em; } .servizi-header p { color: var(--gray-text); font-size: 1.0625rem; line-height: 1.65; } .servizio-row { max-width: 75rem; /* Sostituito l'80% con un limite fisso per non farla esplodere */ width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; /* Allinea perfettamente l'altezza di foto e testo */ margin-left: auto; margin-right: auto; margin-bottom: 2em; border-radius: 20px; overflow: hidden; /* Taglia gli angoli della foto per seguire i bordi arrotondati */ } .servizio-row.reverse { direction: rtl; } .servizio-row.reverse > * { direction: ltr; } .servizio-img { overflow: hidden; line-height: 0; position: relative; height: 100%; } .servizio-img img { width: 100%; height: 100%; object-fit: cover; /* Ritaglia l'immagine in modo armonioso senza distorcerla */ display: block; } .servizio-img-placeholder { width: 100%; height: 100%; min-height: 28rem; background: #d0d0d0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } .servizio-body { background: #f0f0f0; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 4rem; } .servizio-body h3 { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); margin-bottom: 1.125rem; } .servizio-body p { font-size: 0.9375rem; color: #444; line-height: 1.75; margin-bottom: 2rem; } .btn-scopri { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.5rem; border-radius: 4px; align-self: flex-start; transition: background .2s; } .btn-scopri:hover { background: var(--green-dark); } /* ── CONTATTI & MAPPA ── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.125rem; align-items: start; max-width: 75rem; margin: 3.75rem auto; } .col-left, .col-right { background: var(--white); border-radius: 12px; padding: 2rem; } .col-left h2, .col-right h2 { font-size: 1.75rem; font-weight: 700; color: var(--black); margin-bottom: 1rem; } .col-right h2 { margin-bottom: 1.5rem; } .col-left p { color: var(--gray-text); font-size: 0.9375rem; line-height: 1.7; margin-bottom: 1.875rem; } .col-left p strong { color: var(--black); } .contact-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .contact-list li a { display: flex; align-items: center; gap: 0.75rem; color: var(--black); text-decoration: none; font-size: 0.9375rem; padding: 0.75rem 1rem; border: 1px solid var(--gray-mid); border-radius: 8px; transition: border-color .2s, color .2s; } .contact-list li a:hover { border-color: var(--green); color: var(--green-dark); } .icon { width: 2.25rem; height: 2.25rem; background: var(--green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green-dark); } .icon svg { width: 1.125rem; height: 1.125rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .form-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.875rem; } .form-group label { font-size: 0.8125rem; font-weight: 600; color: var(--black); } .form-group input, .form-group textarea { border: 1px solid var(--gray-mid); border-radius: 6px; padding: 0.6875rem 0.875rem; font-size: 0.9375rem; font-family: var(--font); color: var(--black); background: var(--white); outline: none; transition: border-color .2s; width: 100%; } .form-group input:focus, .form-group textarea:focus { border-color: var(--green); } .form-group textarea { min-height: 7.5rem; resize: vertical; } .btn-send { background: var(--green); color: #fff; border: none; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; padding: 0.8125rem 2.25rem; cursor: pointer; transition: background .2s; width: 100%; margin-top: 0.25rem; } .btn-send:hover { background: var(--green-dark); } .map-section { max-width: 75rem; margin: 3.75rem auto 0; } .map-section iframe { width: 100%; height: 23.75rem; border: 1px solid var(--gray-mid); border-radius: 10px; display: block; } /* ── TESTIMONIANZE ── */ .testimonianze { background: #1a1a1a; padding: 5rem 2rem; } .testimonianze-header { text-align: center; } .testimonianze-header .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1rem; } .testimonianze-header h2 { font-size: clamp(2rem, 4vw, 2.875rem); font-weight: 700; color: #fff; letter-spacing: -0.01em; } .testi-slider-outer { overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 0; } .testi-track { display: flex; transition: transform 0.5s ease-in-out; width: 100%; } .testi-slide { min-width: 100%; display: flex; gap: 20px; padding: 0 15px; box-sizing: border-box; } .testi-card { flex: 1; background: #252526; color: #f5f5f5; padding: 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; justify-content: space-between; } .testi-stars { color: #ffc107; font-size: 1.1rem; margin-bottom: 12px; } .testi-card blockquote { color: #e0e0e0; margin: 0 0 15px 0; line-height: 1.5; } .testi-author strong { color: #ffffff; } .testi-author span { color: #aaaaaa; margin-left: 5px; font-size: 0.9rem; } .testi-dots { text-align: center; margin-top: 20px; } .testi-dots span { display: inline-block; width: 12px; height: 12px; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background 0.3s; } .testi-dots span.active { background: #333; } /* ── CTA BANNER ── */ .cta-banner { background: var(--green); padding: 4.5rem 2rem; margin-top: 2em; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 50% 110%, rgba(255,255,255,0.06) 0%, transparent 70%); } .cta-banner h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1rem; position: relative; } .cta-banner p { color: rgba(255,255,255,0.8); font-size: 1.0625rem; margin-bottom: 2rem; position: relative; } .cta-banner .btn-white { background: #fff; color: var(--green-dark); text-decoration: none; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.875rem 2.25rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform .15s, box-shadow .15s; position: relative; } .cta-banner .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } /* ── UTILITY FLOATING ELEMENTS ── */ .wa-float { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 999; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.45); transition: transform .2s, box-shadow .2s; } .wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,0.55); } .wa-float svg { width: 1.75rem; height: 1.75rem; } /* ========================================================================== 4. FOOTER COMPONENT ========================================================================== */ .footer-col-logo h4 { display: none; } footer { background-color: var(--green); color: var(--white); margin-top: 4.375rem; } .footer-top { max-width: 80%; margin: 0 auto; padding: 3.125rem 1.25rem 2.25rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; justify-items: center; } .footer-top > div { padding: 0 1.25rem; } .footer-top > div:first-child { display: flex; flex-direction: column; align-items: center; max-width: 13.75rem; margin: 0 auto; } .footer-logo { display: block; margin-bottom: 0.875rem; } .footer-logo img { display: block; width: 100%; max-width: 13.75rem; } .footer-desc { font-size: 1.5rem; line-height: 1.65; margin-bottom: 1.125rem; color: var(--white); } .footer-social { display: flex; gap: 0.625rem; } .footer-social a { width: 2.125rem; height: 2.125rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: all .2s; } .footer-social a:hover { border-color: var(--black); color: var(--black); } .footer-col h4 { color: var(--white); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5625rem; } .footer-col ul a { color: var(--white); text-decoration: none; font-size: 1.5rem; transition: color .2s; } .footer-col ul li a img { width: 1em; height: 1em; flex-shrink: 0; margin-right: 0.5em; } .orari-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .orari-list li { display: flex; justify-content: space-between; padding: 0.4375rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 1.5rem; } .orari-list li:last-child { border-bottom: none; } .day { color: var(--white); font-weight: 600; } .time { color: var(--white); text-align: right; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); } .footer-bottom-inner { max-width: 75rem; margin: 0 auto; padding: 1rem 1.25rem; display: flex; justify-content: space-between; font-size: 0.75rem; color: rgba(255,255,255,0.3); flex-wrap: wrap; gap: 0.5rem; } .footer-bottom-inner a { color: rgba(255,255,255,0.3); text-decoration: none; } .footer-bottom-inner a:hover { color: rgba(255,255,255,0.6); } /* ========================================================================== 5. SEZIONE MEDIA QUERIES (COMPATTATE E ORDINATE DA MAX A MIN) ========================================================================== */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; padding: 3.5rem 1.5rem; } .hero-visual { display: none; } .hero-text p { max-width: none; } .features-grid { grid-template-columns: 1fr; gap: 2.5rem; } .chi-siamo-inner { grid-template-columns: 1fr; gap: 2.5rem; } .servizio-row, .servizio-row.reverse { grid-template-columns: 1fr; direction: ltr; } .servizio-img, .servizio-img-placeholder { min-height: 18rem; } .servizio-body { padding: 2.5rem 2rem; } .contact-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { /* Topbar */ .topbar-left { display: none; } .topbar-inner { justify-content: flex-end; } /* Nav */ header nav { position: relative; flex-wrap: wrap; padding: 0 1rem; height: auto; min-height: 3.75rem; align-items: center; } .hamburger { display: flex; } .nav-links { display: none; flex-direction: column; width: 100%; background: inherit; padding: 0 0 1rem; gap: 0; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links li a { display: block; padding: 0.75rem 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 1rem; } .nav-cta { display: none; } /* Page header */ .page-header { padding: 1.5rem 1rem; } .page-header h1 { font-size: 1.875rem; } /* Contact */ .contact-grid { grid-template-columns: 1fr !important; } .form-row { grid-template-columns: 1fr; } .map-section iframe { height: 17.5rem; } /* Slider Testimonianze Mobile */ .testi-slide { flex-direction: column; } /* Footer Mobile */ .footer-top { grid-template-columns: 1fr !important; max-width: 90%; gap: 2.5rem; padding: 2.5rem 1.25rem; justify-items: center; text-align: center; } .footer-top > div { width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; } .footer-top > div:first-child { align-items: center; max-width: 7rem; margin: 0 auto; } .orari-list li { justify-content: center; gap: 0.75rem; font-size: 0.75rem; } .footer-bottom-inner { flex-direction: column; gap: 0.5rem; text-align: center; padding: 1rem; } .footer-col ul li a { word-break: break-all; overflow-wrap: anywhere; white-space: normal; font-size: 0.85rem; } .footer-logo img { display: block; width: 100%; max-width: 7rem; } } @media (max-width: 600px) { .hero-text h1 { font-size: 2rem; } .hero-inner { padding: 3rem 1.25rem; } .servizi-header { padding: 0 1.25rem 3rem; } .cta-banner h2 { font-size: 1.625rem; } } @media (max-width: 576px) { .negozio-slider-outer { width: 90%; aspect-ratio: 4 / 3; } } @media (max-width: 480px) { .map-section iframe { height: 13.75rem; } .page-header h1 { font-size: 1.6rem; } } /* ========================================================================== PAGINA SERVIZI — regole aggiuntive ========================================================================== */ /* ── INTRO ── */ .servizi-intro { background: var(--white); padding: 4rem 2rem 3rem; text-align: center; } .servizi-intro-inner { max-width: 50rem; margin: 0 auto; } .servizi-intro .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; } .servizi-intro h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--black); line-height: 1.15; margin-bottom: 1.125rem; letter-spacing: -0.02em; } .servizi-intro p { color: var(--gray-text); font-size: 1.0625rem; line-height: 1.7; } /* ── 4 CARD SERVIZI ── */ .servizi-cards-section { background: var(--gray-light); padding: 4rem 2rem; } .servizi-cards-grid { max-width: 75rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .servizio-card { background: var(--white); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); overflow: hidden; display: flex; flex-direction: column; } .servizio-card-img-link { display: block; overflow: hidden; aspect-ratio: 4 / 3; } .servizio-card-img-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .servizio-card:hover .servizio-card-img-link img { transform: scale(1.04); } .servizio-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .servizio-card-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--black); margin-bottom: 0.625rem; } .servizio-card-body p { font-size: 0.9rem; color: var(--gray-text); line-height: 1.65; margin-bottom: 1.25rem; flex: 1; } /* ── 3 BOX PERCHÉ SCEGLIERCI ── */ .perche-section { background: var(--white); padding: 4.5rem 2rem; } .perche-grid { max-width: 75rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .perche-item { text-align: center; padding: 2.5rem 1.5rem; background: var(--gray-light); border-radius: 12px; } .perche-icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; color: var(--green); } .perche-icon svg { width: 100%; height: 100%; } .perche-item h3 { font-size: 1.125rem; font-weight: 700; color: var(--black); margin-bottom: 0.75rem; } .perche-item p { font-size: 0.9375rem; color: var(--gray-text); line-height: 1.65; } /* ── FAQ ── */ .faq-section { background: var(--gray-light); padding: 5rem 2rem; } .faq-inner { max-width: 50rem; margin: 0 auto; } .faq-header { text-align: center; margin-bottom: 3rem; } .faq-header .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 0.75rem; } .faq-header h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; color: var(--black); margin-bottom: 0.75rem; letter-spacing: -0.02em; } .faq-header p { color: var(--gray-text); font-size: 1rem; line-height: 1.65; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .faq-question { width: 100%; background: none; border: none; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1rem; font-weight: 600; color: var(--black); cursor: pointer; text-align: left; font-family: var(--font); transition: color 0.2s; } .faq-question:hover { color: var(--green); } .faq-icon { flex-shrink: 0; color: var(--green); transition: transform 0.3s ease; } .faq-item.open .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; padding: 0 1.5rem; } .faq-item.open .faq-answer { max-height: 20rem; padding: 0 1.5rem 1.25rem; } .faq-answer p { color: var(--gray-text); font-size: 0.9375rem; line-height: 1.7; } /* ── CTA + MAPPA ── */ .cta-contatti-section { background: var(--green); padding: 4rem 2rem; } .cta-contatti-inner { max-width: 75rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .cta-contatti-text .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.875rem; } .cta-contatti-text h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; color: #fff; margin-bottom: 1rem; line-height: 1.2; } .cta-contatti-text p { color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.65; margin-bottom: 2rem; } .cta-contatti-text .btn-white { background: #fff; color: var(--green-dark); text-decoration: none; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.875rem 2rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform .15s, box-shadow .15s; } .cta-contatti-text .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .cta-contatti-map iframe { width: 100%; height: 22rem; border-radius: 10px; border: none; display: block; } /* ── RESPONSIVE SERVIZI ── */ @media (max-width: 1024px) { .servizi-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .servizi-cards-grid { grid-template-columns: repeat(2, 1fr); } .perche-grid { grid-template-columns: 1fr; } .cta-contatti-inner { grid-template-columns: 1fr; } .cta-contatti-map iframe { height: 16rem; } } @media (max-width: 480px) { .servizi-cards-grid { grid-template-columns: 1fr; } } /* ── NUOVA SEZIONE INTERNA DETTAGLIO SERVIZI ── */ .servizi-layout-container { padding: 60px 20px; background-color: #ffffff; } .servizi-layout-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 50px; align-items: flex-start; /* aggiunto */ } /* Sidebar Sinistra */ .servizi-sidebar { flex: 0 0 300px; display: flex; flex-direction: column; gap: 30px; align-self: flex-start; /* aggiunto */ } .sidebar-title { font-size: 1.5rem; font-weight: 700; color: #111111; text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-menu { display: flex; flex-direction: column; gap: 12px; } .sidebar-btn { display: block; background-color: #f9f9f9; color: #333333; text-decoration: none; padding: 14px 18px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid #111111; transition: all 0.2s ease; } .sidebar-btn:hover, .sidebar-btn.active { background-color: #111111; color: #ffffff; border-bottom-color: #111111; } /* Card Contatti in Sidebar */ .sidebar-contatti-card { border: 1px solid #e5e5e5; padding: 25px 20px; border-radius: 4px; background-color: #ffffff; margin-top: 5rem; /* = 20px */ } .sidebar-contatti-card h4 { font-size: 1.3rem; margin-bottom: 12px; color: #111111; font-weight: 700; } .sidebar-contatti-card p { font-size: 0.95rem; color: #555555; line-height: 1.6; margin-bottom: 18px; } .sidebar-contatti-icons { display: flex; gap: 12px; } .sidebar-contatti-icons a { color: #111111; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e5e5e5; border-radius: 50%; transition: all 0.2s ease; } .sidebar-contatti-icons a:hover { background-color: #111111; color: #ffffff; border-color: #111111; } /* Contenuto Principale Destro */ .servizi-main-content { flex: 1; } .servizi-intro-text { font-size: 1.1rem; line-height: 1.7; color: #222222; margin-bottom: 20px; } .servizi-separator { border: 0; border-top: 1px solid #eeeeee; margin: 30px 0; } .servizi-detail-block h3 { font-size: 1.5rem; color: #111111; margin-bottom: 12px; font-weight: 700; } .servizi-detail-block p { font-size: 1rem; line-height: 1.6; color: #444444; margin-bottom: 15px; } /* Responsive Mobile e Tablet */ @media (max-width: 992px) { .servizi-layout-inner { flex-direction: column; gap: 40px; } .servizi-sidebar { flex: none; width: 100%; } } /*sezione policy*/ .privacy-intro { background: #f7f7f7; padding: 64px 24px 48px; text-align: center; } .privacy-intro-inner { max-width: 760px; margin: 0 auto; } .privacy-intro h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #222; margin: 8px 0 16px; font-weight: 700; } .privacy-intro p { color: #555; font-size: 1rem; line-height: 1.7; } .privacy-body { background-color: var(--white); max-width: 80%; margin: 3em auto; border-radius: 20px; padding: 56px 24px 80px; } .privacy-body h2 { font-size: 1.25rem; font-weight: 700; color: #222; margin: 40px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #4caf50; display: inline-block; } .privacy-body h2:first-child { margin-top: 0; } .privacy-body p, .privacy-body li { color: #444; font-size: 0.97rem; line-height: 1.8; } .privacy-body ul { padding-left: 20px; margin: 10px 0 16px; } .privacy-body ul li { margin-bottom: 6px; } .privacy-body a { color: #4caf50; text-decoration: underline; } .privacy-body strong { color: #222; } .privacy-update { display: inline-block; margin-top: 40px; background: #f0f9f0; border-left: 4px solid #4caf50; padding: 12px 20px; border-radius: 0 6px 6px 0; font-size: 0.88rem; color: #555; }