/* * Tema «backstage» della suite Arabesque, adattato alla vetrina pubblica. * * Regola che tiene in piedi tutto: il tema chiaro ridefinisce SOLO le variabili qui * sotto, mai le regole. Così non può nascere la classe di bug «chiaro su chiaro»: * ogni componente pesca il colore dai token e i due temi restano coerenti per * costruzione. Se serve un colore nuovo, si aggiunge un token e si ricontrolla il * contrasto (obiettivo WCAG AA, 4.5:1 sul testo). */ /* ── Font ────────────────────────────────────────────────────────────────── */ /* Montserrat (SIL Open Font License), ospitato qui: nessuna chiamata a Google. Sostituisce Bodoni Moda, che aveva le aste orizzontali troppo sottili: su schermo sparivano, e i nomi in maiuscolo diventavano illeggibili. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/lib/fonts/montserrat-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/lib/fonts/montserrat-normal-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/lib/fonts/montserrat-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/lib/fonts/montserrat-italic-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Token: tema scuro «backstage» (predefinito) ─────────────────────────── */ :root { --inchiostro: #14141f; --navbar-testo: #cfd8e6; --fondale: #131a26; --quinta: #1d2634; --ribalta: #151c29; --testata: #171f2c; --bordo: #384a63; --testo: #e4ecf6; --testo-tenue: #a5b5c9; --marca: #0abab5; --marca-testo: #4fd8d2; --bottone: #0b807a; --bottone-hover: #096a65; --successo-f: #17352b; --successo-b: #2f7d57; --successo-t: #a4e3c0; --errore-f: #3d1d26; --errore-b: #a4485c; --errore-t: #ffb3c0; --info-f: #14303f; --info-b: #3f7fa3; --info-t: #a8dcf2; --avviso-f: #3a2d13; --avviso-b: #a3803a; --avviso-t: #ffd98f; --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --ombra-card: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 30px -12px rgba(0, 0, 0, .35); --ombra-alta: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .55); --velo-foto: linear-gradient(180deg, rgba(19, 26, 38, .35) 0%, rgba(19, 26, 38, .78) 60%, rgba(19, 26, 38, .96) 100%); --raggio: 14px; } /* ── Token: tema chiaro «foyer» — solo variabili, nessuna regola ─────────── */ /* L'attributo su lo mette tema.js prima del disegno (niente lampo); la classe sul body è quella che usano gli altri portali della suite. */ [data-tema='light'] body, body.theme-light { --fondale: #f2f5f8; --quinta: #ffffff; --ribalta: #f7fafc; --testata: #eaf0f5; --bordo: #cfdae5; --testo: #1c2836; --testo-tenue: #55697e; --marca-testo: #077772; --successo-f: #e5f6ec; --successo-b: #9ed3b4; --successo-t: #186a41; --errore-f: #fdeef1; --errore-b: #e8a8b4; --errore-t: #96324a; --info-f: #e8f4fb; --info-b: #9cc9e2; --info-t: #1c5a80; --avviso-f: #fdf4dd; --avviso-b: #dec379; --avviso-t: #77570e; --ombra-card: 0 1px 2px rgba(20, 40, 60, .06), 0 10px 30px -18px rgba(20, 40, 60, .18); --ombra-alta: 0 2px 8px rgba(20, 40, 60, .1), 0 24px 60px -28px rgba(20, 40, 60, .3); --velo-foto: linear-gradient(180deg, rgba(12, 20, 30, .25) 0%, rgba(12, 20, 30, .55) 60%, rgba(12, 20, 30, .82) 100%); } /* ── Base ────────────────────────────────────────────────────────────────── */ body { background: var(--fondale); color: var(--testo); -webkit-font-smoothing: antialiased; } h1, h2, h3, .display-font { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; } a { color: var(--marca-testo); } a:hover { color: var(--marca); } .text-tenue { color: var(--testo-tenue) !important; } .text-marca { color: var(--marca-testo) !important; } ::selection { background: var(--marca); color: #04201f; } :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; } /* Salto rapido al contenuto per chi naviga da tastiera. */ .salta-al-contenuto { position: absolute; left: -999px; top: .5rem; z-index: 2000; background: var(--quinta); color: var(--testo); padding: .6rem 1rem; border-radius: 8px; border: 1px solid var(--marca); } .salta-al-contenuto:focus { left: .5rem; } /* ── Navbar ──────────────────────────────────────────────────────────────── */ .navbar-sito { background: transparent; transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease; padding-top: 1rem; padding-bottom: 1rem; } .navbar-sito.condensata { background: var(--inchiostro); box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .6); padding-top: .45rem; padding-bottom: .45rem; } /* Sulle pagine senza copertina la navbar è piena da subito. */ .navbar-sito.sempre-piena { background: var(--inchiostro); } .navbar-sito::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, #08bd9f 0, #5cc5c0 35%, rgba(92, 197, 192, .25) 70%, transparent 100%); pointer-events: none; opacity: 0; transition: opacity .25s ease; } .navbar-sito.condensata::after, .navbar-sito.sempre-piena::after { opacity: 1; } .navbar-sito .navbar-nav .nav-link { color: var(--navbar-testo); font-size: .95rem; padding-inline: .85rem; position: relative; } .navbar-sito .navbar-nav .nav-link:hover, .navbar-sito .navbar-nav .nav-link:focus-visible { color: #fff; } .navbar-sito .navbar-nav .nav-link::after { content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .35rem; height: 1px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .navbar-sito .navbar-nav .nav-link:hover::after { transform: scaleX(1); } .marchio { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .marchio img { height: 54px; width: auto; transition: height .25s ease; } .navbar-sito.condensata .marchio img { height: 44px; } .marchio-forma { font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; line-height: 1.35; color: #4fd8d2; padding-left: .75rem; border-left: 1px solid rgba(92, 197, 192, .35); } /* Su schermi molto stretti la scritta accanto al logo toglie spazio: si nasconde. */ @media (max-width: 400px) { .marchio-forma { display: none; } } .marchio-testo { display: flex; flex-direction: column; line-height: 1.05; } .marchio-nome { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; } .marchio-sub { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: #4fd8d2; } .navbar-toggler { border-color: rgba(207, 216, 230, .35); color: var(--navbar-testo); } .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(10, 186, 181, .35); } .menu-portali { background: var(--quinta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-alta); padding: .4rem; } .menu-portali .dropdown-item { color: var(--testo); border-radius: 8px; padding: .55rem .7rem; display: flex; align-items: center; gap: .6rem; } .menu-portali .dropdown-item:hover, .menu-portali .dropdown-item:focus { background: var(--ribalta); color: var(--marca-testo); } .menu-portali .dropdown-item i { color: var(--marca-testo); } /* ── Bottoni ─────────────────────────────────────────────────────────────── */ .btn-marca { background: var(--bottone); border: 1px solid var(--bottone); color: #fff; font-weight: 600; border-radius: 999px; padding: .65rem 1.6rem; } .btn-marca:hover, .btn-marca:focus { background: var(--bottone-hover); border-color: var(--bottone-hover); color: #fff; } .btn-contorno { background: transparent; border: 1px solid var(--bordo); color: var(--testo); font-weight: 500; border-radius: 999px; padding: .65rem 1.6rem; } .btn-contorno:hover, .btn-contorno:focus { border-color: var(--marca); color: var(--marca-testo); background: rgba(10, 186, 181, .08); } .btn-chiaro-contorno { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-weight: 500; border-radius: 999px; padding: .65rem 1.6rem; backdrop-filter: blur(4px); } .btn-chiaro-contorno:hover, .btn-chiaro-contorno:focus { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; } .btn-tema { background: transparent; border: 1px solid rgba(207, 216, 230, .3); color: var(--navbar-testo); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .btn-tema:hover { color: #fff; border-color: var(--marca); } /* ── Copertina ───────────────────────────────────────────────────────────── */ .copertina { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--inchiostro); } .copertina-sfondo { position: absolute; inset: 0; z-index: 0; } .copertina-foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease-in-out; } .copertina-foto.attiva { opacity: 1; } /* Lentissimo avvicinamento: è uno sfondo, non blocca nessuna interazione. */ .animazioni-attive .copertina-foto.attiva { animation: avvicina 18s ease-out forwards; } @keyframes avvicina { from { transform: scale(1); } to { transform: scale(1.07); } } .copertina-velo { position: absolute; inset: 0; background: var(--velo-foto); z-index: 1; } /* Senza foto caricate la copertina resta comunque presentabile. */ .copertina-vuota { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 15% 20%, rgba(10, 186, 181, .22), transparent 60%), radial-gradient(900px 500px at 85% 75%, rgba(92, 197, 192, .16), transparent 60%), linear-gradient(160deg, #14141f 0%, #131a26 55%, #101825 100%); } .copertina-contenuto { position: relative; z-index: 3; padding-block: 8rem 5rem; } .copertina h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); margin-bottom: 1.2rem; } .copertina .occhiello { text-transform: uppercase; letter-spacing: .28em; font-size: .75rem; color: #5cc5c0; margin-bottom: 1.1rem; } .copertina .sottotitolo { color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 34rem; line-height: 1.7; } .indicatori-copertina { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: .5rem; } .indicatori-copertina button { width: 28px; height: 3px; border: 0; padding: 0; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: background-color .2s ease; } .indicatori-copertina button[aria-current='true'] { background: #5cc5c0; } /* Il nastro: eco dello slancio del logo, disegnato dietro il titolo. */ .nastro { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; } .nastro path { fill: none; stroke: url(#nastro-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .animazioni-attive .nastro path { animation: disegna 1.8s cubic-bezier(.4, 0, .2, 1) .3s forwards; } .nastro circle { fill: #5cc5c0; opacity: 0; } .animazioni-attive .nastro circle { animation: appari .8s ease-out 1.7s forwards; } @keyframes disegna { to { stroke-dashoffset: 0; } } @keyframes appari { to { opacity: var(--op); } } /* ── Sezioni ─────────────────────────────────────────────────────────────── */ .sezione { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; } .sezione-alternata { background: var(--ribalta); } .occhiello-sezione { text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; color: var(--marca-testo); margin-bottom: .7rem; display: block; } .titolo-sezione { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1rem; position: relative; display: inline-block; } .titolo-sezione::after { content: ''; display: block; width: 4.5rem; height: 2px; margin-top: .8rem; background: linear-gradient(90deg, #08bd9f 0, rgba(92, 197, 192, .15) 100%); } .testo-sezione { color: var(--testo-tenue); line-height: 1.8; max-width: 42rem; } .testo-sezione p + p { margin-top: 1rem; } /* ── Card ────────────────────────────────────────────────────────────────── */ .card-sito { background: var(--quinta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-card); overflow: hidden; height: 100%; } /* ── Hub dei portali ─────────────────────────────────────────────────────── */ .card-portale { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; text-decoration: none; color: var(--testo); background: var(--quinta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-card); position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card-portale::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accento, var(--marca)) 0, transparent 80%); } .card-portale:hover, .card-portale:focus-visible { transform: translateY(-4px); border-color: var(--accento, var(--marca)); box-shadow: var(--ombra-alta); color: var(--testo); } .card-portale .icona-portale { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accento, var(--marca)); background: color-mix(in srgb, var(--accento, var(--marca)) 14%, transparent); margin-bottom: 1rem; } .card-portale h3 { font-size: 1.25rem; margin-bottom: .45rem; } .card-portale p { color: var(--testo-tenue); font-size: .93rem; line-height: 1.6; margin-bottom: 1rem; } .card-portale .vai { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--accento, var(--marca)); display: inline-flex; align-items: center; gap: .4rem; } .card-portale:hover .vai i { transform: translateX(3px); } .card-portale .vai i { transition: transform .2s ease; } /* ── Discipline ──────────────────────────────────────────────────────────── */ .card-disciplina { position: relative; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 3 / 4; display: block; background: var(--quinta); border: 1px solid var(--bordo); box-shadow: var(--ombra-card); } .card-disciplina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card-disciplina:hover img { transform: scale(1.05); } .card-disciplina .didascalia { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.2rem 1.1rem; background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 22, .85) 65%); z-index: 2; } .card-disciplina .didascalia h3 { color: #fff; font-size: 1.3rem; margin: 0; } .card-disciplina .didascalia p { color: rgba(255, 255, 255, .8); font-size: .85rem; margin: .25rem 0 0; } /* ── Percorsi per età ────────────────────────────────────────────────────── */ .percorso { display: flex; gap: 1.1rem; padding: 1.1rem 1.2rem; background: var(--quinta); border: 1px solid var(--bordo); border-radius: var(--raggio); height: 100%; } .percorso .eta { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--marca-testo); line-height: 1.1; min-width: 3.6rem; } .percorso h3 { font-size: 1.05rem; margin-bottom: .2rem; font-style: normal; font-family: inherit; font-weight: 600; } .percorso p { color: var(--testo-tenue); font-size: .88rem; margin: 0; line-height: 1.55; } /* ── Galleria ────────────────────────────────────────────────────────────── */ .griglia-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; } .foto-galleria { position: relative; display: block; border: 0; padding: 0; background: var(--quinta); border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; } .foto-galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .2s ease; } .foto-galleria:hover img { transform: scale(1.06); } .foto-galleria::after { content: '\F52A'; font-family: 'bootstrap-icons'; position: absolute; right: .55rem; bottom: .45rem; color: #fff; font-size: 1rem; opacity: 0; transition: opacity .2s ease; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); } .foto-galleria:hover::after { opacity: 1; } /* ── Lightbox ────────────────────────────────────────────────────────────── */ /* Sempre camera oscura, in entrambi i temi: la foto deve stare su fondo neutro. */ .lightbox { position: fixed; inset: 0; z-index: 1080; background: rgba(8, 10, 14, .95); display: none; align-items: center; justify-content: center; padding: 2.5rem 1rem 4rem; } .lightbox.aperta { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; } .lightbox .didascalia-lightbox { position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; color: rgba(255, 255, 255, .8); font-size: .9rem; padding-inline: 1rem; } .lightbox button { position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .lightbox button:hover { background: rgba(255, 255, 255, .2); } .lightbox .chiudi { top: 1rem; right: 1rem; } .lightbox .precedente { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox .successiva { right: 1rem; top: 50%; transform: translateY(-50%); } /* ── Segnaposto foto ─────────────────────────────────────────────────────── */ /* Finché l'admin non carica le foto, gli spazi vuoti devono sembrare voluti. */ .segnaposto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: radial-gradient(600px 300px at 30% 20%, rgba(10, 186, 181, .16), transparent 65%), linear-gradient(150deg, var(--testata) 0%, var(--quinta) 100%); color: var(--testo-tenue); } .segnaposto img { width: 44%; max-width: 120px; height: auto; opacity: .16; object-fit: contain; position: static; } .segnaposto span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; } .segnaposto-riquadro { position: relative; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; } /* ── Contatti e form ─────────────────────────────────────────────────────── */ .riquadro-form { background: var(--quinta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-alta); padding: clamp(1.4rem, 3vw, 2.2rem); } .form-label { font-size: .85rem; font-weight: 600; color: var(--testo); margin-bottom: .35rem; } .form-label .obbligatorio { color: var(--marca-testo); } .form-control, .form-control:focus { background: var(--ribalta); border: 1px solid var(--bordo); color: var(--testo); border-radius: 10px; padding: .7rem .9rem; } .form-control:focus { border-color: var(--marca); box-shadow: 0 0 0 .2rem rgba(10, 186, 181, .18); } .form-control::placeholder { color: var(--testo-tenue); opacity: .7; } .form-control.non-valido { border-color: var(--errore-b); } /* L'autofill di Chrome ridipinge lo sfondo: lo riportiamo sul token. */ .form-control:-webkit-autofill, .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--testo); -webkit-box-shadow: 0 0 0 1000px var(--ribalta) inset; } .messaggio-errore { color: var(--errore-t); font-size: .82rem; margin-top: .3rem; display: block; } .form-check-input { background-color: var(--ribalta); border-color: var(--bordo); margin-top: .2rem; } .form-check-input:checked { background-color: var(--bottone); border-color: var(--bottone); } .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(10, 186, 181, .18); } .form-check-label { font-size: .85rem; color: var(--testo-tenue); line-height: 1.55; } /* Trappola per i bot: fuori schermo, invisibile, mai raggiungibile da tastiera. */ .campo-trappola { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; } .avviso { border-radius: 10px; padding: .85rem 1rem; border: 1px solid; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; } .avviso-successo { background: var(--successo-f); border-color: var(--successo-b); color: var(--successo-t); } .avviso-errore { background: var(--errore-f); border-color: var(--errore-b); color: var(--errore-t); } .avviso-info { background: var(--info-f); border-color: var(--info-b); color: var(--info-t); } .avviso-avviso { background: var(--avviso-f); border-color: var(--avviso-b); color: var(--avviso-t); } .riga-contatto { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; border-bottom: 1px solid var(--bordo); } .riga-contatto:last-child { border-bottom: 0; } .riga-contatto i { color: var(--marca-testo); font-size: 1.15rem; margin-top: .1rem; } .riga-contatto .etichetta { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--testo-tenue); } .riga-contatto .valore { color: var(--testo); } .riga-contatto a { color: var(--testo); text-decoration: none; } .riga-contatto a:hover { color: var(--marca-testo); } /* ── Piede ───────────────────────────────────────────────────────────────── */ .piede { background: var(--inchiostro); color: #9fb0c4; padding-block: 2.6rem 1.8rem; border-top: 1px solid rgba(56, 74, 99, .5); font-size: .87rem; line-height: 1.9; } .piede a { color: #cfd8e6; text-decoration: none; } .piede a:hover { color: #4fd8d2; } /* Le scorciatoie ai portali: una griglia a colonne uguali, così restano distanziate e allineate invece di accalcarsi al centro. Sotto i 560px diventano due colonne, e su schermi molto stretti una sola. */ .portali-piede { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1rem; max-width: 760px; margin: 0 auto 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(56, 74, 99, .5); } .portali-piede a { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .82rem; line-height: 1.35; padding: .3rem; border-radius: 10px; } .portali-piede a:hover { background: rgba(255, 255, 255, .04); } .portali-piede i { color: #4fd8d2; font-size: 1.4rem; } @media (max-width: 560px) { .portali-piede { grid-template-columns: repeat(2, 1fr); gap: 1.6rem .8rem; } } @media (max-width: 320px) { .portali-piede { grid-template-columns: 1fr; } } .piede .nome-associazione { font-weight: 600; opacity: .9; } .piede .forma-associazione { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: #6f8199; margin-bottom: .4rem; } .piede .riga-fine { opacity: .55; font-size: .74rem; line-height: 1.8; } .piede .chiusura { max-width: 760px; margin-inline: auto; } /* ── Comparsa allo scorrimento ───────────────────────────────────────────── */ /* Il contenuto è visibile di suo: l'effetto si attiva solo se il JS c'è. Se qualcosa va storto resta tutto leggibile, non sparisce niente. */ .animazioni-attive .comparsa { opacity: 0; transform: translateY(18px); transition: opacity .45s ease-out, transform .45s ease-out; } .animazioni-attive .comparsa.visibile { opacity: 1; transform: none; } /* ── Pagine di testo (privacy, cookie) ───────────────────────────────────── */ .pagina-testo { padding-block: 8rem 4rem; } .pagina-testo h2 { font-size: 1.5rem; margin-top: 2.2rem; margin-bottom: .8rem; } .pagina-testo h3 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: .5rem; } .pagina-testo p, .pagina-testo li { color: var(--testo-tenue); line-height: 1.8; } .pagina-testo ul { padding-left: 1.2rem; } .pagina-testo li { margin-bottom: .4rem; } /* ── Rispetto delle preferenze di movimento ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .copertina-foto.attiva { animation: none; } }