/* ========================= VARIABILI DI BASE ========================= */ :root{ --gold:#d4af37; --gold-soft:#bfa063; --gold-light:#e6c46b; --dark:#2b2320; --muted:#6a625c; --bg-home:radial-gradient(circle at top, #fff7e0 0, #fff 45%, #f6efe0 100%); --bg-chi:#f5f4ff; --bg-esibizioni:#f7e28b; --bg-media:#f3f9ff; --bg-risorse:#f5f6ff --bg-dona:#fff8ea; --bg-contatti:#f4fff7; --bg-privacy:#f8f8f8; } /* ========================= RESET BASE ========================= */ *{box-sizing:border-box;} body{ margin:0; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--dark); } /* BACKGROUND PER PAGINA (class sul ) */ body.home-page{background:var(--bg-home);} body.page-chi{background:var(--bg-chi);} body.page-esibizioni { background: linear-gradient(135deg, #f7f2e8, #e6d9b8, #f7f2e8); } body.page-media{background:var(--bg-media);} body.page-risorse{background:var(--bg-risorse);} body.page-dona{background:var(--bg-dona);} body.page-contatti{background:var(--bg-contatti);} body.page-privacy{background:var(--bg-privacy);} /* TITOLI GENERICI */ h1,h2,h3{ margin-top:0; text-align:center; } /* LISTE SENZA PUNTINI */ ul{ padding-left:0; list-style:none; } ul li{ margin:.5rem 0; } /* ========================= HEADER + MENU ========================= */ /* Barra in alto con sfondo oro perlato */ .site-header{ background:linear-gradient(135deg,#f7f2e8,#e6d9b8,#f7f2e8); background-size:200% 200%; animation:goldShimmer 14s ease-in-out infinite; border-bottom:1px solid rgba(176,138,69,.25); } /* Contenitore del menu (logo + voci) */ .nav{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 1.5rem; } /* Logo + scritta Divino Amore */ .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--gold-soft); } .brand-logo{ border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.18); } .brand-text{ font-weight:700; font-size:1.1rem; letter-spacing:.03em; } /* Lista voci: Home, Chi siamo, ecc. */ .menu{ list-style:none; display:flex; align-items:center; gap:1.6rem; margin:0; padding:0; } /* Link del menu */ .menu a{ position:relative; color:var(--gold-soft); font-weight:600; text-decoration:none; font-size:1rem; letter-spacing:.4px; transition:all .25s ease; } /* Hover */ .menu a:hover{ color:#e3c98a; transform:scale(1.05); } /* Pagina attiva */ .menu a.active{ color:var(--gold-light); font-weight:700; } /* Underline animata elegante */ .menu a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background-color:var(--gold-light); transition:width .3s ease-in-out; } .menu a:hover::after, .menu a.active::after{ width:100%; } /* Animazione luce oro sulla barra */ @keyframes goldShimmer{ 0%{background-position:0% 50%;} 100%{background-position:100% 50%;} } /* MENU SU CELLULARE */ @media (max-width:768px){ .nav{ flex-direction:column; align-items:center; gap:.7rem; padding:.9rem 1rem 1.1rem; } .menu{ flex-wrap:wrap; justify-content:center; gap:.9rem 1.4rem; } .menu a{ font-size:.95rem; } } /* ========================= HERO (HOME) ========================= */ .hero{ padding:3.5rem 1rem 2.5rem; text-align:center; } .hero-inner{ max-width:900px; margin:0 auto; text-align:center; } .hero-logo{ width:150px; height:150px; border-radius:999px; box-shadow:0 12px 40px rgba(0,0,0,.35); object-fit:cover; } .hero-title{ margin:1rem 0 .4rem; font-size:2.6rem; letter-spacing:.12em; } .hero-subtitle{ margin:0 auto 1.5rem; max-width:520px; color:var(--muted); font-size:1.05rem; } /* ========================= STRUTTURA SEZIONI ========================= */ .section{ padding:3rem 1rem; } .container{ max-width:800px; margin:0 auto; } /* ========================= VIDEO GENERICI ========================= */ .video-player{ width:100%; max-width:900px; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.35); background:#000; margin:1rem auto; display:block; } .hint{ font-size:.9rem; color:var(--muted); margin-top:.4rem; text-align:center; } /* ========================= FOOTER ========================= */ .site-footer{ border-top:1px solid rgba(0,0,0,.06); padding:1.5rem 1rem 2rem; text-align:center; font-size:.9rem; color:var(--muted); background:#ffffffd0; } /* ========================= PAGINA DONA ========================= */ .donation-grid{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; } .donation-card{ flex:1 1 260px; max-width:360px; padding:1.5rem 1.3rem; border-radius:18px; background:#ffffffd9; box-shadow:0 10px 25px rgba(0,0,0,.08); } .donation-card h2{ margin-bottom:.6rem; } .btn-paypal{ display:inline-block; margin-top:1rem; padding:.7rem 1.4rem; border-radius:999px; background:#ffc439; color:#111; font-weight:600; text-decoration:none; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.18); } .btn-paypal:hover{ filter:brightness(.95); } .iban-box{ margin-top:1rem; padding:1rem 1rem 1.2rem; border-radius:14px; background:#fdf7e7; border:1px solid rgba(0,0,0,.06); } .iban-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:.2rem 0; } .iban-holder{ margin:.1rem 0 .4rem; font-weight:500; } .iban-code{ font-family:monospace; font-size:.95rem; padding:.3rem .6rem; border-radius:8px; background:#fff; display:inline-block; } .btn-copy-iban{ display:inline-block; margin-top:.6rem; padding:.45rem 1rem; border-radius:999px; border:1px solid var(--gold); background:transparent; font-size:.85rem; cursor:pointer; } .btn-copy-iban.copied{ background:var(--gold); color:#1b1b1b; font-weight:600; } /* ========================= PAGINA MEDIA ========================= */ .media-grid{ margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; } .media-card{ background:#ffffffd9; border-radius:18px; padding:1.3rem 1.1rem 1.6rem; box-shadow:0 10px 25px rgba(0,0,0,.12); } .media-card h2{ margin-bottom:.6rem; } .media-label{ display:inline-block; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0 0 .25rem; } .media-subtitle{ margin-top:.4rem; font-size:.95rem; color:var(--muted); } .media-outro{ margin-top:2.5rem; font-size:.95rem; color:var(--muted); text-align:center; } @media (max-width:900px){ .media-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:650px){ .media-grid{ grid-template-columns:1fr; } } /* SEZIONE TRAILER IN MEDIA */ .trailer-hero{ margin:2.5rem auto 2.5rem; padding:2rem 1.5rem 2.3rem; border-radius:20px; background:radial-gradient(circle at top,#f5e5b8 0,#f9f2dd 40%,#ffffff 85%); text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.16); } .trailer-hero h2{ margin-bottom:.5rem; } .trailer-subtitle{ margin-bottom:1.5rem; font-size:.95rem; } .trailer-video-wrapper{ display:flex; justify-content:center; } .trailer-video-wrapper video{ width:100%; max-width:720px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.2); } /* ========================= PAGINA CHI SIAMO ========================= */ .chi-container{ max-width:900px; } .intro-lead{ font-size:1rem; line-height:1.7; margin-bottom:1rem; } .chi-grid{ margin-top:2rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; text-align:left; } .chi-grid h2{ text-align:left; } .chi-grid p{ line-height:1.7; } .chi-section-full{ margin-top:2.5rem; text-align:left; } .chi-section-full p{ line-height:1.7; } .chi-quote{ margin-top:2.5rem; font-style:italic; font-size:.95rem; color:var(--muted); } .chi-quote span{ display:block; margin-top:.3rem; font-size:.85rem; } /* FOTO CHI SIAMO */ .chi-photo{ margin:2rem auto; max-width:420px; } .chi-photo img{ width:100%; border-radius:18px; display:block; object-fit:cover; box-shadow:0 10px 24px rgba(0,0,0,.18); } .chi-photo-bottom{ margin-top:3rem; } /* CHI SIAMO – MOBILE */ @media (max-width:750px){ .chi-container{ max-width:100%; padding:0 1.4rem; text-align:center; } .chi-grid{ display:block; margin-top:1.8rem; } .chi-grid section, .chi-section-full{ text-align:center; margin-bottom:1.8rem; } .chi-photo{ max-width:100%; } .chi-photo img{ max-width:100%; margin:0 auto; } } /* ========================= PAGINA DI BENVENUTO (index.html) ========================= */ .page-landing{ min-height:100vh; background:radial-gradient(circle at top,#f8f1df 0,#ffffff 55%,#f3f3f3 100%); } .landing-wrapper{ max-width:480px; margin:0 auto; min-height:100vh; padding:3rem 1.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; } .landing-logo{ display:block; margin:0 auto 1rem; } .landing-title{ font-size:2rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; } .landing-tagline{ font-size:.95rem; margin-bottom:1.7rem; } .landing-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; } .landing-nav a{ text-decoration:none; padding:.5rem 1.2rem; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#ffffffc9; font-size:.9rem; } .landing-nav a:hover{ background:#f5e8c5; } /* ========================= PAGINA LE NOSTRE ESIBIZIONI ========================= */ .esibizioni-container{ max-width:900px; text-align:center; } /* FOTO ESIBIZIONI */ .esibizioni-photo{ margin:2rem auto 2.5rem; } .esibizioni-photo img{ width:100%; max-width:520px; border-radius:16px; display:block; margin:0 auto; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.16); } /* CARD PROSSIMA ESIBIZIONE */ .esibizione-card{ background:#ffffffd9; border-radius:18px; padding:1.7rem 1.4rem 1.9rem; box-shadow:0 10px 28px rgba(0,0,0,.12); margin-bottom:2.2rem; } .badge{ display:inline-block; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; opacity:.8; margin-bottom:.4rem; } .esibizione-card h2{ margin-top:.2rem; } .esibizione-card p{ line-height:1.7; margin-top:.8rem; } .esibizione-info p{ line-height:1.7; } /* BOTTONE PRENOTA / WHATSAPP */ .evento-bottone, .contatti-bottone{ margin-top:1.2rem; text-align:center; } .btn-prenota{ display:inline-flex; align-items:center; gap:6px; padding:.9rem 2rem; border-radius:50px; font-size:1rem; font-weight:600; text-decoration:none; background:linear-gradient(135deg,#d9b84a,#f5eac4); color:#1e1b14; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; border:none; } .btn-prenota:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.22); filter:brightness(.97); } .wa-icon{ width:14px; height:14px; margin-right:6px; vertical-align:middle; border-radius:4px; } /* ========================= PAGINA CONTATTI ========================= */ .page-contatti-main{ text-align:center; padding:40px 20px; } .page-contatti-main h1{ font-size:32px; font-weight:700; margin-bottom:20px; } .page-contatti-main .intro{ max-width:550px; margin:0 auto 35px; font-size:16px; color:#555; line-height:1.6; } .contatti-box{ background:#ffffff; padding:30px 25px; border-radius:12px; max-width:430px; margin:0 auto; box-shadow:0 4px 12px rgba(0,0,0,.1); } .contatto-riga{ font-size:18px; margin:15px 0; color:#333; } .contatto-riga a{ text-decoration:none; color:#5e3cbc; font-weight:500; } .contatto-riga a:hover{ color:#c2a24d; } * MENU SEMPLICE – ADATTO ALL'HTML ATTUALE */ /* Barra superiore */ header{ background: linear-gradient(135deg, #f7f2e8, #e6d9b8, #f7f2e8); border-bottom: 1px solid rgba(176,138,69,0.25); } /* Contenitore del menu */ header nav{ text-align: center; padding: 0.9rem 0 1rem; } /* Lista voci */ header nav ul{ list-style: none; margin: 0; padding: 0; } /* Link */ header nav a{ display: inline-block; /* ogni voce è un “bottone” separato */ margin: 0 0.9rem; /* spazio orizzontale tra le voci */ color: #bfa063; /* oro morbido */ font-weight: 600; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.4px; } /* Evita il viola dopo il click */ header nav a:visited{ color: #bfa063; } /* Hover */ header nav a:hover{ color: #e3c98a; } /* Adatta un po' sui telefoni molto piccoli */ @media (max-width: 600px){ header nav a{ margin: 0.2rem 0.6rem; font-size: 0.9rem; } } } /* FIX FINALE – UNIFICA TUTTI I MENU */ header nav a { color: #bfa063 !important; } header nav a:hover { color: #e3c98a !important; } /* --- OVERRIDE FINALE PAGINA CONTATTI --- */ /* Sfondo pagina contatti più elegante (niente verdino) */ .page-contatti, .page-contatti-main { background: radial-gradient(circle at top, #f8f1df 0, #ffffff 55%, #f3f3f3 100%); } /* Cornice dorata media attorno al box contatti */ .contatti-box { background: rgba(255,255,255,0.92); border-radius: 18px; padding: 32px 26px; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.8), /* bordo oro geometrico */ 0 10px 26px rgba(0, 0, 0, 0.18); /* ombra sotto */ border: 1px solid rgba(212, 175, 55, 0.9); } /* Testi un po' più caldi */ .page-contatti-main .intro, .page-contatti .intro { color: #5a4d3a; } .contatto-riga { color: #6d5b3f; } /* SFONDO PIÙ ELEGANTE SOLO PER LA PAGINA CONTATTI */ .page-contatti-main { background: radial-gradient(circle at top, #f8f1df 0, #ffffff 55%, #f3f3f3 100%); padding-bottom: 60px; } /* --- Fix allineamento pagina Contatti --- */ .page-contatti, .page-contatti * { text-align: center; } .page-contatti .intro { margin-left: auto; margin-right: auto; text-align: center; } .language-selector{ cursor: pointer; color: #bfa063; font-weight: bold; margin-left: 20px; position: relative; display: inline-block; } .language-selector ul{ display: none; list-style: none; position: absolute; top: 20px; left: 0; background: white; border: 1px solid #ccc; padding: 6px 10px; border-radius: 6px; } .language-selector.active ul{ display: block; } .language-selector ul li{ margin: 5px 0; } .language-selector a{ text-decoration: none; color: #bfa063; } .language-selector a:hover{ color: #e3c98a; } /* ====== PAGINA RISORSE ====== */ body.page-risorse{ /* stesso mood caldo del sito */ background: radial-gradient(circle at top, #f8f1df 0, #ffffff 55%, #f3f3f3 100%); } /* wrapper principale */ .risorse-wrapper{ max-width: 860px; margin: 0 auto; text-align: left; } /* titolo pagina */ .risorse-title{ font-size: 2rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; margin-bottom: 1rem; } /* sottotitolo intro */ .risorse-intro{ max-width: 640px; margin: 0.2rem auto 2.4rem; text-align: center; font-size: .98rem; color: var(--muted); line-height: 1.8; } /* box singolo (messaggio, film, musica) */ .resource-card{ position: relative; margin: 1.9rem auto 0; padding: 1.7rem 1.5rem 1.9rem; border-radius: 22px; background: linear-gradient( 135deg, rgba(212,175,55,0.16), rgba(255,255,255,0.92) ); border: 1px solid rgba(212,175,55,0.35); box-shadow: 0 14px 30px rgba(0,0,0,.12); overflow: hidden; } /* leggera “luce” dorata nell’angolo */ .resource-card::before{ content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 0 0, rgba(255,255,255,0.65), transparent 60%); opacity: .55; pointer-events: none; } /* etichetta in alto (Messaggio del giorno, Film, Musica…) */ .resource-tag{ font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin: 0 0 .4rem; } /* titolo del box */ .resource-card h2{ margin: 0 0 .8rem; font-size: 1.35rem; letter-spacing: .04em; } /* testo interno elegante */ .resource-text{ font-size: .98rem; line-height: 1.9; color: var(--dark); margin-bottom: .9rem; } /* citazione / frase forte */ .resource-quote{ margin: .4rem 0 .9rem; padding-left: 1rem; border-left: 3px solid rgba(212,175,55,0.7); font-style: italic; font-size: .95rem; color: var(--muted); } /* nota finale piccola */ .resource-footnote{ font-size: .83rem; color: var(--muted); margin: 0; } /* variazione leggera tra i tre box (opzionale) */ .resource-card--films{ background: linear-gradient( 135deg, rgba(212,175,55,0.12), rgba(255,255,255,0.96) ); } .resource-card--music{ background: linear-gradient( 135deg, rgba(212,175,55,0.18), rgba(255,255,255,0.94) ); } /* responsive: stringiamo un po' su mobile */ @media (max-width: 700px){ .risorse-wrapper{ padding: 0 .4rem; } .resource-card{ padding: 1.4rem 1.2rem 1.7rem; } } /* Rimuove eventuali margini duplicati del vecchio layout */ .resources-section p { margin-bottom: 0; } /* Distanza tra i box */ .resource-card { margin-bottom: 2.2rem; } #live-banner { text-align: center; font-weight: 700; font-size: 1.2rem; padding: 12px 20px; margin-bottom: 15px; border-radius: 6px; background: linear-gradient(135deg, #f7eeca, #d8b676, #f5e5c2); color: #6b4b18; border: 2px solid #c9a45d; width: fit-content; margin-left: auto; margin-right: auto; animation: pulse 2s infinite ease-in-out; box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); } .live-hidden { display: none; } @keyframes pulse { 0% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); } 50% { box-shadow: 0 0 22px rgba(212, 175, 55, 0.75); } 100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); } } /* ===== RISORSE - stile box nuovo ===== */ .risorse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin: 2rem auto; max-width: 1000px; } .risorsa-card { background: #f8f3e7c7; padding: 22px; border-radius: 18px; text-align: left; box-shadow: 0px 6px 16px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .risorsa-card:hover { transform: scale(1.02); } .risorsa-card h2 { font-size: 1.5rem; font-weight: 600; color: #7a6337; margin-bottom: 10px; } .risorsa-tag { font-size: 0.9rem; font-style: italic; color: #5e533e; margin-bottom: 10px; } .risorsa-text { font-size: 1.15rem; line-height: 1.5; font-weight: 500; margin-bottom: 10px; } .risorsa-ref { font-size: 0.95rem; color: #7a6337; margin-top: 6px; text-align: right; font-weight: bold; } .risorsa-list { margin-top: 8px; padding-left: 14px; font-size: 0.98rem; line-height: 1.45; } .risorsa-list li { margin-bottom: 10px; } .badge.concluded { background: #7a7a7a; color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; text-transform: uppercase; }