/* ===================================================== AL CASTELLO CASA VACANZA - FOGLIO DI STILE UNICO Contiene tutte le regole prima duplicate nei singoli file .html Le regole specifiche di una sola pagina sono raggruppate sotto la relativa classe aggiunta al tag (page-home, page-camere, page-contatti, page-esperienze, page-terazza). ===================================================== */ /* FONT ELEGANTE */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Poppins:wght@300;400;500&display=swap'); /* ============ BASE BODY ============ */ body { margin: 0; font-family: 'Poppins', sans-serif; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; color: #ffffff; } /* Sfondo specifico per ogni pagina */ body.page-home { background-image: url('Immagini/DSC_8268.jpg'); } /*body.page-camere {background-color: #D2C3B0;}*/ body.page-camere { background-image: url('a/572251161.jpg'); } body.page-contatti { background-image: url('a/572251565.jpg'); } body.page-esperienze { background-image: url('fotonatale/DSCF2509.jpg'); } body.page-terazza { background-image: url('a//195984071.jpg'); } /* ============ OVERLAY SCURO ============ */ /* Altezza in PIXEL (non % o vh): il px e' un'unita' fissa, uguale su qualsiasi monitor (16", 24", ecc.), quindi l'overlay arriva sempre esattamente allo stesso punto della pagina. Con % o vh, invece, l'altezza cambia in base alla risoluzione dello schermo. Modifica il valore in px di ogni pagina per spostare il punto in cui termina l'overlay. */ .overlay { background: rgba(0, 0, 0, 0.55); width: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /* Punto in cui termina l'overlay in ogni pagina (in pixel fissi) */ .page-home .overlay { height: 1050px; } .page-camere .overlay { height: 130px; } .page-contatti .overlay { height: 130px; } .page-esperienze .overlay { height: 720px; } .page-terazza .overlay { height: 130px; } /* ============ MENU SERVIZI (Casa Vacanza / Camere / Terrazza / Esperienze / Contatti) ============ */ .servizi { display: flex; justify-content: center; gap: 30px; margin: 10px 0; font-family: 'Poppins', sans-serif; font-size: 1.0rem; z-index: 3; position: relative; } .servizi a { text-decoration: none; color: white; padding: 5px 10px; transition: color 0.3s, border-bottom 0.3s; } .servizi a:hover { color: #ffd700; border-bottom: 1px solid #ffd700; } /* ============ BANDIERA LINGUA ============ */ .flag { width: 28px; height: auto; cursor: pointer; transition: 0.3s; } .flag:hover { transform: scale(1.1); } /* ============ HEADER / TITOLO PAGINA ============ */ header { position: relative; text-align: center; } .page-home header { z-index: 2; padding: 20px 20px 40px; } .page-camere header { z-index: 3; padding: 150px 20px 40px; } .page-contatti header { z-index: 3; padding: 250px 20px 40px; } .page-esperienze header { z-index: 2; padding: 20px 20px 0px; } .page-terazza header { z-index: 3; padding: 250px 20px 40px; } header h1 { font-family: 'Playfair Display', serif; font-size: 4.6rem; margin: 0; } header p { font-size: 1.6rem; margin-top: 10px; opacity: 0.9; } /* Sottotitoli h2 nell'header, usati solo nella pagina Camere */ .page-camere header h2 { font-family: 'Playfair Display', serif; font-size: 2.0rem; margin: 0; } /* ============ SLIDER PAGINA HOME (scorrimento continuo) ============ */ body.page-home .slider { position: relative; width: 80%; height: 600px; margin: 60px auto; overflow: hidden; border-radius: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); z-index: 2; } body.page-home .slides { display: flex; transition: transform 2s ease-in-out; width: 100%; transform: translate3d(0, 0, 0); /* GPU accelera */ will-change: transforms; } body.page-home .slides img { flex: 0 0 100%; width: 100%; height: 700px; object-fit: cover; } img { max-width: 100%; height: auto; } body.page-home .arrow { position: absolute; top: 50%; font-size: 3rem; color: white; z-index: 6; cursor: pointer; padding: 10px; transform: translateY(-50%); user-select: none; } body.page-home .arrow.left { left: 20px; } body.page-home .arrow.right { right: 20px; } body.page-home .arrow:hover { color: #dcdcdc; } body.page-home .dots { text-align: center; margin-top: 15px; z-index: 3; position: relative; } body.page-home .dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 3px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background 0.3s; } body.page-home .dots .dot.active { background-color: #ffffff; } /* ============ SLIDER CAMERE / TERRAZZA (slide a comparsa con frecce e pallini) ============ */ .info .slider { width: 45%; position: relative; } .info .slides { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 15px; } .info .slide { width: 100%; height: 100%; object-fit: cover; display: none; } .info .slide.attiva { display: block; } .info .prev, .info .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; background: rgba(0, 0, 0, 0.4); border: none; color: white; padding: 8px 12px; cursor: pointer; border-radius: 50%; } .info .prev { left: 10px; } .info .next { right: 10px; } .info .pallini { text-align: center; margin-top: 10px; } .info .pallini .dot { height: 12px; width: 12px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; display: inline-block; margin: 4px; cursor: pointer; } .info .pallini .dot.attivo { background-color: #ffd700; } /* Contenitore camera/terrazza (slider + testo) */ .contenitore-camera, .contenitore-terazza { display: flex; justify-content: space-between; gap: 40px; align-items: center; } /* Testo accanto allo slider */ .testo-camera, .testo-terazza { width: 50%; } /* ============ BOX INFO (Home, Camere, Terrazza) ============ */ .info { position: relative; z-index: 2; margin: 80px auto; width: 80%; background: rgba(0, 0, 0, 0.632); backdrop-filter: blur(8px); padding: 40px; border-radius: 20px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); } .info h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; margin-bottom: 20px; } .info h3 { font-family: 'Playfair Display', serif; font-size: 2.4rem; margin-bottom: 20px; } .info p { font-size: 1.1rem; line-height: 1.8; max-width: 700px; margin: auto; } /* Bottoni (solo pagina Home) */ .btn { display: inline-block; margin-top: 25px; padding: 12px 28px; font-size: 1rem; background: #ffffff; color: #000000; border-radius: 30px; text-decoration: none; transition: 0.3s; font-weight: 500; } .btn:hover { background: #e3e3e3; } /* ============ COPYRIGHT ============ */ .copyright { font-family: 'Courier New', 'JetBrains Mono', monospace; font-size: 0.8rem; margin: 40px; text-align: center } /* ============ FOOTER CONTAINER ============ */ /*.footer-bottom { position: relative; display: flex; align-items: center; width: 100%; padding: 0 40px; box-sizing: border-box; min-height: 40px; }*/ /* ============ COPYRIGHT ============ */ /*.copyright { font-family: 'Playfair Display', serif; font-size: 0.8rem; margin: 0; text-align: left; }*/ /* ============ CIR/CIN ============ */ /*.cir-cin { font-family: 'Playfair Display', serif; font-size: 0.8rem; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } */ /* ============ PAGINA CONTATTI ============ */ .contatti-wrapper { width: 90%; max-width: 1200px; margin: auto; display: flex; gap: 40px; } .mappa { flex: 1.3; height: 430px; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); } .mappa iframe { width: 100%; height: 100%; border: 0; } .contatti-box { position: relative; z-index: 2; margin: 0px auto; width: 35%; background: rgba(0, 0, 0, 0.632); backdrop-filter: blur(8px); padding: 40px; border-radius: 20px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); } .contatti-box h2 { font-size: 30px; margin-bottom: 25px; color: #ffffff; } .contatto-voce { margin-bottom: 20px; } .contatto-voce .titolo { font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #e7e7e7; } .contatto-voce .valore { font-size: 18px; color: #adadad; text-decoration: none; } .contatto-voce .valore:hover { text-decoration: underline; } /* ============ RECENSIONI GOOGLE (pagina Contatti) ============ */ .recensioni-wrapper { position: relative; z-index: 2; width: 90%; max-width: 1200px; margin: 60px auto 0; text-align: center; } .recensioni-title { font-family: 'Playfair Display', serif; font-size: 2.6rem; margin-bottom: 35px; color: #ffffff; } .recensioni-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .recensione-card { background: rgba(0, 0, 0, 0.632); backdrop-filter: blur(8px); padding: 30px 25px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); text-align: left; transition: transform 0.4s ease, box-shadow 0.4s ease; } .recensione-card:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } .recensione-stelle { color: #ffd700; font-size: 1.3rem; margin: 0 0 12px; letter-spacing: 2px; } .recensione-testo { font-size: 1rem; line-height: 1.7; color: #e7e7e7; margin: 0 0 15px; } .recensione-autore { font-size: 0.9rem; color: #adadad; margin: 0; text-align: right; } .recensioni-btn { margin-top: 40px; } /* ============ PAGINA ESPERIENZE ============ */ .experiences-title { position: relative; z-index: 2; text-align: center; margin-top: 120px; } .experiences-title h2 { font-family: 'Playfair Display', serif; font-size: 3.4rem; margin-bottom: 10px; } .experiences-title p { font-size: 1.3rem; opacity: 0.85; } .experiences { position: relative; z-index: 2; width: 85%; margin: 100px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; } .experience-box { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); padding: 35px 30px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; transition: transform 0.4s ease, box-shadow 0.4s ease; } .experience-box:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } .experience-box h3 { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 15px; } .experience-box p { font-size: 1.05rem; line-height: 1.7; opacity: 0.9; } .experience-img { width: 100%; height: 180px; margin-bottom: 25px; border-radius: 16px; overflow: hidden; } .experience-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .experience-box:hover .experience-img img { transform: scale(1.08); } /* ===================================================== RESPONSIVE - TELEFONO (max-width: 768px) ===================================================== */ @media (max-width: 768px) { body { background-attachment: scroll; } /* OVERLAY */ .overlay { background: linear-gradient(rgba(0, 0, 0, 0.825), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)); position: absolute; } /* Punto in cui termina l'overlay su mobile (in pixel fissi) */ .page-home .overlay { height: 870px; } .page-camere .overlay { height: 350px; } .page-contatti .overlay { height: 350px; } .page-esperienze .overlay { height: 350px; } .page-terazza .overlay { height: 350px; } /* HEADER */ .page-camere header, .page-contatti header, .page-esperienze header, .page-terazza header { padding: 80px 20px 20px; } header h1 { font-size: 2.2rem; line-height: 1.2; } header p { font-size: 1.1rem; } body.page-home header h2 { font-size: 1.1rem; } body.page-camere header h2 { font-size: 1.1rem; line-height: 1.4; } /* MENU */ .servizi { flex-direction: column; gap: 10px; font-size: 0.95rem; text-align: center; } .flag { margin-left: 0 !important; } /* SLIDER HOME */ body.page-home .slider { width: 95%; height: 280px; margin: 30px auto; } body.page-home .slides img { height: 280px; } body.page-home .arrow { font-size: 2rem; } /* SLIDER CAMERE / TERRAZZA */ .contenitore-camera, .contenitore-terazza { flex-direction: column; gap: 20px; } .info .slider { width: 100%; } .info .slides { height: 250px; } .info .prev, .info .next { font-size: 24px; padding: 6px 10px; } .testo-camera, .testo-terazza { width: 100%; } /* INFO BOX */ .info { width: 85%; padding: 20px; margin: 40px auto; } .info h2 { font-size: 2rem; } .info h3 { font-size: 1.5rem; } .info p { font-size: 0.95rem; line-height: 1.6; } /* BARRA CONTATTI SOPRA (indirizzo/telefono/email) */ body > div:first-of-type { flex-direction: column; gap: 8px; text-align: center; } /* PAGINA CONTATTI */ .contatti-wrapper { flex-direction: column; width: 100%; gap: 25px; align-items: center; } .mappa { height: 300px; } .contatti-box { padding: 25px 20px; } .contatti-box h2 { font-size: 24px; margin-bottom: 20px; } .contatto-voce .titolo { font-size: 14px; } .contatto-voce .valore { font-size: 16px; } /* PAGINA ESPERIENZE */ .experiences-title { margin-top: 60px; } .experiences-title h2 { font-size: 2rem; } .experiences-title p { font-size: 1rem; } .experiences { width: 90%; margin: 50px auto; gap: 25px; grid-template-columns: 1fr; } .experience-box { padding: 25px 20px; } .experience-box h3 { font-size: 1.6rem; } .experience-box p { font-size: 0.95rem; line-height: 1.6; } .experience-img { height: 150px; margin-bottom: 20px; } /* RECENSIONI */ .recensioni-title { font-size: 1.8rem; } .recensioni-grid { grid-template-columns: 1fr; gap: 20px; } .recensione-card { padding: 20px; } }