/* Studio Dentistico Dott. Raimondo Maugeri — foglio di stile unico */ :root { --blu: #0b5fa0; --blu-scuro: #073e6b; --blu-chiaro: #eaf3fb; --testo: #1f2937; --testo-secondario: #5b6b7c; --bordo: #dbe4ec; --bianco: #ffffff; --sfondo: #f7f9fb; --raggio: 10px; --ombra: 0 2px 10px rgba(15, 45, 75, 0.08); } [hidden] { display: none !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--testo); background: var(--sfondo); line-height: 1.6; } /* Le sezioni appaiono con una leggera dissolvenza mentre si scorre la pagina (attivata via JS in footer.php con IntersectionObserver). Di default restano visibili: solo se JS gira davvero, la classe "js" su (impostata subito in header.php) le nasconde finche' non entrano nello schermo — cosi' senza JS il contenuto resta comunque leggibile fin da subito, non sparisce mai in modo permanente. */ .reveal { transition: opacity 0.7s ease, transform 0.7s ease; } html.js .reveal { opacity: 0; transform: translateY(18px); } html.js .reveal.visibile { opacity: 1; transform: none; } a { color: var(--blu); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.25; color: var(--blu-scuro); } h1 { font-size: 2.1rem; margin: 0 0 12px; } h2 { font-size: 1.5rem; margin: 0 0 14px; } h3 { font-size: 1.15rem; margin: 0 0 8px; } .contenitore { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* --- Intestazione a due righe (ispirata a DentalPro) --- */ .intestazione { position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 14px rgba(15, 45, 75, 0.07); } .barra-utility { background: var(--bianco); } .riga-utility { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; } .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--blu-scuro); } .logo span { color: var(--blu); } .immagine-logo { height: 46px; width: auto; display: block; } .link-utility { display: flex; align-items: center; gap: 22px; } .link-icona { display: flex; align-items: center; gap: 8px; color: var(--testo); font-weight: 500; font-size: 0.92rem; padding: 6px 4px; border-radius: 8px; transition: color 0.15s, background 0.15s; } .link-icona:hover { color: var(--blu); text-decoration: none; background: var(--blu-chiaro); } .badge-icona-utility { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blu-chiaro); color: var(--blu); flex-shrink: 0; transition: background 0.15s, color 0.15s; } .link-icona:hover .badge-icona-utility { background: var(--blu); color: #fff; } .barra-principale { background: linear-gradient(180deg, var(--blu-chiaro) 0%, #dfeefb 100%); border-top: 1px solid rgba(11, 95, 160, 0.08); } .barra-principale .contenitore { padding-top: 2px; padding-bottom: 2px; } /* --- Hero enorme a piena larghezza (ispirato a DentalPro) --- */ .eroe-immenso { position: relative; width: 100%; height: 560px; overflow: hidden; background: var(--blu-chiaro); } .eroe-immenso .slideshow-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; } .eroe-immenso .slideshow-foto.attiva { opacity: 1; } .blocco-scheda-eroe { position: absolute; left: 6%; bottom: 64px; max-width: 420px; z-index: 2; } .frecce-eroe { display: flex; gap: 8px; margin-bottom: 10px; } .freccia-eroe { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; backdrop-filter: blur(2px); } .freccia-eroe:hover { background: rgba(255,255,255,0.25); } .scheda-eroe { background: var(--blu-scuro); color: #fff; padding: 32px; border-radius: var(--raggio); box-shadow: 0 16px 40px rgba(3, 20, 38, 0.35); } .scheda-eroe h1 { color: #fff; font-size: 1.6rem; margin-bottom: 10px; } .scheda-eroe p.sottotitolo { color: #cfe1f2; font-size: 0.95rem; margin: 0 0 20px; } .scheda-eroe .azioni-eroe { justify-content: flex-start; } .scheda-eroe .pulsante.secondario { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); } .scheda-eroe .pulsante.secondario:hover { background: rgba(255,255,255,0.12); } .slideshow-punti-immenso { position: absolute; bottom: 22px; right: 6%; z-index: 2; display: flex; gap: 8px; } .slideshow-punti-immenso .slideshow-punto { background: rgba(255,255,255,0.5); } .slideshow-punti-immenso .slideshow-punto.attivo { background: #fff; } .fascia-numeri { background: linear-gradient(135deg, var(--blu-scuro) 0%, var(--blu) 100%); padding: 40px 0; } .griglia-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } .blocco-numero { color: #fff; } .numero-grande { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .etichetta-numero { color: #cfe1f2; font-size: 0.9rem; font-weight: 500; } .numero-con-stella { display: flex; align-items: center; justify-content: center; gap: 6px; } .stella-numero { color: #f5c518; font-size: 0.75em; } @media (max-width: 760px) { .griglia-numeri { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; } .numero-grande { font-size: 1.7rem; } } @media (max-width: 760px) { .eroe-immenso { height: auto; position: static; } .eroe-immenso .slideshow-foto { position: static; height: 260px; opacity: 1; display: none; } .eroe-immenso .slideshow-foto.attiva { display: block; } .blocco-scheda-eroe { position: static; max-width: none; padding: 24px; } .frecce-eroe { display: none; } .scheda-eroe { border-radius: 0; } .slideshow-punti-immenso { position: static; justify-content: center; padding: 12px 0; background: var(--blu-scuro); } } .riepilogo-recensioni { display: flex; align-items: center; justify-content: center; gap: 8px; } .riepilogo-recensioni .stelle-recensione { margin-bottom: 0; } .titolo-con-logo { display: flex; align-items: center; justify-content: center; gap: 8px; } .griglia-recensioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .card-recensione { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; box-shadow: var(--ombra); } .stelle-recensione { font-size: 1rem; margin-bottom: 10px; } .stelle-recensione .piena { color: #f5a623; } .stelle-recensione .vuota { color: var(--bordo); } .testo-recensione { color: var(--testo); font-style: italic; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .testo-recensione.espansa { -webkit-line-clamp: unset; overflow: visible; } .espandi-recensione { font-size: 0.85rem; padding: 6px 0; } .autore-recensione { color: var(--testo-secondario); font-size: 0.85rem; font-weight: 600; margin: 10px 0 0; } .griglia-bio { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } .foto-bio { width: 100%; border-radius: var(--raggio); border: 1px solid var(--bordo); box-shadow: var(--ombra); } .card .foto-tecnologia { width: 100%; height: 160px; object-fit: cover; border-radius: var(--raggio); margin: -22px -22px 14px; width: calc(100% + 44px); } @media (max-width: 760px) { .eroe-griglia { grid-template-columns: 1fr; text-align: center; } .eroe-griglia .eroe-testo { text-align: center; } .eroe-griglia .eroe-testo p.sottotitolo { margin: 0 auto 24px; } .eroe-griglia .azioni-eroe { justify-content: center; } .griglia-bio { grid-template-columns: 1fr; } .foto-bio { max-width: 280px; margin: 0 auto; } } .menu { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 8px 0; } .menu a { display: inline-block; color: var(--blu-scuro); font-weight: 600; font-size: 0.94rem; padding: 8px 14px; border-radius: 999px; transition: color 0.15s, background 0.15s; } .menu a.attivo { color: var(--blu); background: var(--bianco); box-shadow: 0 1px 4px rgba(11, 95, 160, 0.12); } .menu a:hover { text-decoration: none; color: var(--blu); background: rgba(255,255,255,0.6); } .pulsante-prenota { display: flex; align-items: center; background: var(--blu); color: var(--bianco) !important; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; flex-shrink: 0; } .pulsante-prenota:hover { background: var(--blu-scuro); text-decoration: none; } .interruttore-menu { display: none; background: none; border: none; font-size: 1.6rem; color: var(--blu-scuro); cursor: pointer; } /* --- Sezioni generiche --- */ main { min-height: 60vh; } .eroe { background: linear-gradient(180deg, var(--blu-chiaro) 0%, var(--sfondo) 100%); padding: 64px 0 48px; text-align: center; } .eroe p.sottotitolo { max-width: 640px; margin: 0 auto 24px; color: var(--testo-secondario); font-size: 1.05rem; } .azioni-eroe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .pulsante { display: inline-block; padding: 11px 22px; border-radius: 999px; font-weight: 600; } .pulsante.primario { background: var(--blu); color: var(--bianco); } .pulsante.primario:hover { background: var(--blu-scuro); text-decoration: none; } .pulsante.secondario { background: var(--bianco); color: var(--blu); border: 1px solid var(--blu); } .pulsante.secondario:hover { background: var(--blu-chiaro); text-decoration: none; } .sezione { padding: 48px 0; } .sezione.alternata { background: var(--bianco); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); } .intestazione-sezione { text-align: center; max-width: 640px; margin: 0 auto 32px; } .intestazione-sezione p { color: var(--testo-secondario); } .griglia-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .card { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; box-shadow: var(--ombra); } .card .icona-segnaposto { width: 52px; height: 52px; border-radius: 14px; background: var(--blu-chiaro); color: var(--blu); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; } .card .icona-segnaposto svg { width: 26px; height: 26px; } .card p { color: var(--testo-secondario); margin: 0; font-size: 0.95rem; } .griglia-trattamenti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .card-trattamento { display: block; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; } .card-trattamento:hover { box-shadow: var(--ombra); transform: translateY(-2px); text-decoration: none; } .foto-card-trattamento { width: 100%; height: 150px; object-fit: cover; background: var(--blu-chiaro); transition: transform 0.4s ease; } .card-trattamento:hover .foto-card-trattamento { transform: scale(1.07); } .corpo-card-trattamento { padding: 18px 20px; } .card-trattamento h3 { color: var(--blu-scuro); } .card-trattamento p { color: var(--testo-secondario); font-size: 0.92rem; margin: 6px 0 0; } .riquadro-segnaposto { border: 1px dashed var(--bordo); background: var(--blu-chiaro); color: var(--testo-secondario); border-radius: var(--raggio); padding: 18px; font-size: 0.9rem; font-style: italic; } .elenco-raggiungibilita { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .elenco-raggiungibilita li { padding-left: 26px; position: relative; color: var(--testo-secondario); } .elenco-raggiungibilita li::before { content: "→"; position: absolute; left: 0; color: var(--blu); font-weight: 700; } .griglia-contatti { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .blocco-contatto { margin-bottom: 20px; } .blocco-contatto h3 { margin-bottom: 6px; } .blocco-contatto p { margin: 2px 0; color: var(--testo-secondario); } .mappa-contatti { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); } .mappa-contatti iframe { width: 100%; height: 340px; border: 0; display: block; } .immagine-trattamento { width: 100%; border-radius: var(--raggio); border: 1px solid var(--bordo); margin-bottom: 24px; } .sezione-testo { margin-bottom: 22px; } .sezione-testo h3 { color: var(--blu); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; } .sezione-testo p { margin: 0; color: var(--testo); } table.orari { width: 100%; border-collapse: collapse; font-size: 0.95rem; } table.orari td { padding: 6px 0; border-bottom: 1px solid var(--bordo); color: var(--testo-secondario); } table.orari td:first-child { color: var(--testo); font-weight: 500; } /* --- Piè di pagina --- */ .piede { background: var(--blu-scuro); color: #cfe1f2; padding: 32px 0; margin-top: 48px; font-size: 0.9rem; } .piede a { color: #ffffff; } .icone-social { display: flex; gap: 12px; margin-top: 4px; } .icona-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #cfe1f2 !important; transition: background 0.15s, color 0.15s, transform 0.15s; } .icona-social:hover { transform: translateY(-2px); text-decoration: none; } .icona-facebook:hover { background: #1877f2; color: #fff !important; } .icona-instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff !important; } .griglia-piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .piede .titolo-piede { color: #ffffff; font-weight: 700; margin-bottom: 6px; } .diritti { text-align: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); color: #9fbcd8; font-size: 0.82rem; } /* --- Responsive --- */ .barra-principale { position: relative; } @media (max-width: 760px) { .riga-utility { padding: 12px 16px; flex-wrap: nowrap; } .logo { font-size: 0.9rem; gap: 8px; } .immagine-logo { height: 32px; } .link-utility { gap: 8px; flex-shrink: 0; } .link-utility .link-icona { display: none; } .pulsante-prenota { padding: 8px 10px; font-size: 0.75rem; white-space: nowrap; } .pulsante-prenota svg { width: 13px; height: 13px; } .interruttore-menu { display: block; font-size: 1.4rem; } .barra-principale .menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bianco); border-bottom: 1px solid var(--bordo); box-shadow: var(--ombra); flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 24px 20px; display: none; } .barra-principale .menu.aperto { display: flex; } .barra-principale .menu li { width: 100%; } .barra-principale .menu a { display: block; padding: 8px 0; } .griglia-contatti { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } /* Chat del sito */ .chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 500; } .chat-bottone { width: 84px; height: 84px; border-radius: 50%; border: none; background: #e0703c; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(224, 112, 60, 0.45); position: relative; } .chat-bottone:hover { background: #c85a2a; } .chat-badge { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #e0553e; border: 3px solid #fff; } .chat-pannello { position: absolute; right: 0; bottom: 98px; width: 320px; max-width: calc(100vw - 40px); background: var(--bianco); border-radius: 14px; box-shadow: 0 8px 28px rgba(15, 45, 75, 0.22); overflow: hidden; display: flex; flex-direction: column; } .chat-intestazione { background: var(--blu); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .chat-chiudi { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; } .chat-modulo-nome { padding: 16px; } .chat-modulo-nome p { margin: 0 0 12px; font-size: 0.88rem; color: var(--testo-secondario); } .chat-modulo-nome input[type="text"]:not(.chat-honeypot) { width: 100%; padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px; font-size: 0.92rem; margin-bottom: 10px; } .chat-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; } .chat-pulsante-primario { width: 100%; background: var(--blu); color: #fff; border: none; padding: 10px; border-radius: 8px; font-size: 0.92rem; cursor: pointer; } .chat-pulsante-primario:hover { background: var(--blu-scuro); } .chat-conversazione { display: flex; flex-direction: column; height: 380px; } .chat-messaggi { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .chat-bolla { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 0.88rem; line-height: 1.4; } .chat-bolla.visitatore { align-self: flex-end; background: var(--blu-chiaro); color: var(--testo); } .chat-bolla.staff { align-self: flex-start; background: var(--sfondo); border: 1px solid var(--bordo); color: var(--testo); } .chat-riga-invio { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--bordo); } .chat-riga-invio input { flex: 1; padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px; font-size: 0.9rem; } .chat-pulsante-invio { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--blu); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-pulsante-invio:hover { background: var(--blu-scuro); } @media (max-width: 480px) { .chat-widget { right: 12px; bottom: 12px; } .chat-pannello { right: -6px; width: calc(100vw - 24px); } }