informativo) che apre la finestra popup con la rosa completa, stesso pattern [data-dialog] gia' usato per Organigramma/Accrediti/Documenti societari. */ .youth-grid a.youth-link-card { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .youth-grid a.youth-link-card:hover, .youth-grid a.youth-link-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(3, 15, 34, .16); } .youth-grid .youth-card-cta { display: inline-block; margin-top: 10px; color: var(--primary); font-weight: 950; font-size: .85rem; font-style: normal; } .home-news-grid span, .modern-news-card span, .youth-grid span, .ticket-card span, .accreditation-card span, .partner-levels span { color: var(--primary); font-weight: 950; text-transform: uppercase; font-size: .76rem; } .home-news-grid h3, .home-standing h3, .youth-grid strong, .ticket-card strong, .accreditation-card strong, .partner-levels strong { color: var(--night); } .home-news-grid p, .youth-grid p, .ticket-card p, .accreditation-card p, .partner-levels p, .contact-card p { color: var(--muted); line-height: 1.5; } .home-standing ol { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; } .home-standing li { display: grid; /* "minmax(0, 1fr)" invece di un semplice "1fr": senza il minimo a 0 un nome squadra lungo (dati live, non il placeholder breve nell'HTML) impedisce a questa colonna di restringersi, facendo sfondare l'intera riga oltre i bordi di ".home-standing" e, a cascata, di tutta la pagina in orizzontale su mobile. Stesso identico bug gia' risolto su ".match-strip". */ grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--modern-radius); background: var(--soft); } .home-standing li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .home-standing li.is-foligno { font-weight: 950; } .home-standing span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--night); color: var(--paper); font-weight: 950; } .home-standing a, .modern-news-card a, .single-article-card a { color: var(--primary); font-weight: 950; } .youth-grid, .partner-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } .partner-levels { grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); margin: 18px 0; } .calendar-section, .contacts-section { background: var(--soft); } /* Barra sopra il carosello partite: tasto "Cerca" che apre un campo di ricerca per filtrare le card per avversario/competizione, e tasto "Torna all'inizio" per riportare lo scroll orizzontale alla prima partita senza dover trascinare manualmente tutta la lista. Vedi applyMatchSearchFilter() e i listener su matchSearchToggle / matchScrollStartButton in app.js. */ .match-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .match-search-wrap { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .match-search-toggle, .match-scroll-start { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--modern-line, rgba(9, 30, 66, .16)); border-radius: 999px; background: #fff; color: var(--night, #0c1b33); font-weight: 800; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; } .match-search-toggle svg, .match-scroll-start svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; } .match-search-toggle:hover, .match-scroll-start:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .match-search-input { flex: 1 1 220px; min-width: 0; min-height: 38px; padding: 0 14px; border: 1px solid var(--modern-line, rgba(9, 30, 66, .16)); border-radius: 999px; background: #fff; /* 16px minimo: sotto questa soglia Safari su iPhone/iPad zooma automaticamente la pagina quando l'utente tocca il campo per scrivere, e poi bisogna zoomare indietro a mano. */ font-size: 16px; } .match-search-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .match-search-empty { margin: 0; padding: 20px; border: 1px dashed var(--modern-line, rgba(9, 30, 66, .16)); border-radius: var(--modern-radius, 14px); color: var(--muted); text-align: center; } /* Carosello orizzontale "prossime partite/risultati" (stile acperugiacalcio.com): stesso pattern gia' usato per news e rosa (scroll-snap nativo, niente JS per lo scorrimento). */ .match-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; gap: 16px; padding-top: 6px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } .match-card { flex: 0 0 clamp(240px, 70vw, 300px); scroll-snap-align: start; display: grid; gap: 14px; padding: 18px; border-radius: var(--modern-radius); background: var(--paper); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .match-card:hover { transform: translateY(-3px); border-color: rgba(17, 167, 232, .5); box-shadow: var(--shadow-soft, 0 16px 30px rgba(6, 39, 70, .12)); } .match-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .match-card-competition { color: var(--primary); font-weight: 950; text-transform: uppercase; font-size: .74rem; letter-spacing: .03em; } .match-card-top time { color: var(--muted); font-weight: 800; font-size: .82rem; } .match-card-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; } .match-card-team { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; } .match-card-team strong { color: var(--night); font-size: .84rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* I loghi delle squadre nelle card partita sono stati rimossi su richiesta (restano solo i nomi): le regole .match-card-crest / .match-card-crest img / .match-card-crest-generic non sono piu' referenziate da app.js e sono state rimosse. */ .match-card-vs { color: var(--blue-950, var(--night)); font-weight: 950; font-size: 1.1rem; } .match-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--modern-line); color: var(--muted); font-weight: 800; font-size: .82rem; } .match-card-scorers { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.4; } .standings-table-wrap { overflow-x: auto; } .standings-table { width: 100%; border-collapse: collapse; min-width: 620px; } .standings-table th, .standings-table td { padding: 14px; border-bottom: 1px solid var(--modern-line); text-align: left; } .standings-table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; } .standings-table .is-foligno { background: rgba(0, 159, 227, .1); color: var(--night); font-weight: 950; } .product-visual.has-image { background: #f8fbff; box-shadow: inset 0 0 0 1px rgba(7, 27, 58, .08); overflow: hidden; } .product-visual img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; display: block; } .news-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .news-filter button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--paper); cursor: pointer; font-weight: 900; } .news-filter button.is-active { background: var(--paper); color: var(--night); } .modern-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; } .modern-news-card { overflow: hidden; } .modern-news-card.is-hidden, .article-card.is-hidden { display: none; } /* Sezione News raggruppata per categoria (Prima squadra/Club/Giovanile): un blocco sotto l'altro, ognuno con titolo + la sua riga di card (vedi renderArticles() in app.js). ".news-category-cards" riusa lo stesso stile grid di ".cards". */ .news-categories { display: flex; flex-direction: column; gap: 34px; } .news-category-group.is-hidden { display: none; } .news-category-title { display: inline-block; margin: 0 0 14px; padding: 6px 18px; border: 2px solid var(--paper); border-radius: 999px; color: var(--sky-500); font-weight: 950; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(.85rem, .5vw + .72rem, .98rem); } /* Su mobile la sezione News (#news) esce dal flusso normale della pagina: la si raggiunge invece dalla voce "News" del menu hamburger, che la apre come pannello a schermo intero (vedi script.js, .news-panel-open). Su desktop/tablet questa sezione resta invece esattamente dov'era, sempre visibile in linea, del tutto invariata: le regole qui sotto valgono solo sotto i 720px. */ @media (max-width: 720px) { #news { display: none; } #news.news-panel-open { display: block; position: fixed; inset: 0; z-index: 9990; overflow-y: auto; -webkit-overflow-scrolling: touch; } #news .news-panel-close { display: none; } #news.news-panel-open .news-panel-close { display: flex; align-items: center; justify-content: center; } /* Nel pannello a schermo intero c'e' tutto lo spazio verticale che serve per leggere bene: elenco verticale per categoria (non piu' righe strette a scorrimento laterale, che avevano senso solo quando la sezione stava incastrata in mezzo al resto della pagina). L'anteprima "Ultime notizie" della home (#homeNewsGrid) non è toccata da questa regola. */ #news .news-category-cards { display: grid; grid-template-columns: 1fr; gap: 16px; } /* Le categorie con tante notizie (es. "Prima squadra") mostrano solo le prime 6 card qui dentro: il resto compare cliccando "Mostra altre" (vedi app.js, renderArticles()). Senza questo limite il telefono si trovava a dover caricare in un colpo solo decine di foto non appena si apriva il pannello, con conseguenti sfarfallii/bande a schermo durante il caricamento. */ #news .news-category-group:not(.is-expanded) .news-category-cards .article-card:nth-child(n+7) { display: none; } #news .news-show-more { display: flex; width: 100%; margin-top: 4px; } } /* Stesso trattamento della sezione News qui sopra, applicato a Rosa Prima squadra (#squad), Storia (#history) e Shop (#shop): su mobile escono dal flusso normale della pagina principale e si raggiungono solo dal menu hamburger, che le apre come pannello a schermo intero (vedi script.js, classe "mobile-panel-open") cosi' scorrendo dentro non si finisce piu' nelle sezioni adiacenti. Su desktop/tablet restano esattamente dove sono sempre state, sezioni normali sempre visibili scorrendo la pagina: le regole qui sotto valgono solo sotto i 720px. */ @media (max-width: 720px) { #squad, #history, #shop { display: none; } #squad.mobile-panel-open, #history.mobile-panel-open, #shop.mobile-panel-open { display: block; position: fixed; inset: 0; z-index: 9990; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Nessuno sfondo generico forzato qui: ogni sezione mantiene il proprio (Storia ha uno sfondo scuro con testo bianco, Rosa Prima squadra e Shop uno chiaro con testo scuro) - un colore fisso qui sopra li avrebbe sovrascritti, rendendo il testo illeggibile (bianco su bianco nel caso di Storia). */ } /* Lo sfondo originale di #squad e' un gradiente che sfuma verso un blu chiaro semi-trasparente (alpha .28): da sezione normale della pagina va bene, ma da pannello a schermo intero sovrapposto (position: fixed) lascia intravedere la homepage sottostante, rendendola "trasparente". Qui sotto stessi colori ma con alpha piena, solo per il pannello mobile: desktop resta invariato (usa ancora .squad-section in styles.css). */ #squad.mobile-panel-open { background: linear-gradient(180deg, var(--white), #d8f3ff); } #squad .mobile-panel-close, #history .mobile-panel-close, #shop .mobile-panel-close { display: none; } #squad.mobile-panel-open .mobile-panel-close, #history.mobile-panel-open .mobile-panel-close, #shop.mobile-panel-open .mobile-panel-close { display: flex; align-items: center; justify-content: center; /* .dialog-close (da cui questo pulsante eredita lo stile) e' position: absolute: dentro un pannello che scorre (#squad/#history/#shop sono overflow-y:auto) restava ancorato al contenuto e scompariva scorrendo in giu', intrappolando chi lo apre senza modo di chiuderlo se non tornando su fino in cima. Qui lo fissiamo alla viewport (position: fixed) cosi' resta sempre visibile e cliccabile durante lo scroll. */ position: fixed; top: 12px; right: 12px; z-index: 9991; } } .news-show-more { display: none; } .modern-news-card > :not(.news-image) { margin-left: 18px; margin-right: 18px; } .modern-news-card h3 { color: var(--night); } .modern-news-card p { color: var(--muted); line-height: 1.5; } .single-article-card { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); overflow: hidden; } .single-article-card > div:last-child { padding: clamp(22px, 4vw, 40px); } .contacts-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); } .contact-form { display: grid; gap: 12px; } .form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); padding: 13px 14px; background: var(--paper); } .contact-card img { width: 98px; height: 98px; object-fit: contain; } .contact-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .contact-socials a { padding: 8px 10px; border-radius: 999px; background: var(--soft); color: var(--night); text-decoration: none; font-weight: 900; } .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--primary); color: var(--paper); cursor: pointer; font-weight: 950; box-shadow: var(--modern-shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .privacy-section { background: linear-gradient(180deg, var(--paper), var(--soft)), repeating-linear-gradient(90deg, rgba(0, 159, 227, .045) 0 2px, transparent 2px 80px); } .privacy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .privacy-grid article { padding: 20px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); box-shadow: var(--modern-shadow); } .privacy-grid strong { color: var(--night); } .privacy-grid p { color: var(--muted); line-height: 1.5; } .cookie-banner { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 70; display: none; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; max-width: 980px; margin: 0 auto; padding: 16px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); color: var(--night); box-shadow: 0 24px 80px rgba(7, 27, 58, .22); } .cookie-banner.is-visible { display: grid; } .cookie-banner p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; } .cookie-banner > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; } .js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .js-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1450px) { .site-header { grid-template-columns: auto auto 1fr auto; } .mobile-menu-toggle { display: grid; } .main-nav { position: fixed; left: 16px; right: 16px; top: 92px; z-index: 35; display: none; max-height: calc(100vh - 120px); overflow: auto; padding: 16px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); box-shadow: var(--modern-shadow); } body.menu-open .main-nav { display: grid; justify-content: stretch; } .main-nav a { padding: 12px; border-bottom: 1px solid var(--modern-line); } .ticket-cta { justify-self: end; } .home-dashboard, .single-article-card, .contacts-layout { /* "minmax(0, 1fr)" invece di un semplice "1fr": e' la causa vera dell'overflow orizzontale su mobile. Senza il minimo a 0, l'unica colonna della griglia si allarga fino al contenuto piu' largo al suo interno (invece di restare dentro i 390px disponibili), portando tutta ".home-dashboard" (e quindi header/body) a sfondare la pagina. Confermato via devtools: grid-template-columns calcolava 948.586px invece di ~390px. */ grid-template-columns: minmax(0, 1fr); } .home-news-grid, .modern-news-grid, .youth-grid, .partner-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .site-header { grid-template-columns: auto auto 1fr; } .home-news-grid, .modern-news-grid, .youth-grid, .partner-levels { grid-template-columns: minmax(0, 1fr); } .privacy-grid, .cookie-banner { grid-template-columns: minmax(0, 1fr); } .hero { min-height: 720px; } } /* Cinematic editorial redesign inspired by the supplied video. */ .club-topbar { display: none; } .site-header { position: fixed; inset: 0 0 auto; /* Su iPhone con notch/Dynamic Island, quando il sito viene installato in Home ed aperto come app (vedi apple-mobile-web-app-capable in index.html), lo status bar style "black-translucent" fa estendere il contenuto sotto la barra di stato: senza questo margine il logo e il menu qui sotto restavano parzialmente coperti dall'orologio/batteria. env(safe-area-inset-top) vale 0 in ogni altro contesto (browser normale, Android, desktop), quindi qui non cambia nulla. */ top: env(safe-area-inset-top, 0px); z-index: 50; /* Colonna/area "toggle" per il pulsante hamburger: prima veniva aggiunta solo dentro due blocchi @media quasi identici (uno per "meno di 1450px" e uno per "piu' di 1450px"), perche' il menu inline restava un'opzione valida sopra quella soglia. Da quando il menu e' stato ristrutturato in stile Parma Calcio 1913 (pannello a scomparsa sempre dietro l'hamburger, a qualsiasi larghezza), la colonna serve sempre: e' quindi qui nella regola di base, cosi' non serve piu' ripeterla in due punti diversi. Il blocco @media (max-width: 720px) piu' sotto resta libero di ridefinire una propria disposizione (due righe) per gli schermi piu' stretti, che vince comunque perche' arriva dopo in questo stesso file. */ grid-template-columns: auto 44px minmax(0, 1fr) auto auto auto; grid-template-areas: "brand toggle nav account ticket admin"; column-gap: 16px; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(7, 27, 58, .76), transparent); box-shadow: none; backdrop-filter: none; transition: padding .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; } .brand { grid-area: brand; } .mobile-menu-toggle { display: grid; grid-area: toggle; } .main-nav { grid-area: nav; min-width: 0; } .ticket-cta { grid-area: ticket; flex: 0 0 auto; } .account-cluster { grid-area: account; display: flex; align-items: center; gap: 10px; } .header-socials { display: flex; align-items: center; gap: 6px; } .header-socials a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: var(--paper); transition: background .2s ease, border-color .2s ease, color .2s ease; } .header-socials svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .header-socials .social-instagram svg rect, .header-socials .social-instagram svg circle { fill: none; } .header-socials .social-instagram .social-dot { fill: currentColor; stroke: none; } .header-socials .social-facebook svg, .header-socials .social-youtube svg { stroke: none; fill: currentColor; } .header-socials .social-youtube .social-play { fill: #030f22; } /* Il triangolo "play" di YouTube deve restare visibile sia sull'header scuro (icona bianca, triangolo scuro) sia sull'header bianco dopo lo scroll: in quel caso l'icona diventa scura (var(--night)) e il triangolo scuro fisso spariva contro lo stesso colore, quindi qui lo schiariamo. */ .site-header.is-scrolled .header-socials .social-youtube .social-play { fill: var(--paper); } /* Il logo TikTok e' un contorno sottile: a parita' di stroke-width con gli altri risultava molto piu' leggero e poco leggibile, specialmente sull'header bianco dopo lo scroll. Lo ispessiamo per farlo risaltare. */ .header-socials .social-tiktok svg, .footer-socials .social-tiktok svg { stroke-width: 2.6; } .header-socials .social-instagram:hover { background: var(--primary); border-color: var(--primary); } .header-socials .social-facebook:hover { background: var(--primary); border-color: var(--primary); } .header-socials .social-tiktok:hover { background: #111111; border-color: #111111; color: var(--primary); } .header-socials .social-youtube:hover { background: var(--primary); border-color: var(--primary); } .site-header.is-scrolled .header-socials a { border-color: var(--modern-line); color: var(--night); } /* Tra 721px e 1024px (tablet) l'header e' gia' stretto e mostra ancora Biglietti/Redazione insieme all'account: qui le icone social restano solo nel footer per non affollare la barra. */ @media (max-width: 1024px) and (min-width: 721px) { .header-socials { display: none; } } /* Sotto i 720px (mobile) invece Biglietti e Redazione sono gia' nascosti (vedi regole piu' sotto), quindi c'e' di nuovo spazio: le icone social tornano visibili accanto al tasto Accedi, ma piu' piccole e compatte per stare comode su schermi stretti. */ @media (max-width: 720px) { .account-cluster { gap: 6px; } .header-socials { gap: 4px; } .header-socials a { width: 26px; height: 26px; } .header-socials svg { width: 13px; height: 13px; } /* Su mobile la barra ricerca/social/Accedi resta sempre visibile in cima (non solo quando si apre il menu ad hamburger): un cerchio blu pieno (lo stesso blu del tasto Shop, non trasparente) con icona bianca resta identico e ben visibile sia sopra la foto hero sia sopra lo sfondo bianco della pagina una volta scrollato. Uno sfondo semi-trasparente scuro, provato prima, si "smorzava" in un grigio spento non appena l'header si trovava sopra lo sfondo bianco. */ .header-socials a { border-color: var(--primary); background: var(--primary); color: var(--paper); } /* Stessa regola anche con l'header scrollato (bianco): senza questa, ".site-header.is-scrolled .header-socials a" (piu' specifica) rimetteva icona scura/contorno grigio, rompendo la coerenza col resto della barra sempre blu. */ .site-header.is-scrolled .header-socials a { border-color: var(--primary); background: var(--primary); color: var(--paper); } /* Il triangolo "play" di YouTube diventa bianco quando l'header e' scrollato (pensato per un'icona scura in quello stato, vedi la regola generale piu' in alto nel file): su mobile pero' l'icona resta sempre bianca, quindi qui lo riportiamo scuro per restare visibile sopra l'icona bianca invece di sparire (bianco su bianco). */ .site-header.is-scrolled .header-socials .social-youtube .social-play { fill: #030f22; } .site-search-button { border-color: var(--primary); background: var(--primary); color: var(--paper); } .site-header.is-scrolled .site-search-button { border-color: var(--primary); background: var(--primary); color: var(--paper); } .account-button { border-color: var(--modern-line); background: var(--paper); color: var(--night); } } .account-button { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .32); border-radius: var(--modern-radius); background: rgba(255, 255, 255, .1); color: var(--paper); cursor: pointer; font: inherit; font-weight: 900; white-space: nowrap; } /* Foto profilo Google/Facebook nel pulsante "Accedi"/"Account" dell'header: nascosta finche' non c'e' un utente loggato con foto (gestita da app.js). */ #userAccountAvatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .site-header.is-scrolled .account-button { border-color: var(--modern-line); background: var(--paper); color: var(--night); } .site-search-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--paper); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .site-search-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .site-search-button:hover { background: var(--primary); border-color: var(--primary); } .site-header.is-scrolled .site-search-button { border-color: var(--modern-line); background: var(--paper); color: var(--night); } .site-header.is-scrolled .site-search-button:hover { background: var(--primary); border-color: var(--primary); color: var(--paper); } @media (max-width: 720px) { .site-search-button { width: 34px; height: 34px; } .site-search-button svg { width: 15px; height: 15px; } } #adminToggle { grid-area: admin; flex: 0 0 auto; white-space: nowrap; } .site-header > .ghost-button { grid-area: admin; justify-self: end; width: auto; min-width: 0; white-space: nowrap; } .site-header.is-scrolled { padding-top: 10px; padding-bottom: 10px; border-color: rgba(7, 27, 58, .1); background: rgba(255, 255, 255, .96); box-shadow: 0 12px 36px rgba(7, 27, 58, .12); backdrop-filter: blur(16px); } .site-header::before { height: 2px; background: var(--primary); } .brand strong, .brand small, .main-nav a, .site-header .ghost-button { color: var(--paper); } .site-header.is-scrolled .brand strong, .site-header.is-scrolled .main-nav a, .site-header.is-scrolled .ghost-button { color: var(--night); } .site-header.is-scrolled .brand small { color: var(--primary); } .site-header .ghost-button { border-color: rgba(255, 255, 255, .28); } .site-header.is-scrolled .ghost-button { border-color: var(--modern-line); } .brand img { padding: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 10px 18px rgba(3, 70, 111, .2)); } .hero { min-height: 100vh; /* 100dvh sopra a 100vh (non al posto, cosi' i browser che non la conoscono restano su 100vh senza scartare l'intera dichiarazione): su iPhone Safari "100vh" viene calcolato con la barra degli indirizzi nascosta, quindi all'apertura (barra visibile) la hero risulta piu' alta dello schermo davvero visibile e serve un piccolo scroll in piu' per vedere il fondo. "100dvh" si aggiorna da solo quando la barra compare/scompare, eliminando il salto. */ min-height: 100dvh; padding-top: 132px; padding-bottom: 108px; } .hero-media { background: linear-gradient(90deg, rgba(3, 15, 34, .78), rgba(7, 27, 58, .28) 56%, rgba(0, 159, 227, .06)), linear-gradient(0deg, rgba(3, 15, 34, .58), rgba(3, 15, 34, .08) 52%); filter: saturate(1.06) contrast(1.06); pointer-events: none; } .hero-copy { max-width: 860px; padding-bottom: 70px; } /* Stessa correzione della versione mobile piu' sotto (dentro il media query max-width:720px): la freccia ".hero-photo-prev" del carosello foto sta a sinistra vicino al bordo, e la riga "La casa digitale dei Falchetti." sotto al titolo le stava troppo vicina/sopra. Qui il valore e' minore perche' su schermi larghi il padding di ".hero" (vedi styles.css) e' gia' piu' generoso. La regola dentro il media query mobile, essendo dopo in questo file, la sovrascrive automaticamente sotto i 720px. */ .hero-copy .hero-subtitle { margin-left: clamp(10px, 1.5vw, 24px); } .hero-identity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: fit-content; padding: 0; margin-bottom: 18px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .hero h1, .section-mini-head h2, .single-article-card h2, .history-section h2, .content-band h2, .falchetto-section h2, .fans-section h2, .corporate-documents-section h2, .accreditations-section h2, .stadium-section h2 { /* Look moderno/corporate: stesso font sans-serif (Inter) di tutto il resto del sito invece del serif editoriale precedente, con un peso forte per restare autorevole sui titoli. */ font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.01em; } .hero h1 { max-width: none; line-height: .9; /* Piu' visibile sopra la foto di sfondo: testo piu' "pieno" (senza cambiare il peso condiviso con gli altri titoli del sito) e un'ombra piu' netta invece di quella soffusa ereditata, per staccare meglio dal contrasto variabile della foto. */ font-weight: 700; text-shadow: 0 4px 18px rgba(3, 15, 34, .55), 0 1px 3px rgba(3, 15, 34, .6); /* "AC Foligno 1928" sempre su una sola riga, a qualunque larghezza di schermo (le dimensioni carattere nei due breakpoint mobile piu' sotto sono state rese piu' fluide apposta per non far mai uscire il testo dallo schermo su telefono). */ white-space: nowrap; } .hero-copy p:not(.eyebrow) { max-width: 620px; color: rgba(255, 255, 255, .96); /* Testo piu' grande, piu' "pieno" e con un'ombra leggera per restare leggibile su qualunque punto della foto di sfondo. */ font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 600; text-shadow: 0 2px 10px rgba(3, 15, 34, .5); } .hero-copy .hero-motto { max-width: none; margin-top: 1.15rem; color: var(--paper); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Frase tutta su una riga (richiesta esplicita): niente a-capo, e dimensione fluida legata alla larghezza (vw) invece che a un valore fisso, cosi' anche su schermi stretti il testo si restringe quanto basta per starci tutto senza spezzarsi su piu' righe. */ font-size: clamp(.6rem, 2.1vw, 1.4rem); white-space: nowrap; font-style: italic; line-height: 1.35; cursor: default; user-select: none; touch-action: manipulation; } .hero-logo { width: clamp(148px, 18vw, 230px); height: clamp(148px, 18vw, 230px); object-fit: contain; /* Prima c'era un filtro "drop-shadow" (prima con due strati bianchi che creavano un alone, poi ridotto a una sola ombra scura): anche quest'ultima versione lasciava un leggero riquadro/vignetta intorno allo stemma, segnalato dall'utente. Nessun filtro ora: lo stemma resta l'immagine cosi' com'e', senza ombre ne' aloni, ne' su desktop ne' su mobile (regola di base, vale ovunque). */ } .match-strip { left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px); border: 1px solid rgba(255, 255, 255, .18); background: rgba(3, 15, 34, .72); color: var(--paper); backdrop-filter: blur(16px); } .match-strip span, .match-strip small { color: rgba(255, 255, 255, .7); } .facts { background: #064f84; color: var(--paper); } .facts article { border-color: rgba(255, 255, 255, .18); background: #0669a8; } .facts article:nth-child(even) { background: #075f99; } .facts article::before { background: linear-gradient(90deg, var(--paper), var(--primary)); } .facts span { color: rgba(255, 255, 255, .78); font-weight: 850; } .facts strong { color: var(--paper); } .home-dashboard, .history-section, .youth-section, .calendar-section, .standings-section, .contacts-section, .privacy-section { padding-top: clamp(80px, 10vw, 148px); padding-bottom: clamp(80px, 10vw, 148px); } .home-dashboard { gap: clamp(28px, 5vw, 76px); background: var(--paper); } /* Carosello orizzontale (pattern usato dai siti dei club professionistici) invece della griglia statica a 3 colonne: scroll-snap nativo, niente JS. */ .home-news-grid { display: flex; /* "flex-start" invece del default "stretch": senza questo, ogni card veniva allungata all'altezza della piu' alta della riga, lasciando un grande vuoto bianco sotto il testo delle card piu' corte. */ align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; gap: 18px; padding-top: 6px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } .home-news-grid article { flex: 0 0 clamp(240px, 78vw, 340px); scroll-snap-align: start; display: grid; align-content: start; gap: 6px; transition: transform .25s ease, box-shadow .25s ease; } .home-news-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--modern-radius); margin-bottom: 2px; } .home-news-grid article:hover { z-index: 1; transform: translateY(-8px); box-shadow: 0 20px 40px rgba(6, 39, 70, .12); } /* Anteprima invece di testo intero: massimo 3 righe, poi "..." e il tasto "Leggi tutto" sotto porta alla stessa notizia completa nella sezione News. Non tocca la regola condivisa ".home-news-grid p, .youth-grid p..." qui sopra (color/line-height): aggiunge solo il taglio a 3 righe. */ .home-news-grid p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-news-read-more { justify-self: start; margin-top: 4px; border: 0; padding: 0; background: none; font-weight: 900; font-size: .86rem; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .home-news-read-more:hover { color: var(--night); } /* Palmares: carosello a scorrimento orizzontale con i trofei/promozioni reali del Foligno (vedi index.html, sezione Storia), stesso pattern "Palmares" del sito del Parma Calcio. Stesso scroll-snap gia' usato per ".home-news-grid"/".people-grid", niente JS necessario. */ .palmares { margin-top: clamp(32px, 5vw, 56px); } /* Bug: l'attributo "hidden" messo su ".history-copy" (blocco "Memoria statistica") da solo non bastava a nasconderlo. Motivo: ".history-copy" (piu' sopra in questo file) imposta "display: grid", una regola d'autore che vince sempre su quella di default del browser per gli elementi con l'attributo "hidden" (che e' solo una regola dello user-agent, la piu' debole della cascata) - la card restava quindi visibile nonostante l'attributo fosse presente nell'HTML. Qui si forza lo spegnimento con una regola dedicata, che si applica anche a ".palmares" per lo stesso motivo, cosi' l'attributo "hidden" funziona sempre, qualunque altra regola sia gia' presente per quell'elemento. */ .history-copy[hidden], .palmares[hidden] { display: none !important; } .palmares-label { margin: 0 0 4px; color: var(--primary); font-weight: 950; text-transform: uppercase; font-size: .76rem; letter-spacing: .04em; } .palmares-heading { margin: 0 0 16px; color: var(--white); font-size: clamp(1.3rem, 2.4vw, 1.9rem); } .palmares-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; gap: 14px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } .palmares-card { flex: 0 0 clamp(150px, 32vw, 190px); scroll-snap-align: start; display: grid; gap: 10px; padding: 22px 18px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); box-shadow: var(--modern-shadow); text-align: center; } .palmares-year { justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--white); font-weight: 950; font-size: .78rem; } .palmares-card strong { color: var(--night); font-size: 1.05rem; line-height: 1.3; } /* Un solo impulso (non infinito) sulla card di destinazione quando si clicca "Leggi tutto": aiuta a capire a colpo d'occhio quale notizia si stava cercando dentro l'elenco completo. */ .article-card.is-target-highlight { animation: newsTargetPulse 1.6s ease; } @keyframes newsTargetPulse { 0% { box-shadow: 0 0 0 0 rgba(17, 167, 232, .55); } 100% { box-shadow: 0 0 0 18px rgba(17, 167, 232, 0); } } .home-standing { align-self: start; border: 0; border-radius: var(--modern-radius); background: var(--night); color: var(--paper); box-shadow: none; } .home-standing h3, .home-standing a { color: var(--paper); } .home-standing li { background: rgba(255, 255, 255, .08); } .home-standing li.is-foligno { background: rgba(0, 159, 227, .22); } .home-standing em { color: rgba(255, 255, 255, .72); } .hub-card { border: 0; border-radius: var(--modern-radius); box-shadow: none; } /* La griglia ha 6 card: 1 grande (alta 2 righe) + 5 normali, quindi l'ultima card resta da sola sull'ultima riga e le due celle libere accanto mostravano lo sfondo del contenitore (il "quadrato grigio"). Le facciamo occupare l'intera riga cosi' non restano celle vuote. */ .hub-card:last-child { grid-column: 1 / -1; } .history-section { background: linear-gradient(90deg, rgba(3, 15, 34, .97), rgba(7, 27, 58, .76)), url("assets/images/foligno-torres-1982-83.webp") center / cover fixed; color: var(--paper); } .history-section h2, .history-section .history-copy h3, .history-section .history-copy p { color: var(--paper); } .history-copy, .identity-card, .club-timeline li { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .08); color: var(--paper); box-shadow: none; backdrop-filter: blur(10px); } .club-timeline span, .identity-card h3, .identity-card dd { color: var(--paper); } .identity-card dt { color: rgba(255, 255, 255, .58); } .modern-news-grid { gap: 1px; background: rgba(255, 255, 255, .16); } .modern-news-card { border: 0; border-radius: var(--modern-radius); box-shadow: none; } .single-article-card { min-height: 680px; border: 0; border-radius: var(--modern-radius); background: var(--night); color: var(--paper); box-shadow: none; } .single-article-card h2, .single-article-card p { color: var(--paper); } .single-article-card > div:last-child { display: grid; align-content: center; padding: clamp(34px, 7vw, 100px); } .ticket-card, .partner-levels article, .privacy-grid article { border-radius: var(--modern-radius); box-shadow: none; } .contacts-section { background: var(--night); color: var(--paper); } .contacts-section h2, .contact-card h3, .contact-card p, .contact-card a { color: var(--paper); } .contact-form, .contact-card { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); box-shadow: none; } .contact-socials a { border: 1px solid rgba(255, 255, 255, .18); background: transparent; } .site-footer { padding-top: 48px; padding-bottom: 48px; background: #030f22; } @media (max-width: 1450px) { .site-header { grid-template-columns: auto 44px minmax(24px, 1fr) auto auto auto; grid-template-areas: "brand toggle nav account ticket admin"; column-gap: 10px; background: rgba(7, 27, 58, .92); backdrop-filter: blur(14px); } .site-header.is-scrolled { background: rgba(255, 255, 255, .97); } .main-nav { top: 88px; } .hero { padding-top: 142px; } } @media (max-width: 720px) { /* L'hamburger sta subito dopo il logo (nessuna colonna elastica in mezzo); lo spazio flessibile si sposta dopo l'hamburger cosi' spinge invece il blocco account (social + Accedi) verso destra. Il tasto Shop dell'header viene nascosto su mobile (richiesta esplicita): resta raggiungibile solo dalla voce "Shop" nel menu hamburger, cosi' l'header sta su una riga sola invece di due. */ .site-header { grid-template-columns: auto 44px minmax(8px, 1fr) auto; grid-template-areas: "brand toggle spacer account"; padding: 10px 14px; } .ticket-cta { display: none; } .main-nav { grid-area: auto; } .brand img { width: 50px; height: 50px; } .brand { min-width: 0; } .brand span { display: none; } .account-button { min-height: 40px; padding: 0 9px; font-size: .76rem; } .mobile-menu-toggle { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); } .mobile-menu-toggle span { background: var(--paper); } .site-header.is-scrolled .mobile-menu-toggle { border-color: var(--modern-line); background: var(--paper); } .site-header.is-scrolled .mobile-menu-toggle span { background: var(--night); } .hero { min-height: 820px; padding-top: 120px; } .hero h1 { /* Fluida (invece di fissa) cosi' non straripa sui tablet piu' stretti di questo intervallo, restando comunque su una sola riga. */ font-size: clamp(2.2rem, 5.5vw, 3.9rem); } .hero-logo { /* Leggermente piu' piccolo solo su mobile (su desktop resta com'era). */ width: 88px; height: 88px; } /* "Prossima gara" (".match-strip"): stessa richiesta, solo su mobile. E' un blocco a posizione assoluta ancorato al fondo dell'hero, quindi rimpicciolirlo qui non basta da solo: il padding-bottom dell'hero (piu' sotto, nell'ultimo blocco "@media (max-width: 720px)" di questo file) e' stato aumentato in proporzione per lasciargli lo spazio giusto senza coprire i pulsanti "Ultime notizie/Shop". */ .match-strip { padding: 10px 14px; gap: 8px; border-radius: 8px; } .match-strip-next { gap: 4px; } .match-strip strong { font-size: clamp(.95rem, 4.4vw, 1.3rem); } .match-strip span, .match-strip small { font-size: .74rem; } /* Blocco "in diretta" (".match-strip-live"): stessa richiesta di sopra, qualificata con l'antenato per battere in specificita' le regole generiche ".match-strip strong" appena sopra (altrimenti vincerebbero loro, essendo scritte per ultime in questo stesso file). */ .match-strip-live { gap: 4px 8px; padding-bottom: 8px; } .match-strip-live .match-strip-live-teams { font-size: clamp(.9rem, 4vw, 1.15rem); } .match-strip-live .match-strip-live-score { font-size: clamp(1rem, 4.2vw, 1.25rem); } .home-dashboard, .history-section, .youth-section, .calendar-section, .standings-section, .contacts-section, .privacy-section { padding-top: 76px; padding-bottom: 76px; } .single-article-card { min-height: 460px; } } /* Privacy, social footer and final mobile organization. */ .privacy-policy { margin-top: 22px; border: 1px solid var(--modern-line); background: var(--paper); } .privacy-policy details { border-bottom: 1px solid var(--modern-line); } .privacy-policy details:last-of-type { border-bottom: 0; } .privacy-policy summary { position: relative; padding: 18px 52px 18px 20px; color: var(--night); cursor: pointer; font-weight: 950; list-style: none; } .privacy-policy summary::-webkit-details-marker { display: none; } .privacy-policy summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.3rem; } .privacy-policy details[open] summary::after { content: "−"; } .privacy-policy details p { margin: 0; padding: 0 20px 20px; color: var(--muted); line-height: 1.65; } .privacy-policy a { color: var(--primary); font-weight: 900; } .legal-review-note { margin: 0; padding: 18px 20px; border-top: 1px solid var(--modern-line); background: var(--soft); color: var(--muted); line-height: 1.5; } .site-footer { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(240px, 1fr); gap: 28px; align-items: center; } .footer-club { grid-column: 1; display: flex; gap: 14px; align-items: center; } /* Logo del Technical Partner nel footer: nessun link, solo il logo, posizionato tra il blocco societa' e i link legali. Sfondo bianco perche' i loghi (es. Mizuno) sono scuri e sparirebbero sul footer blu. */ .footer-technical-partner { grid-column: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .footer-technical-partner[hidden] { display: none; } .footer-technical-partner span { color: rgba(255, 255, 255, .58); font-size: .68rem; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; } .footer-technical-partner img { height: 40px; max-width: 140px; object-fit: contain; padding: 8px 14px; border-radius: 10px; background: var(--white); } .footer-home-link { flex: 0 0 auto; display: block; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; } .footer-home-link img { width: 100%; height: 100%; object-fit: contain; } .footer-club strong, .footer-club span { display: block; } .footer-club strong { color: var(--paper); font-size: 1.15rem; } .footer-club span, .footer-note { color: rgba(255, 255, 255, .58); } .footer-legal { grid-column: 3; display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .footer-legal a, .footer-legal button { padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .78); cursor: pointer; font: inherit; font-weight: 850; text-decoration: none; } .footer-legal a:hover, .footer-legal button:hover { color: var(--paper); } .footer-socials { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .14); } .footer-socials a { min-height: 94px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: #030f22; color: var(--paper); text-decoration: none; font-weight: 900; transition: background .18s ease, color .18s ease; } .footer-socials svg { width: 30px; height: 30px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .footer-socials .social-instagram svg rect, .footer-socials .social-instagram svg circle { fill: none; } .footer-socials .social-instagram .social-dot { fill: currentColor; stroke: none; } .footer-socials .social-facebook svg, .footer-socials .social-youtube svg { stroke: none; } .footer-socials .social-tiktok svg { fill: none; } .footer-socials .social-youtube .social-play { fill: #030f22; } .footer-socials .social-instagram:hover { background: var(--primary); } .footer-socials .social-facebook:hover { background: var(--primary); } .footer-socials .social-tiktok:hover { background: #111111; color: var(--primary); } .footer-socials .social-youtube:hover { background: var(--primary); } .footer-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: .84rem; } .cookie-banner a { color: var(--primary); font-weight: 900; } .customer-login-panel { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--modern-line); background: var(--paper); } .customer-login-panel h3 { margin: 0; color: var(--night); } .customer-login-panel p { margin: 0; color: var(--muted); line-height: 1.45; } /* Foto profilo Google/Facebook mostrata nel dialog di accesso, sotto ai pulsanti social, una volta che l'utente ha effettuato l'accesso. */ .customer-account-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 4px auto 0; border: 3px solid var(--paper); box-shadow: var(--shadow-soft, 0 8px 20px rgba(0, 0, 0, .12)); } .social-login-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--modern-line); background: var(--paper); color: var(--night); cursor: pointer; font: inherit; font-weight: 900; } .social-login-button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 950; } .google-login span { color: #4285f4; background: #f4f7fb; } .user-login-dialog { width: min(92vw, 480px); max-height: 90vh; padding: 0; overflow: auto; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 28px 80px rgba(3, 15, 34, .38); } .user-login-dialog::backdrop { background: rgba(3, 15, 34, .76); backdrop-filter: blur(6px); } .user-login-card { position: relative; padding: clamp(1.35rem, 5vw, 2.5rem); background: var(--paper); color: var(--night); } .user-login-card > img { width: 78px; height: 78px; object-fit: contain; } .user-login-card h2 { margin: .3rem 0 .75rem; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; } .user-login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; } .user-login-card .customer-login-panel { margin-top: 1.25rem; padding: 0; border: 0; } .dialog-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid var(--modern-line); border-radius: 50%; background: var(--soft); color: var(--night); cursor: pointer; font-size: 1.6rem; line-height: 1; } /* Dialog "contenitore" per Privacy Policy, Documenti ed email e Documenti societari: prima erano sezioni fisse della pagina, ora sono finestre popup apribili dal footer (vedi index.html e script.js, [data-dialog]). Il contenuto interno (.privacy-section / .documents-section / .corporate-documents-section e tutte le classi annidate) resta identico e invariato: qui si aggiunge solo l'incorniciatura del popup, cosi' nessuna regola CSS gia' esistente per quei contenuti va toccata o rischia di rompersi. */ .content-dialog { width: min(94vw, 900px); max-height: 88vh; padding: 0; overflow: auto; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 28px 80px rgba(3, 15, 34, .38); } .content-dialog::backdrop { background: rgba(3, 15, 34, .76); backdrop-filter: blur(6px); } .content-dialog-card { position: relative; min-height: 100%; background: var(--paper); } .content-dialog-card > .dialog-close { z-index: 2; } /* Le sezioni originali hanno un padding verticale pensato per una sezione a piena pagina (fino a ~148px sopra e sotto): dentro lo spazio piu' compatto della finestra popup risulterebbe eccessivo, quindi qui viene ridotto solo quando si trovano dentro un .content-dialog-card. */ .content-dialog-card > .privacy-section, .content-dialog-card > .documents-section, .content-dialog-card > .corporate-documents-section, .content-dialog-card > .accreditations-section, .content-dialog-card > .videos-section, .content-dialog-card > .academy-section, .content-dialog-card > .csr-section, .content-dialog-card > .player-profile-section, .content-dialog-card > .sponsor-profile-section { padding: clamp(48px, 8vw, 64px) clamp(20px, 5vw, 40px) clamp(32px, 6vw, 48px); } .site-search-dialog { width: min(92vw, 560px); max-height: 80vh; padding: 0; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 28px 80px rgba(3, 15, 34, .38); align-self: start; margin-top: 10vh; } .site-search-dialog::backdrop { background: rgba(3, 15, 34, .76); backdrop-filter: blur(6px); } .site-search-card { position: relative; padding: clamp(1.35rem, 5vw, 2rem); background: var(--paper); color: var(--night); border-radius: 18px; } .site-search-card h2 { margin: 0 0 1rem; padding-right: 42px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 4vw, 1.7rem); } .site-search-input-wrap { position: relative; display: flex; align-items: center; } .site-search-input-wrap svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; } #siteSearchInput { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--modern-line); border-radius: 12px; background: var(--soft); color: var(--night); font: inherit; font-size: 1rem; } #siteSearchInput:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .site-search-results { margin-top: 1rem; max-height: min(50vh, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .site-search-hint, .site-search-empty { padding: 1rem .25rem; color: var(--muted); line-height: 1.5; } .site-search-result { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--night); text-decoration: none; transition: background .15s ease, border-color .15s ease; } .site-search-result:hover, .site-search-result:focus-visible { background: var(--soft); border-color: var(--modern-line); } .site-search-result-type { grid-row: 1 / 3; align-self: center; padding: 4px 10px; border-radius: 999px; background: rgba(0, 159, 227, .12); color: var(--primary); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .site-search-result strong { grid-column: 2; font-weight: 700; } .site-search-result-description { grid-column: 2; color: var(--muted); font-size: .9rem; line-height: 1.4; } /* Lightbox condiviso per le gallerie foto pubbliche (Organigramma, Campagna abbonamenti): mostra la foto ingrandita a schermo intero con frecce avanti/indietro, sopra uno sfondo scuro sfocato coerente con gli altri dialoghi del sito (ricerca, login). */ /* display:none di base (non solo affidato allo user-agent stylesheet): alcune versioni di Safari non promuovono sempre