/* ========================================================================== Associazione Culturale Artistica "Amici di Verdi - ETS" Foglio di stile principale — sopra Bootstrap 5 ========================================================================== */ :root { /* Palette ripresa dal sito originale */ --adv-brown: #766d62; --adv-brown-dark: #49433c; --adv-brown-light: #9b958e; --adv-sand: #edecea; --adv-sand-dark: #d2cfcb; --adv-text: #444444; --adv-muted: #929292; --adv-white: #ffffff; --adv-font-title: 'Lora', Georgia, 'Times New Roman', serif; --adv-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --adv-font-script: 'Dancing Script', cursive; --adv-header-h: 90px; --adv-header-h-sticky: 70px; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { font-family: var(--adv-font-body); font-size: 15px; line-height: 1.8; color: var(--adv-text); background-color: var(--adv-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--adv-font-title); font-weight: 700; line-height: 1.3; } a { color: var(--adv-brown); text-decoration: none; transition: color .2s ease; } /* I pulsanti si sollevano appena al passaggio del mouse */ .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); } .btn:active { transform: translateY(0); } a:hover, a:focus { color: var(--adv-brown-dark); text-decoration: underline; } /* Compensa l'header fisso quando si salta a una sezione con l'ancora */ section[id] { scroll-margin-top: var(--adv-header-h-sticky); } /* Titolo di sezione con filetto decorativo, come nell'originale */ .section-title { font-size: 2rem; margin-bottom: 2.5rem; text-align: center; position: relative; padding-bottom: 1.25rem; } .section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 2px; background-color: currentColor; opacity: .45; } .section-padding { padding-top: 5rem; padding-bottom: 5rem; } /* -------------------------------------------------------------------------- Animazioni alla comparsa Gli elementi con l'attributo data-aos partono nascosti e si rivelano quando entrano nella finestra: la classe .is-revealed viene aggiunta da assets/js/main.js tramite IntersectionObserver. La classe .js-anim è posta su dallo script stesso: senza JavaScript attivo la regola non si applica e i contenuti restano visibili, come devono essere. -------------------------------------------------------------------------- */ .js-anim [data-aos] { opacity: 0; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .js-anim [data-aos="fade-up"] { transform: translateY(28px); } .js-anim [data-aos="fade-right"] { transform: translateX(-28px); } .js-anim [data-aos="fade-left"] { transform: translateX(28px); } .js-anim [data-aos="zoom-in"] { transform: scale(.94); } /* Stato finale: comune a tutti i tipi di animazione */ .js-anim [data-aos].is-revealed { opacity: 1; transform: none; } /* Ritardi per far entrare gli elementi in sequenza */ .js-anim [data-aos-delay="100"] { transition-delay: .1s; } .js-anim [data-aos-delay="150"] { transition-delay: .15s; } .js-anim [data-aos-delay="200"] { transition-delay: .2s; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .adv-header { background-color: var(--adv-white); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); transition: padding .25s ease; padding: .75rem 0; } .adv-header.is-sticky { padding: .25rem 0; } .adv-header .navbar-brand img { height: 60px; width: auto; transition: height .25s ease; } .adv-header.is-sticky .navbar-brand img { height: 46px; } .adv-header .navbar-nav .nav-link { font-family: var(--adv-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--adv-text); padding: .5rem .85rem; position: relative; } .adv-header .navbar-nav .nav-link:hover, .adv-header .navbar-nav .nav-link:focus, .adv-header .navbar-nav .nav-link.active { color: var(--adv-brown); text-decoration: none; } /* Sottolineatura animata della voce di menu */ .adv-header .navbar-nav .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 2px; background-color: var(--adv-brown); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .adv-header .navbar-nav .nav-link:hover::after, .adv-header .navbar-nav .nav-link.active::after { transform: scaleX(1); } .adv-header .navbar-toggler { border-color: var(--adv-sand-dark); padding: .35rem .6rem; color: var(--adv-brown); } .adv-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(118, 109, 98, .25); } /* Su mobile il menu aperto non deve coprire tutto lo schermo senza scorrere */ @media (max-width: 991.98px) { .adv-header .navbar-collapse { max-height: calc(100vh - var(--adv-header-h)); overflow-y: auto; padding-bottom: .5rem; } .adv-header .navbar-nav .nav-link::after { display: none; } } /* -------------------------------------------------------------------------- Slider (carosello) -------------------------------------------------------------------------- */ .adv-hero .carousel-item { height: 78vh; min-height: 380px; max-height: 760px; } .adv-hero .carousel-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Velo scuro per rendere leggibile il testo sopra la foto */ .adv-hero .carousel-item::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .32); } /* La didascalia resta sempre visibile e centrata, anche sugli schermi stretti (Bootstrap la nasconde sotto i 768px e la ancora in basso) */ .adv-hero .carousel-caption { display: block; z-index: 2; top: 50%; bottom: auto; transform: translateY(-50%); left: 8%; right: 8%; width: auto; padding: 0; } /* Il titolo compare su ogni slide, ma una sola volta come

: sulle altre è un

con lo stesso aspetto, per non ripetere l'intestazione principale quattro volte nella pagina. */ .adv-hero .carousel-caption .hero-title { font-family: var(--adv-font-title); font-size: clamp(1.1rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.3; color: var(--adv-white); text-shadow: 0 2px 12px rgba(0, 0, 0, .55); margin: 0; overflow-wrap: break-word; } .adv-hero .carousel-caption .hero-sub { display: block; font-size: clamp(1rem, 3.2vw, 2.6rem); margin-top: .35rem; } .adv-hero .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 5px; opacity: .6; } .adv-hero .carousel-indicators .active { opacity: 1; } /* -------------------------------------------------------------------------- Sezione Associazione -------------------------------------------------------------------------- */ .adv-associazione { background-color: var(--adv-white); } .adv-associazione .section-title { color: var(--adv-brown); } .adv-associazione p { text-align: justify; } .adv-figure { overflow: hidden; } .adv-figure img { width: 100%; height: auto; display: block; transition: transform .6s ease; } .adv-figure:hover img { transform: scale(1.04); } /* -------------------------------------------------------------------------- Sezione Eventi -------------------------------------------------------------------------- */ .adv-eventi { background-color: var(--adv-brown); color: var(--adv-white); } .adv-eventi .section-title { color: var(--adv-white); } .adv-poster { display: block; overflow: hidden; position: relative; background-color: rgba(0, 0, 0, .12); box-shadow: 0 6px 24px rgba(0, 0, 0, .22); transition: transform .35s ease, box-shadow .35s ease; } .adv-poster:hover, .adv-poster:focus-visible { transform: translateY(-6px); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); } .adv-poster img { width: 100%; height: auto; display: block; transition: transform .5s ease; } .adv-poster:hover img, .adv-poster:focus img { transform: scale(1.04); } /* Lente che compare sulla locandina al passaggio del mouse */ .adv-poster::after { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: .75rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; background-color: rgba(73, 67, 60, .85); color: var(--adv-white); font-size: .9rem; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; } .adv-poster:hover::after, .adv-poster:focus-visible::after { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------------- Sezione Verdi d'Oro -------------------------------------------------------------------------- */ .adv-verdidoro { background-color: var(--adv-sand); } .adv-verdidoro .section-title { color: var(--adv-brown-dark); } .adv-verdidoro .carousel-item img { width: 100%; height: auto; display: block; } .adv-albo { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; } .adv-albo li { padding: .3rem 0; break-inside: avoid; border-bottom: 1px solid rgba(118, 109, 98, .18); transition: padding-left .25s ease, color .25s ease; } .adv-albo li:hover { padding-left: .45rem; color: var(--adv-brown-dark); } .adv-albo li .anno { font-weight: 700; color: var(--adv-brown); margin-right: .4rem; } @media (max-width: 575.98px) { .adv-albo { columns: 1; } } /* Frecce del carosello Verdi d'Oro: sfondo scuro per staccarle dalle foto */ .adv-gallery .carousel-control-prev, .adv-gallery .carousel-control-next { width: 48px; opacity: .85; } .adv-gallery .carousel-control-prev-icon, .adv-gallery .carousel-control-next-icon { background-color: rgba(73, 67, 60, .75); border-radius: 50%; padding: 1.1rem; background-size: 45%; } .adv-gallery .carousel-caption { position: static; padding: .85rem 0 0; color: var(--adv-brown-dark); text-align: center; } .adv-gallery .carousel-caption p { margin: 0; font-family: var(--adv-font-title); font-size: 1rem; } /* -------------------------------------------------------------------------- Sezione Tesseramento -------------------------------------------------------------------------- */ .adv-tesseramento { background-color: var(--adv-white); } .adv-tesseramento .section-title { color: var(--adv-brown); } .adv-quote-card { background-color: var(--adv-sand); border-top: 3px solid var(--adv-brown); height: 100%; padding: 1.75rem; transition: transform .3s ease, box-shadow .3s ease; } .adv-quote-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(73, 67, 60, .14); } .adv-quote-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--adv-brown-dark); margin-bottom: 1.25rem; } .adv-quote-list { list-style: none; padding: 0; margin: 0; } .adv-quote-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(118, 109, 98, .2); } .adv-quote-list li:last-child { border-bottom: 0; } .adv-quote-list .importo { font-weight: 700; color: var(--adv-brown); white-space: nowrap; } .adv-versamenti { list-style: none; padding: 0; margin: 0; } .adv-versamenti li { position: relative; padding-left: 1.75rem; padding-bottom: .65rem; } .adv-versamenti li i { position: absolute; left: 0; top: .45rem; color: var(--adv-brown); } .adv-iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; word-break: break-word; } /* -------------------------------------------------------------------------- Sezione Contatti -------------------------------------------------------------------------- */ .adv-contatti { background-color: var(--adv-brown); color: var(--adv-white); } .adv-contatti .section-title { color: var(--adv-white); } .adv-contatti a { color: var(--adv-white); text-decoration: underline; text-underline-offset: .2em; } .adv-contatti a:hover, .adv-contatti a:focus { color: var(--adv-sand-dark); } /* I pulsanti mantengono i colori Bootstrap, non quelli dei link su fondo scuro */ .adv-contatti .btn, .adv-contatti .btn:hover, .adv-contatti .btn:focus { color: var(--adv-brown-dark); text-decoration: none; } .adv-contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; } .adv-contact-item i { font-size: 1.15rem; line-height: 1.7; width: 1.5rem; flex-shrink: 0; text-align: center; opacity: .9; } /* Riquadro 5x1000 */ .adv-5x1000 { background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); padding: 1.75rem; height: 100%; transition: background-color .3s ease, border-color .3s ease; } .adv-5x1000:hover { background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); } .adv-5x1000 h3 { font-size: 1.35rem; margin-bottom: 1rem; } .adv-cf { display: inline-block; background-color: var(--adv-white); color: var(--adv-brown-dark); font-weight: 700; letter-spacing: .08em; padding: .5rem 1.15rem; margin-top: .5rem; } /* -------------------------------------------------------------------------- Sezione Trasparenza (contributi pubblici) -------------------------------------------------------------------------- */ .adv-trasparenza { background-color: var(--adv-sand); font-size: .875rem; } .adv-trasparenza h2 { font-size: 1.25rem; color: var(--adv-brown-dark); margin-bottom: 1rem; } .adv-allegati { list-style: none; padding: 0; margin: 1rem 0 0; } .adv-allegati li { padding: .3rem 0; } .adv-allegati i { color: var(--adv-brown); margin-right: .5rem; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .adv-footer { background-color: var(--adv-brown-dark); color: var(--adv-sand-dark); font-size: .8125rem; } .adv-footer a { color: var(--adv-sand-dark); } .adv-footer a:hover, .adv-footer a:focus { color: var(--adv-white); } .adv-footer .footer-museo img { max-width: 190px; height: auto; } .adv-footer .footer-sep { opacity: .45; margin: 0 .45rem; } /* -------------------------------------------------------------------------- Torna su -------------------------------------------------------------------------- */ .adv-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background-color: var(--adv-brown); color: var(--adv-white); border: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .adv-top.is-visible { opacity: .9; visibility: visible; } .adv-top:hover, .adv-top:focus { opacity: 1; color: var(--adv-white); } /* -------------------------------------------------------------------------- Banner cookie -------------------------------------------------------------------------- */ .adv-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: rgba(73, 67, 60, .97); color: var(--adv-sand); padding: 1rem 0; font-size: .8125rem; display: none; } .adv-cookie.is-visible { display: block; } .adv-cookie a { color: var(--adv-white); text-decoration: underline; } /* -------------------------------------------------------------------------- Pagine interne (Organizzazione, Privacy) -------------------------------------------------------------------------- */ .adv-page-header { background-color: var(--adv-sand); padding: 3.5rem 0 2.5rem; margin-top: var(--adv-header-h); } .adv-page-header h1 { color: var(--adv-brown-dark); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; } .adv-page-header .breadcrumb { margin: .75rem 0 0; font-size: .8125rem; } .adv-organi h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; color: var(--adv-brown); padding-bottom: .5rem; margin-bottom: .85rem; border-bottom: 2px solid var(--adv-sand-dark); } .adv-organi ul { list-style: none; padding: 0; margin: 0; } .adv-organi li { padding: .25rem 0; } .adv-organi .ruolo { color: var(--adv-muted); font-size: .8125rem; } /* Contenuto testuale delle pagine legali */ .adv-legal h2 { font-size: 1.2rem; color: var(--adv-brown-dark); margin-top: 2rem; margin-bottom: .75rem; } .adv-legal h3 { font-size: 1rem; color: var(--adv-brown); margin-top: 1.5rem; margin-bottom: .5rem; } .adv-legal table { font-size: .875rem; } /* -------------------------------------------------------------------------- Stampa -------------------------------------------------------------------------- */ @media print { .adv-header, .adv-hero, .adv-top, .adv-cookie, .carousel-control-prev, .carousel-control-next, .carousel-indicators { display: none !important; } body { color: #000; } } /* -------------------------------------------------------------------------- Accessibilità: rispetta la preferenza di movimento ridotto -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Niente spostamenti né ingrandimenti al passaggio del mouse */ .btn:hover, .adv-poster:hover, .adv-quote-card:hover { transform: none; } .adv-figure:hover img, .adv-poster:hover img { transform: none; } /* Lo script non applica .js-anim in questo caso, ma per sicurezza i contenuti restano comunque pienamente visibili */ [data-aos] { opacity: 1 !important; transform: none !important; } }