/* ============================================================ Apnea Ticino — sito vetrina della squadra. Niente framework, niente build step: solo HTML+CSS+JS puri, pensato per essere trascinato cosi' com'e' su Netlify. Sfondo bianco ovunque, molto minimale — il colore vero arrivera' con le foto che verranno aggiunte in "immagini/" piu' avanti. ============================================================ */ :root{ /* blu scuro richiesto esplicitamente per ogni scritta del sito (colore esatto preso dal campione mandato dall'utente) - --testo e --testo-tenue restano due variabili distinte (per non perdere la gerarchia visiva fra testo principale e secondario) ma condividono lo stesso colore */ --testo:#02233e; --testo-tenue:#02233e; --bordo:#ececec; --accento:#0e7c9c; --sfondo-scheda:#f4f6f8; } *{ box-sizing:border-box; } html, body{ margin:0; padding:0; background:#fff; } body{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--testo); -webkit-font-smoothing:antialiased; } /* la home sta tutta dentro lo schermo, senza scorrimento verticale (richiesto esplicitamente) - solo la home ha questa classe sul , le pagine interne (disciplina/menu) restano scorrevoli normalmente, ne avranno bisogno appena arrivano testi/immagini veri. "100dvh" (altezza reale visibile, che tiene conto della barra degli indirizzi del telefono) sovrascrive "100vh" nei browser che lo supportano - va dichiarato dopo, mai prima */ body.pagina-home{ height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; } body.pagina-home main{ flex:1; min-height:0; display:flex; flex-direction:column; } a{ color:inherit; } img{ max-width:100%; display:block; } /* ---------- intestazione (uguale su ogni pagina, iniettata da script.js) ---------- */ .intestazione{ display:flex; align-items:center; justify-content:space-between; padding:14px clamp(20px,5vw,56px); } .logo{ display:flex; align-items:center; } .logo-immagine{ height:88px; width:auto; display:block; } .intestazione-destra{ display:flex; align-items:center; gap:14px; } .link-social{ width:30px; height:30px; display:block; transition:opacity 200ms ease; } .link-social:hover{ opacity:0.75; } .link-social img{ width:100%; height:100%; object-fit:contain; } @media (max-width:640px){ .intestazione{ padding:10px clamp(14px,4vw,30px); } .logo-immagine{ height:60px; } .link-social{ width:24px; height:24px; } } .bottone-menu{ width:40px; height:40px; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; } .bottone-menu span{ width:22px; height:2px; background:var(--testo); border-radius:2px; transition:transform 220ms ease, opacity 220ms ease; } body.menu-aperto .bottone-menu span:nth-child(1){ transform:translateY(7px) rotate(45deg); } body.menu-aperto .bottone-menu span:nth-child(2){ opacity:0; } body.menu-aperto .bottone-menu span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---------- overlay menu a schermo intero ---------- */ .menu-overlay{ position:fixed; inset:0; background:#fff; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity 260ms ease, transform 260ms ease; } .menu-overlay.aperto{ opacity:1; pointer-events:auto; transform:translateY(0); } /* voci del menu piu' minimal (richiesto esplicitamente): testo piu' piccolo e leggero (non piu' grassetto pesante), spaziatura piu' stretta fra le voci - servono anche perche' con 10 voci nel menu (cresciuto nel tempo) la versione grande/bold di prima affollava troppo lo schermo */ .menu-overlay a{ font-size:clamp(15px,2.4vw,18px); font-weight:500; letter-spacing:0.2px; text-decoration:none; color:var(--testo-tenue); transition:color 200ms ease; } .menu-overlay a:hover{ color:#000; } .chiudi-menu{ position:absolute; top:22px; right:clamp(20px,5vw,56px); width:40px; height:40px; border:none; background:none; font-size:22px; cursor:pointer; color:var(--testo); } body.menu-aperto{ overflow:hidden; } /* ---------- home: vetrina a schermo pieno, un'attivita' alla volta ---------- occupa tutta la meta' superiore; le 6 .vetrina-slide sono impilate una sopra l'altra (position:absolute) e si passano il posto ogni 3 secondi con uno scorrimento laterale (avviaVetrina() in script.js): quella al centro (.attiva) esce a sinistra (.uscita), quella pronta a destra (posizione di riposo di default, translateX(100%)) entra al centro. */ .vetrina-attivita{ position:relative; width:100%; flex:1 1 50%; min-height:0; overflow:hidden; } .vetrina-slide{ position:absolute; inset:0; display:flex; flex-direction:row; text-decoration:none; color:var(--testo); background:#fff; transform:translateX(100%); pointer-events:none; transition:transform 650ms cubic-bezier(.4,0,.2,1); } .vetrina-slide.attiva{ transform:translateX(0); pointer-events:auto; } /* fascia col nome della disciplina - prima era sopra la foto (schiacciava in altezza lo spazio per la foto sotto), ora e' una colonna stretta a sinistra: la scritta resta la stessa (stile etichetta, vedi .vetrina-titolo sotto), solo spostata li' - richiesto esplicitamente. Vantaggio in piu': la foto ora puo' usare tutta l'altezza della vetrina, non solo quella sotto la fascia, quindi risulta anche piu' grande a parita' di "contain" (nessun taglio) - risolve anche "ingrandisci le immagini ma non troppo" nella stessa mossa, senza dover ricorrere a "cover" (che le taglierebbe). */ .vetrina-titolo-fascia{ /* NOTA per chi tocca questo di nuovo: "vicino alla foto" NON si ottiene restringendo il padding-right - la foto vera (background-size:contain dentro .vetrina-foto) spesso lascia gia' da sola un bordo bianco a sinistra (letterbox, se la sua proporzione e' piu' stretta della sua colonna), quindi il vero spazio vuoto visibile e' in gran parte QUELLO, non il padding qui. Confermato con uno screenshot dall'utente: la scritta va centrata dentro una colonna piu' larga di prima (non incollata al bordo destro), lasciando visibilmente del bianco prima della foto. */ flex:none; width:clamp(220px,44vw,520px); display:flex; align-items:center; justify-content:center; padding:14px 20px; text-align:center; } /* solo testo, niente emoji (tolta su richiesta esplicita, "più minimaliste pulite") - maiuscolo, sottile, spaziato: uno stile da etichetta/didascalia invece del titolone grassetto di prima - ingrandita su richiesta esplicita ("fai la scritta più grande") */ .vetrina-titolo{ font-size:clamp(20px,2.6vw,30px); font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--testo-tenue); } /* la foto (o, finche' non arriva, la tinta pastello) riempie tutto lo spazio che resta a destra della fascia del titolo. "contain", non "cover": le foto vere devono restare intere e ingrandite il piu' possibile, mai tagliate ne' deformate (richiesto esplicitamente) - lo spazio che avanza ai lati/sopra-sotto resta bianco. Le schede ferme sotto (.scheda-attivita) restano invece a "cover": li' sono piccole card quadrate stile poster, dove il taglio e' voluto. */ .vetrina-foto{ flex:1; min-height:0; background:var(--tinta, var(--sfondo-scheda)); background-size:contain; background-position:center; background-repeat:no-repeat; } @media (max-width:640px){ /* su telefono la larghezza e' poca: una colonna di testo a sinistra ruberebbe troppo spazio orizzontale alla foto, quindi qui il titolo torna in cima (come nella versione precedente), stretto in altezza */ .vetrina-slide{ flex-direction:column; } .vetrina-titolo-fascia{ width:auto; justify-content:center; text-align:center; padding:10px clamp(14px,4vw,30px) 2px; } } /* frecce avanti/indietro sulla vetrina - per chi vede qualcosa che gli interessa e non vuole aspettare i 3 secondi, o vuole tornare indietro */ .vetrina-freccia{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--testo); line-height:1; box-shadow:0 2px 10px rgba(15,23,42,0.12); transition:background 200ms ease, transform 200ms ease; } .vetrina-freccia:hover{ background:rgba(255,255,255,0.9); transform:translateY(-50%) scale(1.06); } .vetrina-freccia.sinistra{ left:16px; } .vetrina-freccia.destra{ right:16px; } @media (max-width:640px){ .vetrina-freccia{ width:38px; height:38px; font-size:20px; } .vetrina-freccia.sinistra{ left:10px; } .vetrina-freccia.destra{ right:10px; } } /* ---------- home: griglia di schede ferme, stile "poster" ---------- flex:1 1 50% (come .vetrina-attivita sopra) cosi' le due meta' si dividono esattamente lo spazio rimasto sotto l'intestazione. Sempre 6 colonne uguali (repeat(6,1fr), non auto-fill/auto-fit) - le attivita' sono sempre 6, colonne fisse invece che "quante ce ne stanno" riempiono davvero tutta la larghezza senza lasciare spazio vuoto a destra (bug segnalato: con auto-fill restavano colonne vuote "fantasma" che si tenevano lo spazio libero invece di lasciarlo alle 6 schede vere). Schede quadrate (aspect-ratio:1/1, richiesto esplicitamente) invece di alte come tutta la riga: l'altezza segue la larghezza di colonna, non il contrario, quindi la riga puo' restare piu' bassa della meta' disponibile - .griglia-attivita la centra in verticale con align-content:center. */ .griglia-attivita{ flex:1 1 50%; min-height:0; overflow:hidden; display:grid; grid-template-columns:repeat(6, 1fr); align-content:center; gap:14px; padding:14px clamp(20px,5vw,56px); } /* niente piu' emoji ne' scritta sopra la foto (tolte su richiesta esplicita) - la card ora e' una colonna: foto quadrata sopra, etichetta piccola sotto, fuori dalla foto */ .scheda-attivita{ display:flex; flex-direction:column; text-decoration:none; color:var(--testo); } .scheda-foto{ aspect-ratio:1/1; width:100%; border-radius:16px; overflow:hidden; background:var(--tinta, var(--sfondo-scheda)); background-size:cover; background-position:center; box-shadow:0 1px 3px rgba(15,23,42,0.06); transition:transform 260ms ease, box-shadow 260ms ease; } .scheda-attivita:hover .scheda-foto{ transform:scale(1.02); box-shadow:0 18px 34px rgba(15,23,42,0.14); } .scheda-attivita .scheda-titolo{ margin-top:8px; font-size:11.5px; font-weight:700; letter-spacing:0.2px; text-align:center; } /* ---------- pagine interne (disciplina o voce di menu) ---------- */ .pagina-interna{ max-width:720px; margin:0 auto; padding:20px clamp(20px,6vw,40px) 100px; } /* pagina Attivita' Settimanali: dentro c'e' un foglio incorporato (una tabella), piu' largo del testo normale delle altre pagine interne - non ha senso tenerlo stretto a 720px */ .pagina-interna-larga{ max-width:1100px; } /* il foglio Google viene caricato a dimensione "naturale" (grande) cosi' Google non gli mette scrollbar interne, poi tutto il riquadro viene rimpicciolito con CSS transform:scale() calcolato in JS (inizializzaFoglioAttivita() in script.js) finche' non entra per intero nella larghezza disponibile - "overflow:hidden" + altezza impostata via JS tengono il contenitore della stessa misura del foglio rimpicciolito, senza spazio vuoto sotto */ .foglio-attivita-contenitore{ width:100%; overflow:hidden; border-radius:14px; box-shadow:0 4px 20px rgba(15,23,42,0.08); margin-top:6px; } .foglio-attivita{ display:block; border:none; transform-origin:top left; } /* pagina Team: una riga per allenatore, foto e testo affiancati - alternati a destra/sinistra riga dopo riga (richiesto esplicitamente), sempre foto sopra e testo sotto su schermi stretti */ .membro-team{ display:flex; gap:34px; align-items:flex-start; margin:44px 0; flex-wrap:wrap; } .membro-team.testo-sinistra{ flex-direction:row-reverse; } .membro-team-foto{ flex:1 1 260px; max-width:280px; width:100%; border-radius:16px; box-shadow:0 4px 20px rgba(15,23,42,0.1); object-fit:cover; aspect-ratio:3/4; } .membro-team-testo{ flex:2 1 320px; min-width:260px; } .membro-team-nome{ font-size:21px; font-weight:800; letter-spacing:-0.3px; margin:0 0 3px; } .membro-team-ruolo{ font-size:13px; font-weight:700; color:var(--accento); text-transform:uppercase; letter-spacing:0.4px; margin:0 0 14px; } .membro-team-testo p{ font-size:14.5px; line-height:1.7; margin:0 0 12px; } @media (max-width:640px){ .membro-team, .membro-team.testo-sinistra{ flex-direction:column; } .membro-team-foto{ max-width:220px; margin:0 auto; } } /* pagina Eventi: stessa idea del Team - locandina e titolo/data affiancati, alternati a destra/sinistra */ .evento-locandina{ display:flex; gap:34px; align-items:center; margin:36px 0; flex-wrap:wrap; } .evento-locandina.testo-sinistra{ flex-direction:row-reverse; } .evento-locandina-foto{ flex:1 1 260px; max-width:300px; width:100%; border-radius:16px; box-shadow:0 4px 20px rgba(15,23,42,0.1); } .evento-locandina-testo{ flex:1 1 260px; min-width:220px; } .evento-locandina-titolo{ font-size:21px; font-weight:800; letter-spacing:-0.3px; margin:0 0 6px; } .evento-locandina-data{ font-size:14.5px; font-weight:700; color:var(--accento); margin:0; } @media (max-width:640px){ .evento-locandina, .evento-locandina.testo-sinistra{ flex-direction:column; } .evento-locandina-foto{ max-width:280px; margin:0 auto; } } .torna-home{ display:inline-block; margin-bottom:34px; font-size:14px; font-weight:600; text-decoration:none; color:var(--testo-tenue); transition:color 200ms ease; } .torna-home:hover{ color:var(--accento); } .pagina-interna h1{ font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-0.5px; margin:0 0 18px; } /* titolo delle 6 pagine di disciplina, stesso stile della scritta nella vetrina (.vetrina-titolo) - richiesto esplicitamente. Sovrascrive .pagina-interna h1 sopra solo dove c'e' anche questa classe. */ .pagina-interna h1.titolo-disciplina{ font-size:clamp(20px,2.6vw,30px); font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--testo-tenue); margin:0 0 20px; } .pagina-interna p{ font-size:15.5px; line-height:1.7; margin:0 0 18px; } /* filtro disciplina/anno della pagina Calendario eventi - pronto per quando ci saranno eventi veri da filtrare */ .filtro-eventi{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 30px; } .filtro-eventi select{ font-family:inherit; font-size:14px; font-weight:600; color:var(--testo); padding:10px 16px; border:1px solid var(--bordo); border-radius:10px; background:#fff; cursor:pointer; } /* legenda colori del calendario eventi: un pallino colorato + il nome della federazione per ogni fonte, cosi' si capisce a colpo d'occhio a chi corrisponde la striscia colorata di ogni riga evento */ .legenda-eventi{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:0 0 24px; } .legenda-voce{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--testo-tenue); } .legenda-pallino{ width:11px; height:11px; border-radius:50%; flex:none; } /* calendario eventi: una fascia scura per ogni mese, righe alternate chiare/bianche sotto, stile "lista competizioni" */ .mese-eventi{ background:var(--testo); color:#fff; font-weight:800; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; padding:8px 14px; border-radius:8px; margin:20px 0 6px; } .mese-eventi:first-child{ margin-top:0; } .riga-evento{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:8px; flex-wrap:wrap; } .riga-evento.chiara{ background:#f4f8fc; } /* quando l'evento ha un link alla pagina vera (Edge Function ha trovato url_originale) la riga e' un , non un
- qui si toglie lo stile di default del link e si aggiunge un piccolo hover per far capire che si puo' cliccare */ a.riga-evento{ color:inherit; text-decoration:none; cursor:pointer; transition:background 150ms ease; } a.riga-evento:hover{ background:#eaf1fb; } .evento-data{ flex:none; width:64px; font-size:12.5px; font-weight:700; } .evento-info{ flex:1 1 160px; min-width:0; } .evento-titolo{ font-size:14px; font-weight:700; line-height:1.3; } .evento-categoria{ font-size:10.5px; color:var(--testo-tenue); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; } .evento-luogo{ flex:none; font-size:12.5px; color:var(--testo-tenue); } .evento-stato{ flex:none; font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:999px; white-space:nowrap; } .evento-stato.aperte{ background:#e3f8ee; color:#1d8a5f; } .evento-stato.chiuse{ background:#eceef1; color:#7a828c; } .evento-stato.presto{ background:#fff2d6; color:#a06a00; } /* pagina Tariffe: sottotitolo, nota, elenco prezzi e QR code in fondo (l'ordine e' voluto: "in fine al testo metti qrcode") */ .sottotitolo-pagina{ font-size:clamp(18px,2.6vw,24px); font-weight:700; margin:0 0 6px; } /* volantino della disciplina, prima del testo lungo - cliccabile per ingrandire (vedi apriLightbox() in script.js), il cursore lo segnala */ .volantino-disciplina{ width:100%; border-radius:14px; margin:18px 0 26px; box-shadow:0 4px 20px rgba(15,23,42,0.08); cursor:zoom-in; } /* lightbox: click su un .volantino-disciplina la apre a schermo intero. "object-fit:contain" (mai "cover") cosi' l'immagine si ingrandisce SENZA essere tagliata - richiesto esplicitamente ("si deve ingrandire senza essere tagliata") - lo sfondo scuro riempie lo spazio che avanza invece di deformare o ritagliare la foto. */ .lightbox-overlay{ position:fixed; inset:0; z-index:200; background:rgba(2,10,20,0.92); display:flex; align-items:center; justify-content:center; padding:28px; cursor:zoom-out; } .lightbox-overlay.nascosto{ display:none; } .lightbox-overlay img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; cursor:default; } .lightbox-chiudi{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,0.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 200ms ease; } .lightbox-chiudi:hover{ background:rgba(255,255,255,0.24); } /* pagina Record: un blocco per disciplina, con link diretti ai siti ufficiali */ .blocco-record{ border-radius:16px; padding:22px 24px; margin-bottom:16px; } .blocco-record h2{ margin:0 0 14px; font-size:19px; font-weight:800; letter-spacing:-0.3px; } .link-record{ display:inline-flex; align-items:center; text-decoration:none; background:#02233e; color:#fff; font-size:13px; font-weight:700; padding:10px 16px; border-radius:999px; margin:0 10px 10px 0; transition:opacity 200ms ease; } .link-record:hover{ opacity:0.78; } /* pagina News: rassegna stampa, una riga per articolo, dal piu' recente al piu' vecchio (ordine gia' deciso nell'HTML, qui e' solo lo stile) */ .riga-news{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; padding:15px 18px; border:1px solid var(--bordo); border-radius:12px; margin-bottom:10px; text-decoration:none; color:var(--testo); font-weight:700; font-size:14.5px; transition:background 150ms ease; } .riga-news:hover{ background:#f4f8fc; } .riga-news-data{ flex:none; font-size:12px; font-weight:600; color:var(--testo-tenue); } .tariffe-nota{ font-size:14px; font-style:italic; color:var(--testo-tenue); margin:0 0 22px; } .lista-tariffe{ margin-bottom:30px; } .riga-tariffa{ display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--bordo); font-size:15px; } .riga-tariffa span:first-child{ font-weight:600; } .riga-tariffa span:last-child{ font-weight:700; white-space:nowrap; } /* QR code del modulo di iscrizione, pagina Tariffe */ .qr-iscrizione{ width:340px; max-width:85%; border-radius:14px; margin:6px 0 10px; } .immagine-piena{ width:100%; border-radius:14px; margin-top:6px; } /* pagina Area Riservata: modulo password, poi (se corretta) la zona con i documenti da scaricare - vedi inizializzaAreaRiservata() in script.js */ .blocco-password{ max-width:440px; } .modulo-password{ display:flex; gap:10px; margin:16px 0 8px; flex-wrap:wrap; } .modulo-password input{ flex:1; min-width:160px; font-family:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--bordo); border-radius:10px; } .modulo-password button{ font-family:inherit; font-size:15px; font-weight:700; color:#fff; background:#02233e; border:none; padding:12px 22px; border-radius:10px; cursor:pointer; transition:opacity 200ms ease; } .modulo-password button:hover{ opacity:0.85; } .errore-password{ color:#c0392b; font-size:13.5px; font-weight:700; min-height:18px; margin:0; } .zona-segreta .link-documento{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--testo); text-decoration:none; padding:14px 18px; border:1px solid var(--bordo); border-radius:12px; margin-bottom:12px; transition:background 150ms ease; } .zona-segreta .link-documento:hover{ background:#f4f8fc; } /* pagina Contatti: indirizzo/telefono/email a sinistra, modulo a destra - su mobile va in colonna (indirizzo sopra, modulo sotto) */ .contatti-righe{ display:flex; gap:44px; flex-wrap:wrap; margin-top:14px; } .contatti-info{ flex:1 1 200px; } .contatti-info p{ font-size:14.5px; line-height:1.7; margin:0 0 10px; } .contatti-info-nome{ font-weight:800; font-size:15.5px; } .contatti-info a{ color:var(--testo); } .contatti-form-blocco{ flex:2 1 320px; } /* pagina Contatti: modulo minimale, stessa impostazione visiva del resto del sito (bordo sottile, angoli arrotondati, niente decorazioni extra) */ .campo-nascosto{ position:absolute; left:-9999px; } /* honeypot anti-spam, invisibile a una persona vera */ .modulo-contatti{ display:flex; flex-direction:column; gap:6px; max-width:480px; margin-top:10px; } .modulo-contatti label{ font-size:13px; font-weight:700; margin-top:12px; } .modulo-contatti input, .modulo-contatti textarea{ font-family:inherit; font-size:15px; color:var(--testo); padding:12px 14px; border:1px solid var(--bordo); border-radius:10px; resize:vertical; } .modulo-contatti button{ align-self:flex-start; margin-top:18px; font-family:inherit; font-size:15px; font-weight:700; color:#fff; background:#02233e; border:none; padding:12px 26px; border-radius:10px; cursor:pointer; transition:opacity 200ms ease; } .modulo-contatti button:hover{ opacity:0.85; } .modulo-contatti button:disabled{ opacity:0.5; cursor:default; } .esito-contatti{ font-size:14.5px; font-weight:700; color:var(--accento); margin-top:10px; } /* pagina Galleria Foto: una foto alla volta, si scorre TUTTA LA PAGINA (non un riquadro chiuso al suo interno - un primo tentativo isolava lo scroll dentro un box, l'utente l'ha bocciato subito: "deve scorrere tutta la pagina non solo le foto") e "scatta" sulla successiva - scroll-snap-type sta quindi sul di questa pagina (classe "pagina-galleria" sull'HTML), non su .scorri-galleria. Quadrate e mai ritagliate ("non devono coprire tutto lo schermo, devono essere intere") - "contain" mostra la foto intera con un bordo dello sfondo pastello dove serve. */ body.pagina-galleria{ scroll-snap-type:y proximity; } .scorri-galleria a{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; scroll-snap-align:start; background:var(--sfondo-scheda); border-radius:14px; margin-top:14px; overflow:hidden; } .scorri-galleria img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } .link-modulo{ font-size:14px; font-weight:700; color:var(--accento); text-decoration:underline; } .testo-in-arrivo{ font-size:15px; font-style:italic; color:var(--testo-tenue); border:1px dashed var(--bordo); border-radius:12px; padding:16px 18px; margin-top:10px; } @media (max-width:640px){ /* 6 colonne strette diventano scomode sul telefono: 3 colonne x 2 righe, sempre quadrate e sempre a tutta larghezza (repeat(3,1fr), stesso principio delle 6 colonne sopra) */ .griglia-attivita{ grid-template-columns:repeat(3, 1fr); gap:10px; padding:10px clamp(14px,4vw,30px); } .scheda-attivita .scheda-titolo{ font-size:10.5px; margin-top:6px; } }