/* Modern club layer for AC Foligno 1928. Keep this file easy to edit. */ :root { --primary: #009FE3; --night: #071B3A; --paper: #FFFFFF; --soft: #F4F7FB; --modern-line: rgba(7, 27, 58, .12); --modern-shadow: 0 18px 46px rgba(7, 27, 58, .12); --modern-radius: 18px; } body { background: linear-gradient(180deg, rgba(244, 247, 251, .96), rgba(255, 255, 255, .98)), radial-gradient(circle at 12% 0, rgba(0, 159, 227, .12), transparent 32%); } .club-topbar { background: var(--night); } .site-header { grid-template-columns: auto auto minmax(0, 1fr) auto auto; background: rgba(255, 255, 255, .96); } .brand strong { color: var(--night); } .brand small, .main-nav a:hover { color: var(--primary); } .mobile-menu-toggle { display: none; position: relative; width: 44px; height: 44px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); cursor: pointer; transition: transform .2s ease, background .2s ease; } .mobile-menu-toggle:hover { transform: scale(1.06); } .mobile-menu-toggle:active { transform: scale(.94); } /* Le tre barre sono ancorate tutte allo stesso punto (centro esatto del pulsante, via position:absolute + top/left 50% + translate -50%/-50%), invece di essere impilate una sotto l'altra con un margine tra loro. Cosi' quando ruotano per formare la X partono e finiscono nello stesso identico punto e si incrociano sempre perfettamente al centro, senza dipendere dal calcolo esatto di uno spostamento che deve "indovinare" la distanza tra le barre. */ .mobile-menu-toggle span { display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 99px; background: var(--night); transition: transform .3s cubic-bezier(.5, -.3, .5, 1.3), opacity .2s ease; } .mobile-menu-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); } .mobile-menu-toggle span:nth-child(2) { transform: translate(-50%, -50%); } .mobile-menu-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); } /* Animazione "a X": quando il menu e' aperto (classe aggiunta da script.js su al click del pulsante) le tre barre si trasformano in una X. Le barre 1 e 3 partono gia' dal centro (stesso punto di rotazione), quindi ruotando di +/-45 gradi si incrociano sempre in modo completo. */ body.menu-open .mobile-menu-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } body.menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0); } body.menu-open .mobile-menu-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } .ticket-cta { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: var(--modern-radius); background: var(--primary); color: var(--paper); text-decoration: none; font-weight: 950; box-shadow: 0 12px 28px rgba(0, 159, 227, .24); } .hero { min-height: 760px; align-items: center; } .hero-media { background: linear-gradient(90deg, rgba(7, 27, 58, .96), rgba(7, 27, 58, .44) 55%, rgba(0, 159, 227, .28)), url("assets/images/home-tifosi-foligno-20260703.jpg") center / cover; } .hero-copy p:not(.eyebrow) { max-width: 720px; } .match-strip { border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .92); color: var(--night); } #matchCountdown { color: var(--primary); font-weight: 950; } .home-dashboard, .match-experience, .youth-section, .calendar-section, .standings-section, .single-article-section, .ticketing-section, .contacts-section, .privacy-section { padding: clamp(44px, 7vw, 92px) clamp(16px, 4vw, 56px); } .home-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 18px; background: var(--soft); } .section-mini-head { margin-bottom: 18px; } .section-mini-head h2 { color: var(--night); } .home-news-grid, .experience-grid, .youth-grid, .ticketing-grid, .accreditation-grid, .partner-levels, .contacts-layout { display: grid; gap: 14px; } .home-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-news-grid article, .home-standing, .experience-grid article, .youth-grid article, .ticket-card, .accreditation-card, .partner-levels article, .contact-card, .contact-form, .single-article-card, .modern-news-card, .standings-table-wrap, .match-list article { border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); box-shadow: var(--modern-shadow); } .home-news-grid article, .home-standing, .experience-grid article, .youth-grid article, .ticket-card, .accreditation-card, .partner-levels article, .contact-card, .contact-form { padding: 20px; } .home-news-grid span, .modern-news-card span, .experience-grid 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, .experience-grid strong, .youth-grid strong, .ticket-card strong, .accreditation-card strong, .partner-levels strong { color: var(--night); } .home-news-grid p, .experience-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; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--modern-radius); background: var(--soft); } .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; } .match-experience { background: linear-gradient(135deg, var(--night), #0a315f), repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 72px); color: var(--paper); } .match-experience h2, .match-experience .section-intro { color: var(--paper); } .experience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; } .experience-grid article { background: rgba(255, 255, 255, .1); color: var(--paper); border-color: rgba(255, 255, 255, .18); } .experience-grid strong, .experience-grid p { color: var(--paper); } .youth-grid, .ticketing-grid, .partner-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } .partner-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; } .calendar-section, .contacts-section { background: var(--soft); } .match-list { display: grid; gap: 10px; } .match-list article { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center; padding: 16px; } .match-list time { color: var(--primary); font-weight: 950; } .match-list strong { color: var(--night); } .match-list span { color: var(--muted); font-weight: 800; } .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 { display: none; } .news-image, .single-article-media { min-height: 190px; background: linear-gradient(180deg, rgba(7, 27, 58, .08), rgba(7, 27, 58, .72)), url("assets/images/foligno-torres-1982-83.jpg") center / cover; } .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); } .article-meta { color: var(--muted); font-weight: 800; } .ticket-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; } .next-ticket { background: linear-gradient(135deg, rgba(7, 27, 58, .96), rgba(0, 159, 227, .8)), url("assets/foligno-calcio-1928-trasparente.png") right -42px bottom -52px / 190px no-repeat; color: var(--paper); } .next-ticket strong, .next-ticket p { color: var(--paper); } .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; } .voice-command-toggle { position: fixed; right: 18px; bottom: 72px; z-index: 41; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--night); color: var(--paper); cursor: pointer; font-size: 1.1rem; line-height: 1; box-shadow: var(--modern-shadow); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } .voice-command-toggle:hover { transform: translateY(-2px); } .voice-command-toggle.is-listening { background: var(--primary); box-shadow: 0 0 0 0 rgba(0, 159, 227, .55); animation: voice-command-pulse 1.6s ease-out infinite; } @keyframes voice-command-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 159, 227, .45); } 70% { box-shadow: 0 0 0 14px rgba(0, 159, 227, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 159, 227, 0); } } .voice-status-pill { position: fixed; right: 18px; bottom: 126px; z-index: 41; max-width: min(320px, calc(100vw - 36px)); margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--night); color: var(--paper); font-size: .86rem; font-weight: 600; text-align: right; box-shadow: var(--modern-shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .voice-status-pill.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 720px) { .voice-command-toggle { right: 14px; bottom: 64px; width: 42px; height: 42px; } .voice-status-pill { right: 14px; left: 14px; bottom: 114px; max-width: none; text-align: left; } } .reliability-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 16px; margin-top: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--modern-radius); background: rgba(255, 255, 255, .1); color: var(--paper); } .reliability-score { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 42px; margin-bottom: 12px; border-radius: 999px; background: var(--primary); color: var(--paper); font-weight: 950; } .reliability-panel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .reliability-panel li { display: grid; gap: 4px; padding: 12px; border-radius: var(--modern-radius); background: rgba(255, 255, 255, .12); } .reliability-panel li span { color: rgba(255, 255, 255, .72); font-size: .76rem; font-weight: 900; text-transform: uppercase; } .backup-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 8px; } .backup-actions p { width: 100%; margin: 0; color: rgba(255, 255, 255, .8); font-weight: 800; } .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; } .gallery-modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 24px; background: rgba(7, 27, 58, .86); } .gallery-modal.is-open { display: grid; } .gallery-modal img { max-width: min(940px, 94vw); max-height: 84vh; border-radius: var(--modern-radius); box-shadow: 0 28px 90px rgba(0, 0, 0, .4); } .gallery-modal button { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--night); cursor: pointer; font-size: 1.4rem; font-weight: 950; } .js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .js-reveal.is-visible { opacity: 1; transform: translateY(0); } .live-pulse { animation: live-pulse .85s ease; } @keyframes live-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } @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, .reliability-panel { grid-template-columns: 1fr; } .home-news-grid, .modern-news-grid, .experience-grid, .youth-grid, .ticketing-grid, .partner-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .privacy-grid, .reliability-panel ul { 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, .experience-grid, .youth-grid, .ticketing-grid, .partner-levels { grid-template-columns: 1fr; } .privacy-grid, .reliability-panel ul, .cookie-banner { grid-template-columns: 1fr; } .match-list article { grid-template-columns: 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; z-index: 50; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "brand 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 { 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: #c13584; border-color: #c13584; } .header-socials .social-facebook:hover { background: #1877f2; border-color: #1877f2; } .header-socials .social-tiktok:hover { background: #111111; border-color: #111111; color: #25f4ee; } .header-socials .social-youtube:hover { background: #ff0000; border-color: #ff0000; } .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; } } .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); } #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; 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%), url("assets/images/home-tifosi-foligno-20260703.jpg") center / cover; filter: saturate(1.06) contrast(1.06); } .hero-copy { max-width: 860px; padding-bottom: 70px; } .hero-copy::before { width: 72px; height: 2px; background: var(--primary); } .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, .match-experience h2, .single-article-card h2, .history-section h2, .official-hub h2, .content-band h2, .falchetto-section h2, .redazione-section .section-head 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); } /* "Vola con noi": riga normale nel flusso della hero, subito sotto "La casa digitale dei Falchetti", scritta con un font corsivo elegante (stile calligrafico), come la scritta incisa "Nati per volare" sul vetro dello stadio. Scritta lettera per lettera via JS al caricamento della pagina. clamp() la rende fluida su qualunque schermo (PC fisso, tablet/PC ibridi e mobile), senza bisogno di media query dedicate: cresce e si restringe insieme al resto del testo della hero. */ .hero-copy .hero-hello { margin: .5rem 0 0; } .hero-hello-text { color: var(--primary); font-family: "Dancing Script", "Brush Script MT", cursive; font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-style: normal; font-weight: 700; } .hero-hello-text .hero-hello-caret { display: inline-block; width: .03em; margin-left: .06em; border-right: 2px solid currentColor; animation: hero-hello-blink .85s step-end infinite; } @keyframes hero-hello-blink { 50% { border-color: transparent; } } .hero-copy .hero-motto { max-width: 700px; margin-top: 1.15rem; padding-left: 1rem; border-left: 3px solid var(--primary); color: var(--paper); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1.05rem, 2vw, 1.4rem); 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; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .96)) drop-shadow(0 0 12px rgba(255, 255, 255, .38)) drop-shadow(0 24px 42px rgba(3, 15, 34, .62)); } .notification-button { border: 0; cursor: pointer; font: inherit; } .notification-button.is-enabled { background: #e8f7ff; color: var(--night); } .notification-status { min-height: 20px; margin: 10px 0 0; color: rgba(255, 255, 255, .86); font-size: .9rem; font-weight: 750; } .hero-board article { border: 1px solid rgba(255, 255, 255, .18); background: rgba(3, 15, 34, .46); backdrop-filter: blur(14px); } .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, .official-hub, .history-section, .youth-section, .calendar-section, .standings-section, .ticketing-section, .contacts-section, .privacy-section { padding-top: 112px; padding-bottom: 112px; } .home-dashboard { gap: clamp(28px, 5vw, 76px); background: var(--paper); } .home-news-grid { gap: 1px; background: var(--modern-line); } .home-news-grid article { min-height: 330px; display: grid; align-content: end; border: 0; border-radius: var(--modern-radius); box-shadow: none; transition: background .25s ease, transform .25s ease; } .home-news-grid article:hover { z-index: 1; background: var(--soft); transform: translateY(-8px); } .home-standing { align-self: stretch; 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); } .official-hub { background: var(--soft); } .hub-grid { gap: 1px; background: rgba(7, 27, 58, .1); } .hub-card, .hub-card-large { border: 0; border-radius: var(--modern-radius); box-shadow: none; } .hub-card-large { min-height: 560px; } .history-section { background: linear-gradient(90deg, rgba(3, 15, 34, .97), rgba(7, 27, 58, .76)), url("assets/images/foligno-torres-1982-83.jpg") center / cover fixed; color: var(--paper); } .history-section h2, .history-section .section-intro, .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); } .match-experience { min-height: 680px; display: grid; align-content: center; background: linear-gradient(90deg, rgba(3, 15, 34, .94), rgba(7, 27, 58, .42)), url("assets/images/foligno-torres-1982-83.jpg") center / cover; } .experience-grid article { border: 0; border-top: 1px solid rgba(255, 255, 255, .28); border-radius: var(--modern-radius); background: transparent; box-shadow: none; } .modern-news-grid { gap: 1px; background: rgba(255, 255, 255, .16); } .modern-news-card { border: 0; border-radius: var(--modern-radius); box-shadow: none; } .modern-news-card .news-image { min-height: 290px; transition: transform .45s ease, filter .45s ease; } .modern-news-card:hover .news-image { transform: scale(1.025); filter: saturate(1.08); } .single-article-section { padding-left: 0; padding-right: 0; background: var(--night); } .single-article-card { min-height: 680px; border: 0; border-radius: var(--modern-radius); background: var(--night); color: var(--paper); box-shadow: none; } .single-article-media { min-height: 680px; } .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); } .ticketing-section { background: var(--paper); } .next-ticket { min-height: 340px; align-content: end; background: linear-gradient(180deg, rgba(3, 15, 34, .08), rgba(3, 15, 34, .9)), url("assets/images/foligno-torres-1982-83.jpg") center / cover; } .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, .contacts-section .section-intro, .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. Biglietti e Redazione tornano visibili su una seconda riga sotto, cosi' non affollano la prima. */ .site-header { grid-template-columns: auto 44px minmax(8px, 1fr) auto; grid-template-areas: "brand toggle spacer account" "ticket ticket ticket admin"; row-gap: 10px; padding: 10px 14px; } .ticket-cta { display: inline-flex; grid-area: ticket; width: 100%; } .site-header > .ghost-button { display: inline-flex; grid-area: admin; } .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 { width: 136px; height: 136px; } .home-dashboard, .official-hub, .history-section, .youth-section, .calendar-section, .standings-section, .ticketing-section, .contacts-section, .privacy-section { padding-top: 76px; padding-bottom: 76px; } .home-news-grid article { min-height: 260px; } .single-article-card, .single-article-media { min-height: 460px; } .match-experience { min-height: 760px; } } /* 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(260px, 1fr) auto; gap: 28px; align-items: center; } .footer-club { display: flex; gap: 14px; align-items: center; } .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 { 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: #c13584; } .footer-socials .social-facebook:hover { background: #1877f2; } .footer-socials .social-tiktok:hover { background: #111111; color: #25f4ee; } .footer-socials .social-youtube:hover { background: #ff0000; } .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, .change-password-panel { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--modern-line); background: var(--paper); } .customer-login-panel h3, .change-password-panel h3 { margin: 0; color: var(--night); } .customer-login-panel p, .change-password-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; } .facebook-login { border-color: #1877f2; background: #1877f2; color: var(--paper); } .facebook-login span { background: var(--paper); color: #1877f2; } .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; } .change-password-panel input { min-height: 44px; padding: 11px 12px; border: 1px solid var(--modern-line); background: var(--paper); } /* Redazione: pannelli stabili e leggibili a ogni larghezza. */ .access-layout { grid-template-columns: minmax(280px, 380px) minmax(320px, 560px); align-items: start; justify-content: start; } .access-layout > * { min-width: 0; } .login-panel { grid-column: 1; grid-row: 1; } .change-password-panel { grid-column: 2; grid-row: 1; width: 100%; } .user-panel { grid-column: 1 / -1; grid-row: 2; width: 100%; } .logged-in .change-password-panel { grid-column: 1 / -1; width: min(100%, 560px); } .users-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .user-card { min-width: 0; min-height: 180px; } .user-card h4, .user-card p { overflow-wrap: normal; word-break: normal; } @media (max-width: 1100px) { .access-layout { grid-template-columns: minmax(0, 1fr); } .login-panel, .change-password-panel, .logged-in .change-password-panel, .user-panel { grid-column: 1; grid-row: auto; width: 100%; } } @media (max-width: 520px) { .users-grid { grid-template-columns: minmax(0, 1fr); } .user-card { min-height: 0; } } .payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .payment-methods label { position: relative; cursor: pointer; } .payment-methods input { position: absolute; opacity: 0; pointer-events: none; } .payment-methods span { min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--modern-line); background: var(--paper); color: var(--night); font-weight: 900; text-align: center; } .payment-methods input:checked + span { border-color: var(--primary); background: rgba(0, 159, 227, .1); box-shadow: inset 0 0 0 1px var(--primary); } .payment-methods input:focus-visible + span { outline: 3px solid rgba(0, 159, 227, .3); outline-offset: 2px; } .provider-panel { display: grid; gap: 8px; padding: 12px; border-left: 4px solid var(--primary); background: var(--paper); } .provider-panel[hidden] { display: none; } .provider-panel p { margin: 0; color: var(--muted); line-height: 1.45; } .checkout-consent { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; color: var(--muted); font-size: .88rem; line-height: 1.4; } .checkout-consent input { margin-top: 3px; } .payment-provider-fallback[hidden] { display: none; } .order-archive { margin-top: 2rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(7, 27, 58, 0.12); border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(7, 27, 58, 0.08); } .order-archive-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .order-archive-head h3 { margin: 0.2rem 0 0; } .order-table-wrap { margin-top: 1rem; overflow-x: auto; } .order-table { width: 100%; min-width: 720px; border-collapse: collapse; } .order-table th, .order-table td { padding: 0.85rem; border-bottom: 1px solid rgba(7, 27, 58, 0.1); text-align: left; vertical-align: top; white-space: pre-line; } .order-table th { color: #59677b; font-size: 0.75rem; text-transform: uppercase; } .order-status { color: #006f9f; font-weight: 800; text-transform: capitalize; } .falchetto-secret { position: fixed; left: 50%; bottom: 26px; z-index: 220; width: min(420px, calc(100vw - 28px)); padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px; background: linear-gradient(135deg, rgba(7, 27, 58, .96), rgba(0, 111, 159, .96)); box-shadow: 0 24px 70px rgba(3, 15, 34, .34); color: #fff; text-align: center; transform: translate(-50%, 26px); opacity: 0; pointer-events: none; transition: opacity .24s ease, transform .24s ease; } .falchetto-secret.is-visible { opacity: 1; transform: translate(-50%, 0); } .falchetto-secret strong { display: block; margin-bottom: 6px; color: #fff; font-size: 1rem; } .falchetto-secret span { display: block; color: rgba(255, 255, 255, .86); font-size: .9rem; line-height: 1.45; } .falchetto-flight { position: fixed; left: -80px; top: 18vh; z-index: 219; color: #009fe3; font-size: 3rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(7, 27, 58, .28)); animation: falchetto-flight 2.8s ease-in-out forwards; } .falchetto-runner { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 18px; background: rgba(3, 15, 34, .78); backdrop-filter: blur(8px); } .falchetto-runner-card { position: relative; width: min(760px, 100%); overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; background: linear-gradient(180deg, rgba(121, 192, 244, .96) 0 47%, rgba(233, 247, 255, .98) 47% 100%); box-shadow: 0 30px 90px rgba(0, 0, 0, .42); color: var(--night); } .falchetto-runner-card::before { content: ""; position: absolute; inset: 22px 24px auto auto; width: 92px; height: 92px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: -160px 28px 0 -24px rgba(255, 255, 255, .52), -90px 8px 0 -30px rgba(255, 255, 255, .5); } .falchetto-runner-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(7, 27, 58, .86); color: #fff; font-size: 1.5rem; cursor: pointer; } .falchetto-runner-head, .falchetto-runner-score, .falchetto-runner-card > p { position: relative; z-index: 2; } .falchetto-runner-head { display: grid; gap: 2px; padding: 24px 72px 8px 24px; } .falchetto-runner-head strong { font-size: clamp(1.45rem, 4vw, 2.7rem); line-height: 1; color: var(--night); } .falchetto-runner-head span, .falchetto-runner-card > p { color: rgba(7, 27, 58, .72); font-weight: 800; } .falchetto-runner-score { margin: 0 24px 10px; font-weight: 950; } .falchetto-runner-track { position: relative; height: min(330px, 46vh); margin: 0 20px; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, transparent 0 64%, rgba(6, 111, 159, .18) 64% 100%), repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 255, 255, .32) 80px 82px); touch-action: manipulation; cursor: pointer; } .falchetto-runner-ground { position: absolute; left: 0; right: 0; bottom: 46px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--night), var(--primary), #f2c94c); } .falchetto-runner-player { position: absolute; left: clamp(36px, 9vw, 78px); bottom: 51px; width: clamp(58px, 12vw, 88px); height: clamp(58px, 12vw, 88px); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: 0 16px 34px rgba(7, 27, 58, .22); display: grid; place-items: center; will-change: transform; } .falchetto-runner-player img { width: 88%; height: 88%; object-fit: contain; } .falchetto-runner-obstacle { position: absolute; left: 0; bottom: 51px; width: clamp(28px, 6vw, 44px); height: clamp(46px, 9vw, 72px); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #071b3a, #075f91); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18); will-change: transform; } .falchetto-runner.is-game-over .falchetto-runner-track { box-shadow: inset 0 0 0 3px rgba(231, 76, 60, .45); } .falchetto-runner-card > p { margin: 10px 24px 22px; font-size: .92rem; } .falchetto-runner-save { display: none; align-items: center; gap: 8px; margin: 0 24px 22px; flex-wrap: wrap; } .falchetto-runner.is-game-over .falchetto-runner-save { display: flex; } .falchetto-runner-save input { flex: 1 1 160px; min-width: 0; padding: 9px 12px; border-radius: 18px; border: 1px solid rgba(10, 30, 60, .25); background: rgba(255, 255, 255, .75); color: var(--night); font-size: .88rem; } .falchetto-runner-save input::placeholder { color: rgba(10, 30, 60, .5); } .falchetto-runner-save button { flex: 0 0 auto; padding: 9px 16px; border-radius: 18px; border: none; background: var(--primary, #009fe3); color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .falchetto-runner-save button:hover { transform: translateY(-1px); } .falchetto-runner-save.is-saved button { opacity: .6; cursor: default; } .falchetto-runner-save-status { flex: 1 0 100%; font-size: .78rem; color: var(--night); opacity: .78; } .photo-tile { overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: 0 18px 44px rgba(7, 27, 58, .1); } .photo-tile img { width: 100%; aspect-ratio: 1 / .78; display: block; object-fit: cover; } .photo-tile figcaption { display: grid; gap: 4px; padding: 12px; color: var(--night); } .photo-tile figcaption strong { font-size: .9rem; } .photo-tile figcaption span { color: var(--muted); font-size: .84rem; line-height: 1.35; } .social-wall-section { padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 56px); background: var(--soft); } .social-wall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .social-post-card, .social-wall-empty { overflow: hidden; border: 1px solid var(--modern-line); border-radius: 18px; background: var(--paper); box-shadow: 0 18px 44px rgba(7, 27, 58, .08); } .social-post-card img, .social-post-card video { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #030f22; } .social-post-card > div, .social-wall-empty { display: grid; gap: 8px; padding: 16px; } .social-post-card span, .social-wall-empty strong { color: var(--primary); font-size: .78rem; font-weight: 950; text-transform: uppercase; } .social-post-card p, .social-wall-empty span { margin: 0; color: var(--muted); line-height: 1.45; } @keyframes falchetto-flight { 0% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.9); opacity: 0; } 14%, 78% { opacity: 1; } 100% { transform: translate3d(calc(100vw + 160px), -52px, 0) rotate(8deg) scale(1.15); opacity: 0; } } @media (max-width: 720px) { .site-header { min-height: 72px; gap: 8px; } .main-nav { left: 8px; right: 8px; top: 76px; max-height: calc(100vh - 88px); } .hero { min-height: 760px; grid-template-columns: 1fr; padding-bottom: 176px; } .hero-board { display: none; } .hero h1 { /* Fluida: si restringe quanto basta anche sui telefoni piu' piccoli (es. 320px di larghezza) per restare sempre su una sola riga. */ font-size: clamp(1.5rem, 8.2vw, 3.3rem); } .service-strip { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; } .service-strip a { min-height: 150px; scroll-snap-align: none; } .standings-table-wrap { overflow-x: visible; } .standings-table { min-width: 0; table-layout: fixed; font-size: .78rem; } .standings-table th, .standings-table td { padding: 10px 5px; } .standings-table th:first-child, .standings-table td:first-child { width: 34px; } .standings-table th:nth-child(2), .standings-table td:nth-child(2) { width: 38%; } .falchetto-secret { bottom: 14px; padding: 16px; } .falchetto-flight { font-size: 2.35rem; top: 14vh; } .social-wall-grid { grid-template-columns: 1fr; } .home-dashboard, .official-hub, .history-section, .youth-section, .calendar-section, .standings-section, .ticketing-section, .contacts-section, .privacy-section, .single-article-section, .falchetto-section, .squad-section, .access-section, .documents-section, .sponsors-section, .ecommerce-section, .sources { padding-top: 60px; padding-bottom: 60px; } .section-head h2, .section-mini-head h2 { font-size: 2.25rem; line-height: 1; } .privacy-grid { grid-template-columns: 1fr; } .privacy-policy summary { padding-left: 16px; } .privacy-policy details p, .legal-review-note { padding-left: 16px; padding-right: 16px; } .site-footer { grid-template-columns: 1fr; gap: 22px; padding: 34px 16px; } .footer-legal { justify-content: flex-start; } .footer-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-socials a { min-height: 82px; flex-direction: column; gap: 6px; } .cookie-banner { left: 8px; right: 8px; bottom: 8px; max-height: calc(100vh - 16px); overflow-y: auto; } .access-layout, .payment-methods { grid-template-columns: 1fr; } .order-archive-head { align-items: stretch; flex-direction: column; } } /* Menu compatto: pannello indipendente dalla griglia dell'header. */ @media (max-width: 1450px) { body.menu-open { overflow: hidden; } body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(3, 15, 34, .58); backdrop-filter: blur(3px); } .main-nav, .site-header.is-scrolled .main-nav { position: fixed; inset: 88px clamp(12px, 3vw, 42px) auto; z-index: 80; width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - 104px); grid-area: unset; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0; overflow-x: hidden; overflow-y: auto; padding: 10px; border: 1px solid var(--modern-line); border-radius: 18px; background: var(--paper); box-shadow: 0 28px 80px rgba(3, 15, 34, .28); } body.menu-open .main-nav { display: grid; } .main-nav a, .site-header.is-scrolled .main-nav a { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--modern-line); border-bottom: 1px solid var(--modern-line); color: var(--night); line-height: 1.2; } .main-nav a::after { display: none; } } @media (max-width: 900px) { .main-nav, .site-header.is-scrolled .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .main-nav, .site-header.is-scrolled .main-nav { inset: 76px 8px auto; max-height: calc(100dvh - 84px); grid-template-columns: minmax(0, 1fr); padding: 8px; } .main-nav a, .site-header.is-scrolled .main-nav a { border-right: 0; } } /* ------------------------------------------------------------------ */ /* Correzione menu su schermi larghi (laptop/desktop sopra i 1450px). Sopra quella soglia nessuna regola del sito definiva davvero come comportarsi: la larghezza/il "vai a capo" del menu arrivava dal vecchio file styles.css (ancora caricato insieme a questo per le sezioni che lo usano), che lo rende un elenco che va a capo su piu' righe. Con le voci di menu attuali (21 link) questo faceva sovrapporre il menu al contenuto sottostante su schermi da laptop/desktop, come segnalato via screenshot. Qui si riusa lo stesso identico menu "a tendina" gia' collaudato sotto i 1450px anche sopra quella soglia, cosi' il comportamento e' affidabile e uguale a qualsiasi larghezza di schermo. */ @media (min-width: 1451px) { .site-header { grid-template-columns: auto 44px minmax(0, 1fr) auto auto auto; grid-template-areas: "brand toggle nav account ticket admin"; column-gap: 16px; } .mobile-menu-toggle { display: grid; } body.menu-open { overflow: hidden; } body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(3, 15, 34, .58); backdrop-filter: blur(3px); } /* "display: none" resta su un selettore semplice (bassa specificita') cosi' la regola "body.menu-open .main-nav { display: grid }" qui sotto riesce sempre a vincere, anche quando l'header ha gia' la classe "is-scrolled" per lo scroll della pagina. Tenerlo insieme al selettore ".site-header.is-scrolled .main-nav" (piu' specifico) impedirebbe al menu di riaprirsi mentre si e' scorso il sito. */ .main-nav { display: none; } .main-nav, .site-header.is-scrolled .main-nav { position: fixed; inset: 88px clamp(12px, 3vw, 42px) auto; z-index: 80; width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - 104px); grid-area: unset; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 0; overflow-x: hidden; overflow-y: auto; padding: 10px; border: 1px solid var(--modern-line); border-radius: 18px; background: var(--paper); box-shadow: 0 28px 80px rgba(3, 15, 34, .28); } body.menu-open .main-nav { display: grid; } .main-nav a, .site-header.is-scrolled .main-nav a { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--modern-line); border-bottom: 1px solid var(--modern-line); color: var(--night); line-height: 1.2; } .main-nav a::after { display: none; } } /* ------------------------------------------------------------------ */ /* Sezione pubblica "Documenti societari" (statuto, bilanci, policy...), ispirata all'archivio documenti di speziacalcio.com. Riusa lo stesso linguaggio visivo della sezione "Documenti" (Segreteria) gia' presente nel sito: stesse variabili colore, stesso stile di card/hover, stessa etichetta ".eyebrow" per la categoria, cosi' le due sezioni sembrano costruite insieme invece che con due stili diversi. */ /* Stessa impostazione "scuro fuori, bianco tondo dentro" della sezione Falchetto IA (.falchetto-section / .chat-panel): lo sfondo della sezione e' navy scuro cosi' che l'etichetta "Trasparenza" in alto risulti bianca e ben leggibile, mentre i contenuti veri e propri (form di caricamento + elenco documenti) vivono in un pannello chiaro con angoli arrotondati. */ .corporate-documents-section { background: linear-gradient(135deg, var(--night), #0a315f), repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 24px); color: var(--paper); } .corporate-documents-section .eyebrow { color: var(--paper); } .corporate-documents-section h2 { color: var(--paper); } .corporate-documents-section .section-intro { color: rgba(255, 255, 255, .78); } .corporate-documents-panel { display: grid; gap: 16px; max-width: 980px; padding: clamp(16px, 3vw, 26px); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--modern-radius); background: linear-gradient(180deg, var(--paper), var(--soft)); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); } .corporate-document-upload-zone { display: grid; gap: 10px; padding: 20px; border: 1px dashed var(--primary); border-radius: var(--modern-radius); background: linear-gradient(135deg, var(--paper), rgba(0, 159, 227, .12)); } .corporate-document-upload-zone strong { color: var(--night); font-size: 1.08rem; } .corporate-document-upload-zone > p { margin: 0; color: var(--muted); line-height: 1.4; } .corporate-document-form { display: flex; flex-wrap: wrap; gap: 10px; } .corporate-document-form input, .corporate-document-form select { flex: 1 1 160px; min-height: 44px; padding: 0 16px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); font: inherit; color: var(--night); } .corporate-document-form input#corporateDocumentTitle { flex-basis: 100%; } .corporate-document-form .upload-button { flex: 1 1 160px; } .corporate-document-upload-message { min-height: 22px; color: var(--primary) !important; font-weight: 850; } .corporate-document-list { display: grid; gap: 10px; } .corporate-document-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--modern-radius); background: var(--soft); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .corporate-document-row:hover { transform: translateY(-2px); border-color: rgba(0, 159, 227, .42); box-shadow: 0 14px 28px rgba(7, 27, 58, .08); } .corporate-document-meta { display: grid; gap: 2px; } .corporate-document-category { justify-self: start; margin: 0 0 2px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 159, 227, .12); color: var(--primary); font-weight: 950; text-transform: uppercase; font-size: .72rem; letter-spacing: .02em; } .corporate-document-meta strong { color: var(--night); } .corporate-document-date { margin-top: 2px; color: var(--muted); font-size: .84rem; } @media (max-width: 720px) { .corporate-document-row { grid-template-columns: 1fr; justify-items: start; } } /* Sezione pubblica "Accrediti" (stampa, societa', FIGC/CONI/AIA, tifosi con disabilita'), ispirata alla pagina omonima di speziacalcio.com. Le card riusano la stessa struttura visiva di ".ticket-card" (colori, bordi, ombra) gia' estesa sopra: qui aggiungiamo solo il layout verticale, dato che span/strong sono elementi inline di default e vanno impilati a mano. */ .accreditation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .accreditation-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .accreditation-card span, .accreditation-card strong { display: block; } .accreditation-card strong { font-size: 1.1rem; } .accreditation-card p { margin: 0; flex-grow: 1; } .accreditation-card .document-actions { margin-top: 4px; } @media (max-width: 980px) { .accreditation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .accreditation-grid { grid-template-columns: 1fr; } } /* Sezione pubblica "Stadio": foto a sinistra, dati rapidi e indicazioni a destra, con lo stesso linguaggio visivo (bordi, radius, ombra) del resto del sito. I campi indirizzo/capienza/superficie e "come arrivare" sono opzionali (nascosti via JS con "hidden" se non compilati dalla Redazione), cosi' la sezione resta pulita finche' la societa' non inserisce i dati reali dello stadio. */ .stadium-layout { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; } .stadium-photo { border-radius: var(--modern-radius); overflow: hidden; box-shadow: var(--modern-shadow); } .stadium-photo img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .stadium-info { display: grid; gap: 16px; } .stadium-info h3 { margin: 0; color: var(--night); font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .stadium-facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .stadium-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--paper); } .stadium-facts span { color: var(--muted); font-weight: 850; } .stadium-facts strong { color: var(--night); text-align: right; } .stadium-directions { padding: 16px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); background: var(--soft); } .stadium-directions strong { display: block; margin-bottom: 6px; color: var(--night); } .stadium-directions p { margin: 0; color: var(--muted); line-height: 1.55; } .stadium-map-link { width: fit-content; } .match-list-empty { margin: 0; padding: 20px; border: 1px dashed var(--modern-line); border-radius: var(--modern-radius); color: var(--muted); text-align: center; } .stadium-map { margin-top: 24px; border: 1px solid var(--modern-line); border-radius: var(--modern-radius); overflow: hidden; background: var(--soft); box-shadow: var(--modern-shadow); } .stadium-map iframe { display: block; width: 100%; height: clamp(260px, 36vw, 420px); border: 0; } @media (max-width: 860px) { .stadium-layout { grid-template-columns: 1fr; } .stadium-photo img { min-height: 220px; } }