/* PadelCity — il foglio di stile unico del sito. Lo possiede l'agente grafica; le altre pagine usano classi e token descritti in SITO/GUIDA-STILE.md e nei loro CSS mettono solo la disposizione, sempre con var(--...). Nessun colore fuori da :root e dai blocchi dei temi. Indice 0. caratteri (in casa, /fonts/) 1. token — tema «classico» (i colori della prima bozza, conservati) 2. token — tema «muro» (il grigio dei blocchi di cemento del club) 3. base 4. pezzi comuni: occhiello, titoli, paragrafi, pulsanti, pillole 5. testata, menu, foglio del menu, barra del telefono 6. la home 7. i componenti per le pagine (7b: la revisione del 30/09) 8. il piede 9. telefono (< 768px, sotto body.m-on; 9b: la revisione) 10. computer (>= 768px; 10b: la revisione) 11. riduci movimento */ /* ---------- 0. caratteri ---------- */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 1. token: tema «classico» ---------- È anche il tema di riserva: senza data-tema su vale questo. */ :root, :root[data-tema="classico"] { /* marchio: uguali nei due temi */ --arancio: #ff5a00; --arancio-chiaro: #ff7a2e; --blu: #157dff; --ciano: #1cc8ff; --palla: #d6f03a; --palla-luce: #f6ffab; --palla-scura: #9cb618; --crema: #f4f1ea; --oro: #ffc23d; --argento: #cfd8e3; --bronzo: #e08a4f; /* il rosso di chi cancella: scuro, ben lontano dall'arancione del primario */ --pericolo: #c62f2a; --pericolo-scuro: #a92621; --pericolo-bordo: #ff6b57; --su-pericolo: #fff; /* fondi */ --fondo: #020711; --fondo-pagina: none; --fondo-fascia: #071426; --fondo-scheda: linear-gradient(160deg, #0b1a2e, #071426); --fondo-scheda-piatto: #0b1a2e; --fondo-piede: #01040a; --fondo-foglio: #071426; --fondo-testata: rgba(2, 7, 17, .8); --fondo-barra: rgba(8, 19, 34, .92); --fondo-pastiglia: rgba(2, 7, 17, .62); --fondo-campo: rgba(255, 255, 255, .06); --fondo-campo-fuoco: rgba(255, 255, 255, .1); /* linee e vetri */ --bordo: rgba(255, 255, 255, .12); --bordo-forte: rgba(255, 255, 255, .3); --riga: rgba(255, 255, 255, .06); --vetro-lieve: rgba(255, 255, 255, .03); --vetro: rgba(255, 255, 255, .05); --vetro-medio: rgba(255, 255, 255, .07); --vetro-forte: rgba(255, 255, 255, .12); /* testi */ --testo: #f7f9fc; --chiaro: #cfd8e3; --spento: #8c9bb0; --arancio-testo: #ff5a00; /* arancione per il testo piccolo */ --arancio-titolo: #ff5a00; /* arancione per i titoli e i numeri grandi */ --arancio-eroe: #ff5a00; --su-arancio: #fff; /* testo sopra un pieno arancione */ --su-blu: #06101c; --nastro-testo: #0a0a0a; --eroe-sotto: #dbe3ee; --eroe-occhiello: #ffb489; --ok: #3ddc84; --ok-testo: #b6f0cc; --errore: #ff6b57; --errore-testo: #ffc2b8; /* veli, aloni, contorni */ --velo-eroe: linear-gradient(180deg, rgba(2, 7, 17, .6) 0%, rgba(2, 7, 17, .05) 28%, rgba(2, 7, 17, .45) 60%, #020711 100%), linear-gradient(90deg, rgba(2, 7, 17, .8) 0%, rgba(2, 7, 17, 0) 62%); --velo-eroe-telefono: linear-gradient(180deg, rgba(2, 7, 17, .55) 0%, rgba(2, 7, 17, .1) 25%, rgba(2, 7, 17, .6) 55%, #020711 88%); --velo-tribuna: linear-gradient(180deg, #020711 0%, rgba(2, 7, 17, .1) 26%, rgba(2, 7, 17, .6) 56%, #020711 92%); --velo-foto: linear-gradient(180deg, transparent 50%, rgba(2, 7, 17, .55)); --velo-foglio: rgba(1, 4, 10, .6); --maschera-eroe: none; --maschera-tribuna: none; --alone-arancio: radial-gradient(circle, rgba(255, 90, 0, .22), transparent 70%); --alone-chiusura: radial-gradient(closest-side, rgba(255, 90, 0, .32), transparent); --alone-academy: radial-gradient(120% 90% at 85% 10%, rgba(21, 125, 255, .22), transparent 60%); --contorno-gigante: rgba(255, 255, 255, .14); --contorno-numero: rgba(255, 255, 255, .1); --contorno-partner: rgba(255, 255, 255, .55); --stelle-vuote: rgba(255, 255, 255, .3); --anello-bordo: rgba(255, 255, 255, .6); --anello-sopra: rgba(255, 90, 0, .16); --pallina-segni: rgba(255, 255, 255, .9); --pallina-ombra: rgba(0, 0, 0, .55); --pallina-rilievo: inset -3px -4px 8px rgba(0, 0, 0, .28), 0 0 24px rgba(214, 240, 58, .35); /* ombre */ --ombra-nastro: 0 24px 60px rgba(0, 0, 0, .45); --ombra-barra: 0 -8px 30px rgba(0, 0, 0, .45); --ombra-foglio: 0 -12px 40px rgba(0, 0, 0, .5); --ombra-scheda: 0 18px 40px rgba(0, 0, 0, .25); --ombra-simbolo: 0 14px 22px rgba(0, 0, 0, .28); /* gli eventi (fondo delle carte) */ --evento-rodeo: linear-gradient(150deg, #ff5a00, #a8190b); --evento-serata: linear-gradient(165deg, #0b2a55, #157dff 55%, #74acdf); --evento-lunch: linear-gradient(150deg, #d6f03a, #58b83a); --evento-spritz: linear-gradient(150deg, #ff9a3d, #ff3d6e); --evento-testo: #fff; --evento-lunch-testo: #06210a; /* caratteri */ --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif; --corpo: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; /* tipografia fluida */ --t-eroe: clamp(4.4rem, 13.5vw, 13rem); --t-pagina: clamp(3rem, 9vw, 7.5rem); --t-sezione: clamp(2.8rem, 6.4vw, 6rem); --t-titoletto: clamp(1.6rem, 2.4vw, 2rem); --t-grande: clamp(1.05rem, 1.4vw, 1.2rem); --t-testo: 1rem; --t-piccolo: .9rem; --t-minimo: .78rem; /* spazi: 4 / 8 / 12 / 16 / 24 / 32 (+ 48 / 64) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --raggio: 22px; --raggio-m: 16px; --raggio-s: 12px; --tap: 44px; --margine: clamp(16px, 4vw, 56px); --largo: 1320px; --testata: 72px; --barra-h: 64px; --molla: cubic-bezier(.2, .8, .2, 1); /* bordi che sfumano (maschera: conta solo l'opacità) */ --sfuma-lati: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* ---------- 2. token: tema «muro» ---------- Grigi campionati sulle foto delle pareti (brochure 2026/27, sette zone di blocchi): ombra #3b3e3f, medio #484c4d, luce #535658. Il fondo della pagina è un'onda lenta fra questi tre, con le fughe dei blocchi appena accennate. */ :root[data-tema="muro"] { --muro-luce: #535658; --muro: #484c4d; --muro-ombra: #3b3e3f; --muro-fuga: #2d3031; --fondo: #484c4d; --fondo-pagina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='120'%3E%3Cpath d='M0 .75H150M0 60.75H150M75 0V60M0 60V120M150 60V120' fill='none' stroke='%23000' stroke-opacity='.11' stroke-width='1.5'/%3E%3C/svg%3E"), repeating-linear-gradient(180deg, #3b3e3f 0, #484c4d 420px, #535658 820px, #484c4d 1220px, #3b3e3f 1640px); --fondo-fascia: transparent; --fondo-scheda: linear-gradient(160deg, #56595b, #45494a); --fondo-scheda-piatto: #4c5052; --fondo-piede: #2d3031; --fondo-foglio: #3b3e3f; --fondo-testata: rgba(59, 62, 63, .88); --fondo-barra: rgba(45, 48, 49, .94); --fondo-pastiglia: rgba(45, 48, 49, .7); --fondo-campo: rgba(0, 0, 0, .18); --fondo-campo-fuoco: rgba(0, 0, 0, .26); --bordo: rgba(244, 241, 234, .16); --bordo-forte: rgba(244, 241, 234, .34); --riga: rgba(244, 241, 234, .09); --vetro-lieve: rgba(244, 241, 234, .04); --vetro: rgba(244, 241, 234, .06); --vetro-medio: rgba(244, 241, 234, .09); --vetro-forte: rgba(244, 241, 234, .14); --testo: #f4f1ea; --chiaro: #e4e1da; --spento: #d2cfc8; --arancio-testo: #ffc59a; --arancio-titolo: #ffa266; --arancio-eroe: #ff5a00; --su-arancio: #1c1206; --su-blu: #06101c; --nastro-testo: #1c1206; --eroe-sotto: #ece9e2; --eroe-occhiello: #ffc59a; --ok: #52d88a; --ok-testo: #bdf2d2; --errore: #ff6b57; --errore-testo: #ffc2b8; --velo-eroe: linear-gradient(180deg, rgba(45, 48, 49, .62) 0%, rgba(45, 48, 49, .08) 28%, rgba(45, 48, 49, .5) 62%, rgba(45, 48, 49, .78) 100%), linear-gradient(90deg, rgba(45, 48, 49, .82) 0%, rgba(45, 48, 49, 0) 64%); --velo-eroe-telefono: linear-gradient(180deg, rgba(45, 48, 49, .58) 0%, rgba(45, 48, 49, .12) 25%, rgba(45, 48, 49, .62) 55%, rgba(45, 48, 49, .86) 90%); --velo-tribuna: linear-gradient(180deg, rgba(45, 48, 49, .2) 0%, rgba(45, 48, 49, .1) 30%, rgba(45, 48, 49, .62) 60%, rgba(45, 48, 49, .8) 100%); --velo-foto: linear-gradient(180deg, transparent 50%, rgba(45, 48, 49, .5)); --velo-foglio: rgba(30, 32, 33, .6); /* la foto sfuma nel muro invece di finire in un colore: niente cuciture */ --maschera-eroe: linear-gradient(180deg, #000 72%, transparent 100%); --maschera-tribuna: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%); --alone-arancio: radial-gradient(circle, rgba(255, 90, 0, .26), transparent 70%); --alone-chiusura: radial-gradient(closest-side, rgba(255, 90, 0, .3), transparent); --alone-academy: radial-gradient(120% 90% at 85% 10%, rgba(21, 125, 255, .26), transparent 60%); --contorno-gigante: rgba(244, 241, 234, .16); --contorno-numero: rgba(244, 241, 234, .12); --contorno-partner: rgba(244, 241, 234, .6); --stelle-vuote: rgba(244, 241, 234, .34); --anello-bordo: rgba(244, 241, 234, .7); --anello-sopra: rgba(255, 90, 0, .2); --ombra-nastro: 0 22px 50px rgba(20, 22, 23, .45); --ombra-barra: 0 -8px 30px rgba(20, 22, 23, .4); --ombra-foglio: 0 -12px 40px rgba(20, 22, 23, .45); --ombra-scheda: 0 18px 40px rgba(20, 22, 23, .28); --ombra-simbolo: 0 14px 22px rgba(20, 22, 23, .35); /* le carte degli eventi diventano blocchi di cemento con la luce del loro colore */ --evento-rodeo: radial-gradient(90% 60% at 80% 0%, rgba(255, 90, 0, .55), transparent 70%), linear-gradient(160deg, #56595b, #3b3e3f); --evento-serata: radial-gradient(90% 60% at 80% 0%, rgba(21, 125, 255, .6), transparent 70%), linear-gradient(160deg, #56595b, #3b3e3f); --evento-lunch: radial-gradient(90% 60% at 80% 0%, rgba(214, 240, 58, .4), transparent 70%), linear-gradient(160deg, #56595b, #3b3e3f); --evento-spritz: radial-gradient(90% 60% at 80% 0%, rgba(255, 122, 46, .5), transparent 70%), linear-gradient(160deg, #56595b, #3b3e3f); --evento-testo: #f4f1ea; --evento-lunch-testo: #f4f1ea; } /* ---------- 3. base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--fondo); } body { margin: 0; background-color: var(--fondo); background-image: var(--fondo-pagina); color: var(--testo); font: 400 var(--t-testo)/1.55 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* collegamenti dentro una frase: l'eccezione «in linea» di WCAG 2.5.8. Sempre sottolineati; l'imbottitura verticale allarga l'area del tocco e non sposta le righe (su un elemento in linea non cambia l'interlinea). */ :where(p, span, dd, td, figcaption, label, .testo-lungo li, .scheda__testo, .domanda__risposta) a:not([class]) { color: var(--testo); text-decoration: underline; text-decoration-color: var(--arancio-testo); text-decoration-thickness: 1px; text-underline-offset: 3px; padding-block: .25em; } :where(p, span, dd, td, figcaption, label, .testo-lungo li, .scheda__testo, .domanda__risposta) a:not([class]):hover { color: var(--arancio-testo); } .icone { position: absolute; width: 0; height: 0; overflow: hidden; } svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .solo-lettori { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-stopped { overflow: clip; } /* prima dell'ingresso animato il titolo della home resta nascosto; se lo script non parte, la classe .js cade da sola dopo 3 secondi */ .js .eroe__testo { visibility: hidden; } .js .eroe__campo path { stroke-dashoffset: 1; } [tabindex="-1"]:focus { outline: none; } :focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; } /* ---------- 4. pezzi comuni ---------- */ .salta { position: absolute; left: 12px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap); background: var(--arancio); color: var(--su-arancio); padding: 0 16px; border-radius: 10px; text-decoration: none; font-weight: 600; } .salta:focus { top: 12px; } .occhiello { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 18px; font: 500 .8rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--arancio-testo); } .occhiello::before { content: ""; width: 28px; height: 1px; background: currentColor; } /* R5: fra due sezioni 160–180 px sul computer (prima 250–277) */ .sezione { max-width: var(--largo); margin: 0 auto; padding: clamp(64px, 9vh, 104px) var(--margine); } .sezione--stretta { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); } .sezione__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); } .sezione__testa .titolo-sezione { margin-bottom: 0; } /* R6: titolo a sinistra, paragrafo d'apertura a destra (sul telefono va a capo da solo) */ .sezione__testa > .paragrafo { max-width: 46ch; margin-bottom: 0; } .titolo-sezione { margin: 0 0 var(--sp-5); font: 400 var(--t-sezione)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; } .titoletto { margin: 0 0 var(--sp-2); font: 400 var(--t-titoletto)/1 var(--display); text-transform: uppercase; } .paragrafo { margin: 0 0 28px; font-size: var(--t-grande); color: var(--chiaro); max-width: 52ch; } .paragrafo b, .paragrafo strong { color: var(--testo); } /* 32em: circa 70 caratteri per riga a qualunque corpo (68ch in Geist ne dava 105) */ .testo-lungo { max-width: 32em; color: var(--chiaro); } .testo-lungo h2 { margin: var(--sp-7) 0 var(--sp-3); font: 400 var(--t-titoletto)/1.05 var(--display); text-transform: uppercase; color: var(--testo); } .testo-lungo h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: 1.1rem; color: var(--testo); } .testo-lungo li + li { margin-top: var(--sp-2); } /* pulsanti: primario (--pieno), secondario (base), collegamento */ .bottone { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 1.4em; border: 1px solid var(--bordo); border-radius: 999px; background: var(--vetro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--testo); text-decoration: none; font: 600 1rem/1 var(--corpo); white-space: nowrap; transition: background .25s, border-color .25s, color .25s; cursor: pointer; } .bottone:hover { background: var(--vetro-forte); border-color: var(--bordo-forte); } .bottone--pieno { background: var(--arancio); border-color: var(--arancio); color: var(--su-arancio); } .bottone--pieno:hover { background: var(--arancio-chiaro); border-color: var(--arancio-chiaro); } .bottone--grande { min-height: 60px; padding: 0 1.8em; font-size: 1.125rem; } .bottone--enorme { min-height: 72px; padding: 0 2.2em; font-size: 1.25rem; } .bottone--collegamento { min-height: var(--tap); padding: 0 2px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--testo); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--arancio); } .bottone--collegamento:hover { background: none; color: var(--arancio-testo); } .bottone--collegamento svg { transition: transform .3s var(--molla); } .bottone--collegamento:hover svg { transform: translateX(4px); } .bottone[disabled], .bottone[aria-busy="true"] { opacity: .6; cursor: progress; } /* distruttivo: rosso, con l'icona, sempre l'ultimo della fila e spinto in fondo (margine automatico); il fuoco non ci arriva da solo: chi apre la domanda lo mette sul pulsante che lascia com'è */ .bottone--distruttivo { margin-inline-start: auto; background: var(--pericolo); border-color: var(--pericolo-bordo); color: var(--su-pericolo); } .bottone--distruttivo:hover { background: var(--pericolo-scuro); border-color: var(--pericolo-bordo); } .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } /* pillole: stato, categoria, scelta accesa */ .pillola { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--vetro); font: 500 var(--t-minimo)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--chiaro); white-space: nowrap; } .pillola--arancio { background: var(--arancio); border-color: var(--arancio); color: var(--su-arancio); } .pillola--blu { background: var(--blu); border-color: var(--blu); color: var(--su-blu); } .pillola--ok { border-color: var(--ok); color: var(--ok-testo); } .pillole { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; } /* ---------- barra di avanzamento e anello del cursore ---------- */ .avanzamento { position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; pointer-events: none; } .avanzamento span { display: block; height: 100%; background: linear-gradient(90deg, var(--arancio), var(--ciano)); transform: scaleX(0); transform-origin: left; } .anello { position: fixed; left: 0; top: 0; z-index: 90; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--anello-bordo); border-radius: 50%; pointer-events: none; opacity: 0; transition: width .3s var(--molla), height .3s var(--molla), margin .3s var(--molla), background .3s, border-color .3s, opacity .3s; } .cursore-attivo .anello { opacity: 1; } .anello.sopra { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--anello-sopra); border-color: var(--arancio); } /* ---------- 5. testata e menu ---------- */ .testata { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testata); display: flex; align-items: center; gap: 20px; padding: 0 var(--margine); border-bottom: 1px solid transparent; transition: transform .5s var(--molla), background .3s, border-color .3s; } .testata--piena { background: var(--fondo-testata); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--bordo); } .testata--nascosta { transform: translateY(-100%); } .marchio { display: flex; align-items: center; min-height: var(--tap); flex-shrink: 0; } .marchio img { height: 36px; width: auto; } .menu { display: none; gap: 2px; margin-left: auto; } .menu a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border-radius: 999px; font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap; opacity: .86; transition: opacity .2s, background .2s; } .menu a:hover { opacity: 1; background: var(--vetro-medio); } .menu a svg { width: .85em; height: .85em; opacity: .7; } .menu a[aria-current] { opacity: 1; color: var(--arancio-testo); } .menu a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--arancio); } .testata__prenota { display: none; min-height: var(--tap); flex-shrink: 0; } .apri-menu { display: none; align-items: center; gap: 8px; margin-left: auto; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--vetro); color: var(--testo); font: 600 .95rem var(--corpo); cursor: pointer; } /* il foglio del menu: dal basso sul telefono, di lato sul computer */ .m-foglio-sfondo { position: fixed; inset: 0; z-index: 79; background: var(--velo-foglio); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .m-foglio-sfondo.aperto { opacity: 1; pointer-events: auto; } .m-foglio--sempre { position: fixed; z-index: 80; display: flex; flex-direction: column; background: var(--fondo-foglio); color: var(--testo); box-shadow: var(--ombra-foglio); visibility: hidden; transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s; } .m-foglio--sempre.aperto { visibility: visible; transform: none; transition: transform .3s cubic-bezier(.32, .72, 0, 1); } .m-foglio-presa { width: 40px; height: 4px; margin: var(--sp-3) auto var(--sp-1); border-radius: 2px; background: var(--bordo-forte); flex: 0 0 auto; } .m-foglio-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3) var(--sp-5); flex: 0 0 auto; } .m-foglio-testa h2 { margin: 0; font: 400 1.6rem/1 var(--display); text-transform: uppercase; } .m-foglio-chiudi { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 1px solid var(--bordo); border-radius: 50%; background: var(--vetro); color: var(--testo); cursor: pointer; } .m-foglio-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-5) var(--sp-5); } .m-foglio-piede { flex: 0 0 auto; padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordo); } .m-foglio-piede .bottone { width: 100%; } .foglio-rapide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0 0 var(--sp-4); } .foglio-rapide .bottone { width: 100%; padding: 0 12px; } .foglio-voci { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); } .foglio-voci a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; border-bottom: 1px solid var(--bordo); font: 400 1.7rem/1 var(--display); text-transform: uppercase; text-decoration: none; } .foglio-voci a svg { width: 20px; height: 20px; color: var(--spento); } .foglio-voci a[aria-current] { color: var(--arancio-testo); } .foglio-voci a:hover { color: var(--arancio-testo); } /* la barra del telefono: esiste solo sotto i 768px (vedi la sezione 9) */ .m-barra { display: none; } /* ---------- 6. la home ---------- */ /* eroe */ .eroe { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--testata) + 40px) var(--margine) clamp(32px, 7vh, 80px); } .eroe__foto, .eroe__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; } .eroe__foto { -webkit-mask-image: var(--maschera-eroe); mask-image: var(--maschera-eroe); } .eroe__foto img { object-fit: cover; object-position: 50% 40%; } .eroe__velo { position: absolute; inset: 0; z-index: -2; background: var(--velo-eroe); } .eroe__campo { position: absolute; z-index: -1; left: 50%; bottom: -10%; width: min(1500px, 150vw); height: auto; transform: translateX(-50%) perspective(1100px) rotateX(66deg); transform-origin: 50% 100%; opacity: .55; mix-blend-mode: screen; pointer-events: none; } .eroe__campo path { fill: none; stroke: var(--arancio); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 0; } /* R4: il testo parte dove partono le sezioni (116 px a 1440), non 56 px più in là */ .eroe__testo { width: 100%; max-width: calc(var(--largo) - 2 * var(--margine)); margin: 0 auto; } .eroe__titolo { margin: 0 0 22px; font: 400 var(--t-eroe)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; } /* seconda riga a gradino: l'accento di LEINÌ cade oltre la fine di PADEL, non sotto la E */ .eroe__titolo em { font-style: normal; color: var(--arancio-eroe); padding-left: .8em; } .eroe__occhiello { width: fit-content; padding: 8px 14px 8px 12px; border-radius: 14px; background: var(--fondo-pastiglia); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--eroe-occhiello); } .eroe__sotto { max-width: 36ch; margin: 0 0 30px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--eroe-sotto); } .eroe__azioni { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* la pallina che rimbalza sul pulsante Prenota: non si ritaglia mai */ .pallina { position: absolute; left: 0; top: 0; width: 34px; height: 34px; pointer-events: none; visibility: hidden; z-index: 2; } .pallina__corpo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--palla-luce) 0, var(--palla) 40%, var(--palla-scura) 100%); box-shadow: var(--pallina-rilievo); } .pallina__corpo svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--pallina-segni); stroke-width: 1.6; } .pallina__ombra { position: absolute; left: 50%; bottom: -10px; width: 30px; height: 8px; margin-left: -15px; border-radius: 50%; background: var(--pallina-ombra); filter: blur(3px); opacity: 0; } /* il nastro dei format: scorre col CSS, anche senza JavaScript. Il binario contiene il gruppo e la sua copia (aria-hidden): a -50% il giro si chiude senza scatti. */ .nastro { position: relative; z-index: 3; width: 104%; margin: -30px -2% 0; padding: 18px 0; overflow: hidden; background: var(--arancio); color: var(--nastro-testo); transform: rotate(-2deg); box-shadow: var(--ombra-nastro); } .nastro__binario { display: flex; width: max-content; animation: nastro-scorre var(--durata, 26s) linear infinite; will-change: transform; } .nastro--destra .nastro__binario { animation-direction: reverse; } .nastro.fermo .nastro__binario { animation-play-state: paused; } @media (hover: hover) { .nastro:hover .nastro__binario { animation-play-state: paused; } } .nastro__gruppo { display: flex; align-items: center; flex-shrink: 0; } .nastro__gruppo > *, .nastro__bis > * { flex-shrink: 0; } /* dentro ogni gruppo la lista c'è due volte (la seconda in .nastro__bis, aria-hidden): il gruppo è sempre più largo dello schermo */ .nastro__bis { display: flex; align-items: center; } .nastro__gruppo > span:not(.nastro__bis), .nastro__bis > span { padding: 0 .45em; font: 400 clamp(2rem, 4.6vw, 3.6rem)/1 var(--display); text-transform: uppercase; white-space: nowrap; } .nastro i { font-style: normal; font-size: clamp(1.2rem, 2.4vw, 2rem); } @keyframes nastro-scorre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .nastro--partner { width: auto; margin: 22px 0 0; transform: none; box-shadow: none; background: transparent; color: var(--testo); border-block: 1px solid var(--bordo); padding: 26px 0; /* R9: le scritte non si mozzano sul margine: sfumano */ -webkit-mask-image: var(--sfuma-lati); mask-image: var(--sfuma-lati); } .nastro--partner span { color: transparent; -webkit-text-stroke: 1px var(--contorno-partner); } .nastro--partner .nastro__bis { -webkit-text-stroke: 0; } .nastro--partner span.pieno { color: var(--testo); -webkit-text-stroke: 0; } .nastro--partner i { color: var(--arancio); } /* tessere dei numeri */ .tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .tessera { position: relative; overflow: hidden; padding: 28px 24px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); } .tessera::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--alone-arancio); pointer-events: none; } .tessera__numero { display: flex; align-items: baseline; margin: 0; font: 400 clamp(3.2rem, 6vw, 5.4rem)/1 var(--display); } .tessera__numero b { font-weight: 400; } .tessera__unita { margin-left: .12em; font-size: .45em; color: var(--arancio-titolo); } .tessera__stella { width: .5em; height: .5em; margin-left: .12em; fill: var(--arancio-titolo); stroke: none; align-self: center; } .tessera__nome { display: block; margin-top: 10px; font-weight: 600; } .tessera__nota { display: block; margin-top: 4px; color: var(--spento); font-size: var(--t-piccolo); } .sezione--tessere { padding-top: clamp(90px, 13vh, 150px); padding-bottom: 20px; } /* il centro */ .centro { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .servizi { list-style: none; counter-reset: s; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--bordo); } .servizi li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--bordo); color: var(--chiaro); font-size: 1.05rem; } .servizi li::before { content: counter(s, decimal-leading-zero); counter-increment: s; font: 500 .78rem var(--mono); color: var(--arancio-testo); } .servizi b { color: var(--testo); } /* due ritratti che si sovrappongono: il rovescio in alto a sinistra, i maestri in basso a destra */ .collage { position: relative; aspect-ratio: 4 / 5; } .collage figure { position: absolute; margin: 0; overflow: hidden; border-radius: var(--raggio); } .collage img { width: 100%; height: 112%; object-fit: cover; } .collage__a { inset: 0 40% 24% 0; } .collage__a img { object-position: 50% 30%; } .collage__b { inset: 22% 0 0 34%; border: 1px solid var(--bordo-forte); box-shadow: var(--ombra-scheda); } .collage__b img { object-position: 50% 0%; } /* academy */ .academy { position: relative; overflow: hidden; background: var(--alone-academy), var(--fondo-fascia); border-block: 1px solid var(--bordo); } .academy__numero { position: absolute; left: -.02em; bottom: -.14em; font: 400 clamp(14rem, 42vw, 36rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--contorno-numero); white-space: nowrap; pointer-events: none; user-select: none; } .academy__dentro { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .percorsi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 32px; } .percorsi:last-child { margin-bottom: 0; } .percorso { padding: 22px; border: 1px solid var(--bordo); border-radius: 18px; background: var(--vetro-lieve); } /* R9: il «N°1» passa dietro le schede, non dentro il loro testo */ .academy .percorso { background: var(--fondo-scheda); } .percorso__num { font: 500 .75rem var(--mono); color: var(--arancio-testo); letter-spacing: .12em; } .percorso h3 { margin: 10px 0 8px; font: 400 1.6rem/1 var(--display); text-transform: uppercase; } .percorso p { margin: 0; color: var(--spento); font-size: .95rem; } .academy__foto { margin: 0; overflow: hidden; border-radius: var(--raggio); aspect-ratio: 3 / 4; } .academy__foto img { width: 100%; height: 115%; object-fit: cover; } /* eventi: le carte coi simboli */ .eventi { position: relative; overflow: hidden; } .eventi__binario { display: flex; align-items: center; gap: 20px; width: max-content; flex-shrink: 0; padding: clamp(80px, 14vh, 140px) var(--margine); /* R4: l'introduzione parte dove partono le sezioni */ padding-left: max(var(--margine), calc((100% - var(--largo)) / 2 + var(--margine))); } /* il contenitore delle sole carte: sul telefono è il carosello, sul computer non esiste */ .eventi__carte { display: contents; } .eventi__intro { width: min(420px, 80vw); flex-shrink: 0; } .evento { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; width: clamp(300px, 28vw, 400px); display: flex; flex-direction: column; padding: 26px; border-radius: 26px; border: 1px solid var(--bordo); color: var(--evento-testo); text-decoration: none; } .evento::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sfondo); transition: transform .8s var(--molla); } .evento:hover::before { transform: scale(1.06); } .evento__num { font: 500 .8rem var(--mono); letter-spacing: .14em; } .evento__simbolo { width: min(220px, 64%); height: auto; aspect-ratio: 1; margin: 6px auto 0; filter: drop-shadow(var(--ombra-simbolo)); transition: transform .6s var(--molla); } .evento:hover .evento__simbolo { transform: rotate(-6deg) scale(1.04); } .evento__nome { margin: auto 0 10px; font: 400 clamp(2.4rem, 3.2vw, 3.4rem)/.9 var(--display); text-transform: uppercase; } .evento__riga { margin: 0 0 12px; font-size: .95rem; opacity: .92; } .evento__quando { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font: 500 .85rem var(--mono); letter-spacing: .04em; } .evento__vai { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; } .evento__vai svg { transition: transform .3s var(--molla); } .evento:hover .evento__vai svg { transform: translateX(6px); } .evento--rodeo { --sfondo: var(--evento-rodeo); } .evento--serata { --sfondo: var(--evento-serata); } .evento--lunch { --sfondo: var(--evento-lunch); color: var(--evento-lunch-testo); } .evento--spritz { --sfondo: var(--evento-spritz); } /* division league */ .league { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .league__logo { width: 92px; height: auto; margin-bottom: 18px; } .league__dati { display: grid; gap: var(--sp-4); align-self: end; } .league__riserva { display: grid; gap: var(--sp-4); justify-items: start; padding: 28px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); } .league__riserva p { margin: 0; color: var(--chiaro); max-width: 46ch; } .premi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; list-style: none; margin: 8px 0 0; padding: 0; } .premio { padding: 18px 16px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--vetro-lieve); font-weight: 600; font-size: .95rem; line-height: 1.3; } .premio svg { display: block; width: 22px; height: 22px; margin-bottom: 12px; color: var(--arancio-testo); } .premio span { display: block; margin-bottom: 4px; font: 500 .7rem var(--mono); letter-spacing: .12em; color: var(--spento); } /* il campo centrale con la tribuna */ .tribuna { position: relative; isolation: isolate; overflow: hidden; min-height: max(640px, 115vh); display: flex; align-items: flex-end; } .tribuna__foto { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: var(--maschera-tribuna); mask-image: var(--maschera-tribuna); } .tribuna__foto img { width: 100%; height: 100%; object-fit: cover; } .tribuna::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-tribuna); -webkit-mask-image: var(--maschera-tribuna); mask-image: var(--maschera-tribuna); } .tribuna__testo { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine) 14vh; } /* recensioni */ .voce { text-align: center; } .voce__stelle { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-bottom: 30px; color: var(--spento); font: 500 .85rem var(--mono); letter-spacing: .08em; } .stelle { position: relative; display: inline-block; } .stelle svg { width: 22px; height: 22px; margin: 0 1px; } .stelle__vuote svg { stroke: var(--stelle-vuote); } .stelle__piene { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; width: 92%; } .stelle__piene svg { fill: var(--arancio); stroke: var(--arancio); } .voce__citazione { margin: 0 auto; } .voce__citazione p { max-width: 15ch; margin: 0 auto; font: 400 clamp(3rem, 8vw, 7.6rem)/.95 var(--display); text-transform: uppercase; } .voce__citazione footer { margin-top: 28px; color: var(--spento); } /* tessera del club (home) */ .fascia-tessera { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--bordo); border-radius: 28px; background: var(--alone-academy), var(--fondo-scheda); } .fascia-tessera .paragrafo { margin-bottom: var(--sp-5); } .fascia-tessera__tipi { display: grid; gap: var(--sp-3); } .fascia-tessera__tipo { display: flex; align-items: center; gap: var(--sp-4); padding: 18px 20px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--vetro); } .fascia-tessera__tipo b { font: 400 1.8rem/1 var(--display); text-transform: uppercase; } .fascia-tessera__tipo span { color: var(--spento); font-size: var(--t-piccolo); } .fascia-tessera__tipo svg { width: 28px; height: 28px; color: var(--arancio-testo); } /* instagram */ .social__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; } .social__lato .paragrafo { margin-bottom: 16px; } .griglia-ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 40px; } .griglia-ig a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--raggio-m); } .griglia-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--molla); } .griglia-ig a:hover img { transform: scale(1.08); } .griglia-ig a::after { content: ""; position: absolute; inset: 0; background: var(--velo-foto); } /* sponsor */ .partner__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; } /* dove siamo */ .dove { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5) var(--sp-6); align-items: center; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); } .dove address { font-style: normal; font-size: var(--t-grande); color: var(--chiaro); } .dove address b { display: block; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 var(--display); text-transform: uppercase; color: var(--testo); margin-bottom: 6px; } /* chiusura */ .chiusura { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(110px, 18vh, 210px) var(--margine); } .chiusura::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -40%; width: 120%; height: 90%; transform: translateX(-50%); background: var(--alone-chiusura); } .chiusura h2 { max-width: 12ch; margin: 0 auto 44px; font: 400 clamp(3.4rem, 10vw, 10rem)/.88 var(--display); text-transform: uppercase; } .chiusura p { margin-top: 20px; color: var(--spento); } .chiusura p a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--testo); } /* ---------- 7. componenti per le pagine ---------- */ /* testa di pagina: titolo grande, sottotitolo, simbolo facoltativo */ .testa-pagina { max-width: var(--largo); margin: 0 auto; padding: calc(var(--testata) + clamp(48px, 10vh, 120px)) var(--margine) clamp(32px, 6vh, 64px); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5) var(--sp-7); align-items: end; } .testa-pagina__titolo { margin: 0; font: 400 var(--t-pagina)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; } .testa-pagina__titolo em { font-style: normal; color: var(--arancio-titolo); } .testa-pagina__sotto { margin: var(--sp-5) 0 0; max-width: 46ch; font-size: var(--t-grande); color: var(--chiaro); } .testa-pagina__azioni { margin-top: var(--sp-5); } .testa-pagina__simbolo { width: clamp(140px, 20vw, 240px); height: auto; aspect-ratio: 1; } .briciole { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; font: 500 var(--t-minimo)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--spento); } .briciole a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; margin: 0 -8px; text-decoration: none; } .briciole li + li::before { content: "/"; margin-right: var(--sp-2); } /* griglia di schede */ .griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); } .griglia--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } .griglia--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } /* scheda (immagine facoltativa) */ .scheda { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); color: var(--testo); } .scheda__foto { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .scheda__corpo { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; padding: 24px; } .scheda__titolo { margin: 0; font: 400 var(--t-titoletto)/1 var(--display); text-transform: uppercase; } .scheda__testo { margin: 0; color: var(--spento); flex: 1; } .scheda__testo p { margin: 0 0 var(--sp-2); } .scheda__data { font: 500 var(--t-minimo)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arancio-testo); } .scheda__piede { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: auto; } .scheda--link { text-decoration: none; transition: border-color .25s, transform .4s var(--molla); } .scheda--link:hover { border-color: var(--bordo-forte); transform: translateY(-3px); } .scheda--link .scheda__vai { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; } /* notizie e offerte (le disegna dati.js: markup esatto in GUIDA-STILE.md) */ .offerta .scheda__corpo { padding-top: 20px; } .offerta__sconto { align-self: flex-start; padding: 6px 12px; border-radius: 10px; background: var(--arancio); color: var(--su-arancio); font: 400 2rem/1 var(--display); } .offerta__scade { margin: 0; font: 500 var(--t-minimo)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--spento); } /* elenco di date */ .date { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .data { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--sp-4); padding: 12px 16px 12px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--fondo-scheda); } .data__giorno { display: grid; place-items: center; min-height: 64px; border-radius: var(--raggio-s); background: var(--vetro); text-align: center; line-height: 1; } .data__giorno b { display: block; font: 400 2rem/1 var(--display); } .data__giorno span { display: block; margin-top: 4px; font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arancio-testo); } .data__testo { min-width: 0; } .data__testo strong { display: block; font-weight: 600; } .data__testo span { color: var(--spento); font-size: var(--t-piccolo); } .data__azione { justify-self: end; } /* vuoto: il posto di un elenco che oggi non ha niente (date, classifica, notizie); .date__vuoto è il nome vecchio */ .vuoto, .date__vuoto { display: grid; gap: var(--sp-3); justify-items: start; margin: 0; padding: 20px; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-m); color: var(--spento); } .vuoto > *, .date__vuoto > * { margin: 0; } /* classifica: tabella sul computer, elenco di schede sul telefono (sezione 9) */ .classifica { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--fondo-scheda-piatto); } .classifica__testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 18px 22px; border-bottom: 1px solid var(--bordo); font: 500 .75rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--spento); } .classifica__testa strong { color: var(--testo); font-weight: 500; } .classifica__tabella { width: 100%; border-collapse: collapse; } .classifica__tabella th { padding: 12px 16px; text-align: left; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--spento); border-bottom: 1px solid var(--bordo); } .classifica__tabella td { padding: 12px 16px; border-bottom: 1px solid var(--riga); vertical-align: middle; } .classifica__tabella tr:last-child td { border-bottom: 0; } .classifica__tabella .numerico { text-align: right; font-variant-numeric: tabular-nums; } .classifica__pos { width: 64px; font: 400 1.6rem/1 var(--display); color: var(--spento); } .classifica__nome { font-weight: 600; } .classifica__persona { display: flex; align-items: center; gap: 12px; } .classifica__foto, .classifica__iniziali { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .classifica__iniziali { display: grid; place-items: center; background: var(--vetro-forte); font: 600 .85rem/1 var(--corpo); color: var(--chiaro); } .classifica__punti { font: 400 1.7rem/1 var(--display); text-align: right; } .classifica__riga--podio .classifica__pos { color: var(--podio, var(--arancio-titolo)); } .classifica__riga--podio .classifica__foto, .classifica__riga--podio .classifica__iniziali { box-shadow: 0 0 0 3px var(--podio); } .classifica__riga--1 { --podio: var(--oro); background: var(--vetro); } .classifica__riga--2 { --podio: var(--argento); } .classifica__riga--3 { --podio: var(--bronzo); } .classifica__piede { padding: 14px 22px; border-top: 1px solid var(--bordo); color: var(--spento); font-size: var(--t-piccolo); } /* moduli */ .modulo { display: grid; gap: var(--sp-5); max-width: 720px; } .modulo__righe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } .modulo__righe .campo--largo { grid-column: 1 / -1; } .modulo fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .modulo legend { padding: 0; margin-bottom: var(--sp-3); font: 400 var(--t-titoletto)/1 var(--display); text-transform: uppercase; } .campo { display: grid; gap: 6px; align-content: start; } .campo__etichetta { font-weight: 600; font-size: .95rem; color: var(--testo); } .campo__etichetta .facoltativo { font-weight: 400; color: var(--spento); } .campo__input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--fondo-campo); color: var(--testo); font: 400 1rem/1.4 var(--corpo); transition: border-color .2s, background .2s; } .campo__input::placeholder { color: var(--spento); opacity: .8; } .campo__input:focus { outline: 2px solid var(--ciano); outline-offset: 1px; background: var(--fondo-campo-fuoco); } textarea.campo__input { min-height: 120px; resize: vertical; } select.campo__input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .campo__aiuto { font-size: var(--t-piccolo); color: var(--spento); } .campo__errore { display: none; align-items: center; gap: 6px; font-size: var(--t-piccolo); font-weight: 600; color: var(--errore-testo); } .campo--errore .campo__input { border-color: var(--errore); } .campo--errore .campo__errore { display: flex; } /* consenso: tutta l'etichetta è il bersaglio */ .consenso { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding: 10px 0; cursor: pointer; } .consenso input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; font-size: 16px; accent-color: var(--arancio); } .consenso span { color: var(--chiaro); } /* scelta a schede (tessera Premium / Play) */ .scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); } .scelta { position: relative; display: block; cursor: pointer; } .scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; font-size: 16px; } .scelta__corpo { display: grid; gap: 6px; min-height: 96px; padding: 18px 20px 18px 56px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--vetro); transition: border-color .2s, background .2s; } .scelta__corpo::before { content: ""; position: absolute; left: 20px; top: 22px; width: 20px; height: 20px; border: 2px solid var(--bordo-forte); border-radius: 50%; } .scelta__nome { font: 400 1.7rem/1 var(--display); text-transform: uppercase; } .scelta__nota { color: var(--spento); font-size: var(--t-piccolo); } .scelta input:checked + .scelta__corpo { border-color: var(--arancio); background: var(--vetro-forte); } .scelta input:checked + .scelta__corpo::before { border-color: var(--arancio); background: radial-gradient(circle, var(--arancio) 45%, transparent 50%); } .scelta input:focus-visible + .scelta__corpo { outline: 2px solid var(--ciano); outline-offset: 3px; } .modulo__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* il campo esca: fuori dallo schermo, fuori dal Tab, fuori dai lettori */ .esca { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* esito di un invio: role="status" */ .esito { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--bordo); border-left-width: 4px; border-radius: var(--raggio-s); background: var(--vetro); color: var(--testo); } .esito:empty { display: none; } .esito svg { width: 22px; height: 22px; margin-top: 1px; } .esito--ok { border-left-color: var(--ok); } .esito--ok svg { color: var(--ok-testo); } .esito--errore { border-left-color: var(--errore); } .esito--errore svg { color: var(--errore-testo); } .esito p { margin: 0; } /* carta-portale (pagina dei collegamenti / QR) */ .portali { display: grid; gap: var(--sp-3); max-width: 560px; margin: 0 auto; list-style: none; padding: 0; } .portale { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: var(--sp-4); min-height: 76px; padding: 12px 18px 12px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--fondo-scheda); text-decoration: none; color: var(--testo); transition: border-color .2s, transform .3s var(--molla); } .portale:hover { border-color: var(--bordo-forte); transform: translateY(-2px); } .portale__icona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--arancio); color: var(--su-arancio); } .portale__icona svg { width: 26px; height: 26px; } .portale__nome { display: block; font-weight: 700; font-size: 1.05rem; } .portale__testo { display: block; color: var(--spento); font-size: var(--t-piccolo); } .portale__freccia { width: 22px; height: 22px; color: var(--spento); } /* domande frequenti */ .domande { display: grid; gap: var(--sp-2); max-width: 820px; } .domanda { border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--fondo-scheda); } .domanda summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; } .domanda summary::-webkit-details-marker { display: none; } .domanda summary::after { content: "+"; flex: 0 0 auto; font: 400 1.8rem/1 var(--display); color: var(--arancio-testo); transition: transform .3s var(--molla); } .domanda[open] summary::after { transform: rotate(45deg); } .domanda__risposta { padding: 0 20px 20px; color: var(--chiaro); } .domanda__risposta p { margin: 0 0 var(--sp-3); } /* riquadro della mappa (solo nella pagina Contatti) */ .mappa { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda-piatto); aspect-ratio: 16 / 10; max-height: 560px; } .mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mappa__apri { margin-top: var(--sp-3); } /* ---------- 7b. la revisione della disposizione (30/09) ---------- Regole comuni R1–R11 del piano (SITO/PIANO-REVISIONE-30SET.md): qui quelle che valgono a tutte le larghezze; il telefono è nella sezione 9, il computer nella 10. */ /* R3: la testa di pagina senza simbolo prende una foto a destra (solo computer: sul telefono ha .m-no-telefono); le pagine di servizio hanno una testa più bassa */ .testa-pagina__foto { width: clamp(260px, 26vw, 380px); margin: 0; overflow: hidden; border-radius: var(--raggio); aspect-ratio: 4 / 5; align-self: center; } .testa-pagina__foto img { width: 100%; height: 100%; object-fit: cover; } .testa-pagina--compatta { padding-top: calc(var(--testata) + clamp(32px, 6vh, 64px)); padding-bottom: var(--sp-5); } .testa-pagina--compatta .testa-pagina__titolo { font-size: var(--t-sezione); } .testa-pagina--compatta .testa-pagina__sotto { max-width: 60ch; } /* R8: la fascia che ha un'azione sotto le sue voci (home, tesseramento) */ .fascia-tessera:has(> .fascia-tessera__azione) { grid-template-areas: "testo tipi" "azione tipi"; row-gap: 0; } .fascia-tessera:has(> .fascia-tessera__azione) > :first-child { grid-area: testo; align-self: end; } .fascia-tessera:has(> .fascia-tessera__azione) > .fascia-tessera__tipi { grid-area: tipi; } .fascia-tessera__azione { grid-area: azione; align-self: start; } /* una voce che porta a un'altra pagina è tutta toccabile */ a.fascia-tessera__tipo { color: var(--testo); text-decoration: none; transition: border-color .25s, background .25s; } a.fascia-tessera__tipo:hover { border-color: var(--bordo-forte); background: var(--vetro-forte); } a.fascia-tessera__tipo > div { flex: 1; } .fascia-tessera__tipo .fascia-tessera__vai { width: 20px; height: 20px; color: var(--spento); } .fascia-tessera__tipi > .occhiello { margin-bottom: var(--sp-1); } /* R11: l'aiuto e l'errore stanno attaccati al loro campo (la distanza la dà il gap di .campo) */ .campo > .campo__aiuto, .campo > .campo__errore { margin: 0; } /* il consenso è l'ultimo passo: si stacca dai dati con un filo */ .modulo > [data-campo="consenso_privacy"] { margin-top: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--riga); } /* «Svuota il modulo» sta in fondo, staccato, e la sua domanda si apre lì */ .modulo__svuota { display: grid; justify-items: start; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--riga); } .modulo__svuota .pg-svuota { width: 100%; } /* il riepilogo accanto al modulo (solo computer largo) */ .pg-riepilogo { display: none; } .pg-riepilogo__tessera { margin: 0; font: 400 var(--t-titoletto)/1 var(--display); text-transform: uppercase; } .pg-riepilogo__tessera[data-vuota] { color: var(--spento); } .pg-riepilogo .pg-prezzo { margin-top: var(--sp-2); } .pg-riepilogo__passi { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0 1.2em; border-top: 1px solid var(--riga); color: var(--chiaro); font-size: var(--t-piccolo); } /* il podio delle classifiche degli eventi: lo scrive dati.js, si vede solo sul computer largo */ .podio { display: none; } .podio__posto { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3) var(--sp-4); border: 1px solid var(--bordo); border-top: 3px solid var(--podio); border-radius: var(--raggio-m); background: var(--fondo-scheda); text-align: center; } .podio__posto--1 { --podio: var(--oro); order: 2; padding-top: var(--sp-7); } .podio__posto--2 { --podio: var(--argento); order: 1; } .podio__posto--3 { --podio: var(--bronzo); order: 3; } .podio__pos { font: 400 2rem/1 var(--display); color: var(--podio); } .podio__foto, .podio__iniziali { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--podio); } .podio__iniziali { display: grid; place-items: center; background: var(--vetro-forte); font: 600 1.05rem/1 var(--corpo); color: var(--chiaro); } .podio__nome { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .podio__punti { font: 400 2.2rem/1 var(--display); } .podio__punti small { display: block; margin-top: 2px; font: 500 var(--t-minimo)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spento); } /* il piede corto (pagina dei collegamenti, che ha già tutto come carte): resta la riga legale */ .piede-corto .piede__griglia, .piede-corto .piede__gigante { display: none; } /* R10: le espressioni che non si spezzano (email, domini, numeri, «7 giorni su 7») */ .intero { white-space: nowrap; } :where(p, span, dd, td, li, address) a[href^="mailto:"], :where(p, span, dd, td, li, address) a[href^="tel:"] { white-space: nowrap; } /* ---------- il carosello ad anello ---------- Una classe in più sul contenitore delle schede. Sotto i 768px (sezione 9) diventa una fila che si sfoglia col dito e si ferma sempre su una scheda al centro, con un pezzo della precedente e della successiva ai lati; movimento.js aggiunge l'anello (due copie per parte, aria-hidden e inert) e i pallini. Sul computer non cambia niente. Senza JavaScript resta la fila che scorre di lato. */ .carosello__pallini { display: none; } /* ---------- 8. il piede ---------- */ .piede { background: var(--fondo-piede); border-top: 1px solid var(--bordo); overflow: hidden; container-type: inline-size; } .piede__griglia { max-width: var(--largo); margin: 0 auto; padding: 72px var(--margine) 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } .piede__marchio img { width: 200px; height: auto; } .piede__marchio p { color: var(--spento); } .piede h2 { margin: 0 0 14px; font: 500 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spento); } .piede p, .piede address { margin: 0 0 12px; color: var(--chiaro); font-style: normal; line-height: 1.7; } .piede__voce { display: flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; } .piede__voce:hover { color: var(--arancio-testo); } .piede__orari { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 16px; margin: 0; } .piede__orari dt { color: var(--spento); } .piede__orari dd { margin: 0; color: var(--testo); font-weight: 600; font-variant-numeric: tabular-nums; } .piede__gigante { max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine); font: 400 clamp(5rem, 18.5vw, 17rem)/.8 var(--display); letter-spacing: -.01em; /* R9: larga quanto il contenuto (3,74 = larghezza di «PADELCITY» in Anton, in em, misurata fra 3,71 e 3,74: si prende la più larga, così non esce mai) e tutta sopra il filo */ font-size: calc(min(100cqi - 2 * var(--margine), var(--largo) - 2 * var(--margine)) / 3.74); text-align: center; padding-bottom: .06em; color: transparent; -webkit-text-stroke: 1px var(--contorno-gigante); white-space: nowrap; user-select: none; } /* R4: il filo è largo quanto il testo, non quanto il blocco con l'imbottitura */ .piede__fondo { width: min(100% - 2 * var(--margine), var(--largo) - 2 * var(--margine)); margin: 0 auto; padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; border-top: 1px solid var(--bordo); color: var(--spento); font-size: .85rem; } .piede__fondo nav { display: flex; gap: var(--sp-4); } .piede__fondo a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; color: var(--spento); } .piede__fondo a:hover { color: var(--testo); } .piede__societa { display: inline-flex; align-items: center; min-height: var(--tap); } /* ---------- 9. telefono: sotto i 768px e sotto l'interruttore body.m-on ---------- */ @media (max-width: 767.98px) { :root { --testata: 60px; } body.m-on { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; } body.m-on .m-no-telefono { display: none !important; } body.m-on .marchio img { height: 30px; } /* barra di navigazione in basso (One UI): massimo 5 voci, «Altro» apre il foglio */ body.m-on .m-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; padding: 0 4px env(safe-area-inset-bottom); background: var(--fondo-barra); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--bordo), var(--ombra-barra); } body.m-on .m-barra a, body.m-on .m-barra button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--barra-h); padding: 6px 0 4px; border: 0; background: none; color: var(--chiaro); font: 500 .72rem/1.1 var(--corpo); text-decoration: none; cursor: pointer; } body.m-on .m-barra svg { width: 22px; height: 22px; } body.m-on .m-barra [aria-current] { color: var(--arancio-testo); font-weight: 700; } body.m-on .m-barra .m-barra-primario { gap: 2px; padding-top: 4px; color: var(--testo); font-weight: 700; } body.m-on .m-barra .m-barra-pallino { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--arancio); color: var(--su-arancio); box-shadow: var(--ombra-nastro); } body.m-on .m-barra .m-barra-pallino svg { width: 20px; height: 20px; } /* il foglio sale dal basso */ body.m-on .m-foglio--sempre { left: 0; right: 0; bottom: 0; max-height: 88dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); } body.m-on .m-foglio--sempre.aperto { transform: none; } /* home */ body.m-on .eroe { min-height: 92svh; padding-bottom: 28px; } body.m-on .eroe__foto img { object-position: 50% 30%; } body.m-on .eroe__velo { background: var(--velo-eroe-telefono); } body.m-on .eroe__campo { width: 240vw; bottom: -4%; opacity: .28; } body.m-on .eroe__occhiello { font-size: .72rem; } body.m-on .eroe__azioni { gap: 10px; } body.m-on .eroe__azioni .bottone { flex: 1 1 100%; padding: 0 12px; } /* un pulsante non è mai più largo dello schermo: meno imbottitura, e se serve va a capo */ body.m-on .bottone { max-width: 100%; white-space: normal; text-align: center; } body.m-on .bottone--grande, body.m-on .bottone--enorme { padding: 0 1.2em; } body.m-on .bottone--enorme { min-height: 64px; font-size: 1.125rem; } body.m-on .pallina { width: 26px; height: 26px; } body.m-on .nastro { padding: 12px 0; margin-top: -16px; } body.m-on .nastro--partner { margin-top: 20px; padding: 18px 0; } body.m-on .sezione { padding-top: 72px; padding-bottom: 72px; } body.m-on .sezione--stretta { padding-top: 48px; padding-bottom: 48px; } body.m-on .sezione--tessere { padding-top: 64px; padding-bottom: 8px; } body.m-on .chiusura { padding-top: 96px; padding-bottom: 96px; } /* numeri: tessere due per riga, non uno a schermata */ body.m-on .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.m-on .tessera { padding: 18px 14px; border-radius: 18px; } body.m-on .tessera__numero { font-size: 2.8rem; } body.m-on .tessera__nome { font-size: .95rem; } body.m-on .tessera__nota { font-size: .8rem; } body.m-on .centro, body.m-on .academy__dentro, body.m-on .league, body.m-on .fascia-tessera, body.m-on .dove { grid-template-columns: minmax(0, 1fr); } body.m-on .collage { aspect-ratio: 5 / 6; } body.m-on .percorsi { grid-template-columns: 1fr; } body.m-on .academy__foto { aspect-ratio: 4 / 5; } body.m-on .premi { grid-template-columns: repeat(2, 1fr); } /* eventi: l'introduzione sopra, le carte nel carosello (9b) */ body.m-on .eventi__binario { flex-direction: column; align-items: stretch; width: auto; gap: 12px; } body.m-on .eventi__intro { width: auto; } body.m-on .tribuna { min-height: 620px; } body.m-on .griglia-ig { grid-template-columns: repeat(3, 1fr); gap: 6px; } body.m-on .griglia-ig a { border-radius: 10px; } /* componenti */ body.m-on .testa-pagina { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--testata) + 40px); } body.m-on .modulo__righe { grid-template-columns: minmax(0, 1fr); } body.m-on .campo__input { font-size: 16px; min-height: var(--tap); } /* classifica: la tabella diventa un elenco di schede (role="table/row/cell" nel markup) */ body.m-on .classifica__tabella, body.m-on .classifica__tabella tbody, body.m-on .classifica__tabella tr, body.m-on .classifica__tabella td { display: block; width: auto; } body.m-on .classifica__tabella thead { display: none; } /* riga 1: posizione | nome | punti; riga 2: i dati piccoli (presenze, vinte, perse) in fila sotto il nome */ body.m-on .classifica__tabella tr { display: grid; grid-template-columns: 40px auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--riga); } body.m-on .classifica__tabella td { padding: 0; border: 0; } body.m-on .classifica__tabella .classifica__pos { grid-column: 1; grid-row: 1 / span 2; width: auto; font-size: 1.5rem; } body.m-on .classifica__tabella .classifica__nome { grid-column: 2 / 5; grid-row: 1; min-width: 0; } body.m-on .classifica__tabella .classifica__punti { grid-column: 5; grid-row: 1 / span 2; font-size: 1.9rem; } body.m-on .classifica__tabella .classifica__dato { grid-row: 2; color: var(--spento); font-size: .82rem; text-align: left; white-space: nowrap; } body.m-on .classifica__tabella .classifica__dato::before { content: attr(data-eti) " "; } body.m-on .classifica__tabella .classifica__punti::before { content: none; } body.m-on .classifica__persona { gap: 10px; } body.m-on .classifica__foto, body.m-on .classifica__iniziali { width: 40px; height: 40px; } body.m-on .piede__griglia { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 56px; } body.m-on .piede__marchio { grid-column: 1 / -1; } body.m-on .piede__contatti { grid-column: 1 / -1; } body.m-on .piede__orari { grid-template-columns: minmax(0, 1fr); gap: 0; } body.m-on .piede__orari dd { margin-bottom: 8px; } body.m-on .piede__fondo { justify-content: flex-start; } } /* ---------- 9b. telefono: la revisione della disposizione (30/09) ---------- */ @media (max-width: 767.98px) { /* R1: i pulsanti a tutta larghezza, uno sotto l'altro, stessa altezza, il principale sopra. I collegamenti restano collegamenti; le date tengono «Prenota» a destra della riga; due parole corte (Chiama, WhatsApp) stanno in due metà uguali. */ body.m-on main .bottone:not(.bottone--collegamento) { width: 100%; } body.m-on main :is(.azioni, .scheda__piede, .modulo__azioni) > .bottone:not(.bottone--collegamento) { flex: 1 1 100%; } body.m-on main .bottone.data__azione, body.m-on main .mappa__carica { width: auto; } body.m-on main .azioni--coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } body.m-on .league__riserva { justify-items: stretch; } /* R5: la sezione eventi prende l'aria delle altre sezioni */ body.m-on .eventi__binario { padding-top: 72px; padding-bottom: 72px; } /* R9: il «N°1» gigante sul telefono non si vede intero: si toglie */ body.m-on .academy__numero { display: none; } /* R3: il simbolo non apre la pagina da solo: sta in alto a destra, accanto a briciole e titolo */ body.m-on .testa-pagina { position: relative; } body.m-on .testa-pagina__simbolo { position: absolute; top: calc(var(--testata) + 32px); right: var(--margine); width: 88px; } /* R8: niente scheda dentro la scheda */ body.m-on .fascia-tessera { padding: var(--sp-5); } body.m-on .fascia-tessera__tipi { gap: 0; } body.m-on .fascia-tessera__tipo { padding: var(--sp-4) 0; border: 0; border-top: 1px solid var(--riga); border-radius: 0; background: none; } body.m-on .fascia-tessera__tipi > .occhiello { margin-bottom: var(--sp-2); } /* R8 sul telefono: le aree tornano una sotto l'altra (testo, voci, pulsante) */ body.m-on .fascia-tessera:has(> .fascia-tessera__azione) { grid-template-areas: "testo" "tipi" "azione"; } body.m-on .fascia-tessera__azione { margin-top: var(--sp-5); } /* numeri: tre per riga quando sono tre (una tessera sola sotto lascia un buco) */ body.m-on .tessere:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.m-on .tessere:has(> :nth-child(3):last-child) .tessera { padding: 14px 10px; } body.m-on .tessere:has(> :nth-child(3):last-child) .tessera__numero { font-size: 2.2rem; } body.m-on .tessere:has(> :nth-child(3):last-child) .tessera__nome { font-size: .88rem; } body.m-on .tessere:has(> :nth-child(3):last-child) .tessera__nota { font-size: .76rem; } /* le date: una riga ciascuna, «Prenota» a destra */ body.m-on .data { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 10px 10px 10px 8px; } body.m-on .data__giorno { min-height: 52px; } body.m-on .data__giorno b { font-size: 1.7rem; } body.m-on main .bottone.data__azione { min-height: var(--tap); padding: 0 16px; } /* la classifica: le presenze sotto il nome, non sotto la foto; dalla quarta riga righe compatte, con le presenze in linea fra il nome e i punti */ body.m-on .classifica__tabella tr:has(.classifica__persona) .classifica__nome + .classifica__dato { padding-left: 50px; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio):has(.classifica__persona) { grid-template-columns: 32px minmax(0, 1fr) auto auto; padding: 8px 16px; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio):has(.classifica__persona) .classifica__pos { grid-row: 1; font-size: 1.2rem; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio):has(.classifica__persona) .classifica__nome { grid-column: 2; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio):has(.classifica__persona) .classifica__dato { grid-column: 3; grid-row: 1; padding-left: 0; font-size: .78rem; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio):has(.classifica__persona) .classifica__punti { grid-column: 4; grid-row: 1; font-size: 1.5rem; } body.m-on .classifica__tabella tr:not(.classifica__riga--podio) :is(.classifica__foto, .classifica__iniziali) { width: 32px; height: 32px; font-size: .72rem; } /* il carosello ad anello: una fila che si sfoglia, una scheda al centro e un pezzo delle vicine ai lati; esce dai margini della sezione fino ai bordi dello schermo */ body.m-on .carosello:has(> :nth-child(2)) { position: relative; display: flex; gap: 12px; margin-inline: calc(-1 * var(--margine)); padding: 6px 34px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; } body.m-on .carosello::-webkit-scrollbar { display: none; } body.m-on .carosello:has(> :nth-child(2)) > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; } body.m-on .carosello__pallini { display: flex; justify-content: center; margin: 2px 0 0; padding: 0; list-style: none; } .carosello__pallino { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; } .carosello__pallino::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--bordo-forte); transition: width .3s var(--molla), background .3s; } .carosello__pallino[aria-current="true"]::before { width: 24px; background: var(--arancio); } /* le carte degli eventi, nel carosello, tornano verticali come sul computer */ body.m-on .eventi__carte.carosello { margin-top: var(--sp-5); } body.m-on .evento { width: auto; padding: 20px; border-radius: 22px; } body.m-on .evento__simbolo { width: 150px; margin: 6px auto 10px; } body.m-on .evento__nome { margin: auto 0 8px; font-size: 2.4rem; } body.m-on .evento__riga { margin: 0 0 10px; font-size: .95rem; } body.m-on .evento__quando { font-size: .8rem; } body.m-on .evento__vai { justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bordo); } /* il modulo: la barra con «Invia» si incolla solo dopo la scelta della tessera (moduli.js accende --attiva), e prende il fondo della barra in basso solo quando è davvero incollata (--incollata): le due barre diventano un pezzo solo */ body.m-on .modulo__azioni { position: static; padding: 10px 0; background: none; } body.m-on .modulo__azioni--attiva { position: sticky; bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); z-index: 5; } body.m-on .modulo__azioni--incollata { margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); background: var(--fondo-barra); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--bordo); } /* la scelta della tessera: due interruttori affiancati, nome sopra e prezzo sotto */ body.m-on .scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.m-on .scelta__corpo { min-height: 0; padding: 14px 12px 14px 44px; } body.m-on .scelta__corpo::before { left: 14px; top: 17px; } body.m-on .scelta__punto, body.m-on .scelta__nota { display: none; } body.m-on .scelta__prezzo { display: block; margin-top: 4px; font: 600 1rem/1.2 var(--corpo); text-transform: none; color: var(--arancio-testo); } /* home: premi in riga, trofeo a sinistra; il logo della lega accanto al titolo */ body.m-on .premio { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 12px 14px; } body.m-on .premio svg { grid-row: 1 / span 2; margin: 0; } body.m-on .premio span { margin: 0; } body.m-on .league__testa { position: relative; } body.m-on .league__logo { position: absolute; top: -6px; right: 0; width: 72px; margin: 0; } body.m-on .league__testa .occhiello { padding-right: 84px; } body.m-on .eroe__occhiello { text-wrap: balance; } } /* ---------- 10. computer e tablet (>= 768px) ---------- */ @media (min-width: 768px) { .m-solo-telefono, .m-barra, .m-foglio-presa { display: none !important; } .testata__prenota { display: inline-flex; } .apri-menu { display: inline-flex; } /* il foglio del menu arriva da destra */ .m-foglio--sempre { top: 0; right: 0; bottom: 0; width: min(420px, 92vw); border-radius: 22px 0 0 22px; transform: translateX(100%); padding-top: var(--sp-4); } /* eventi: la sezione si ferma a schermo intero e scorre di lato */ .eventi { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } .eventi__binario { padding-top: 48px; padding-bottom: 48px; } .evento { height: min(600px, 70vh); } } @media (min-width: 1200px) { .menu { display: flex; } .apri-menu { display: none; } } @media (min-width: 768px) and (max-width: 1199.98px) { .testata__prenota { margin-left: auto; } .apri-menu { margin-left: 0; } } @media (min-width: 768px) and (max-width: 1100px) { .tessere { grid-template-columns: repeat(2, 1fr); } .premi { grid-template-columns: repeat(3, 1fr); } .percorsi { grid-template-columns: 1fr; } .piede__griglia { grid-template-columns: 1fr 1fr; } } /* ---------- 10b. computer: la revisione della disposizione (30/09) ---------- */ @media (min-width: 768px) { /* R2: un elenco che riempie dati.js (notizie, offerte) si adatta al numero di schede: una sola diventa larga e orizzontale, due stanno in due colonne, da tre in su come prima */ .griglia[data-elenco]:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } .griglia[data-elenco]:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .griglia[data-elenco] > .scheda:only-child { flex-direction: row; } .griglia[data-elenco] > .scheda:only-child > .scheda__foto { width: 42%; height: auto; aspect-ratio: auto; align-self: stretch; } /* senza foto: data e titolo a sinistra, il testo a destra */ .griglia[data-elenco] > .scheda:only-child:not(:has(> .scheda__foto)) > .scheda__corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--sp-7); row-gap: var(--sp-3); align-content: start; padding: var(--sp-6); } .griglia[data-elenco] > .scheda:only-child:not(:has(> .scheda__foto)) > .scheda__corpo > * { grid-column: 1; justify-self: start; } .griglia[data-elenco] > .scheda:only-child:not(:has(> .scheda__foto)) > .scheda__corpo > .scheda__testo { grid-column: 2; grid-row: 1 / -1; justify-self: stretch; max-width: 62ch; } /* R3: il simbolo della testa pesa quanto il titolo e sta a metà della sua colonna */ .testa-pagina__simbolo { width: clamp(160px, 24vw, 340px); align-self: center; } } @media (min-width: 1024px) { /* R7: le domande nei due terzi di destra, occhiello e titolo fermi a sinistra */ .sezione:has(> .domande) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--sp-8); align-items: start; } .sezione:has(> .domande) > .domande__lato { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--testata) + var(--sp-5)); } .sezione:has(> .domande) > .domande { grid-column: 2; grid-row: 1; max-width: none; } .sezione:has(> .domande) > .domande ~ * { grid-column: 2; } /* R7: la classifica di un evento: il podio a sinistra sotto il titolo, la tabella stretta a destra (dalla quarta posizione: le prime tre sono nel podio) */ .sezione:has(> [data-classifica]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--sp-8); align-items: start; } .sezione:has(> [data-classifica]) > *, .sezione:has(> [data-classifica]) [data-vuoto] { grid-column: 1; } .sezione:has(> [data-classifica]) > [data-classifica], .sezione:has(> [data-classifica]) > [data-classifica] > [data-elenco] { display: contents; } .sezione:has(> [data-classifica]) .classifica { grid-column: 2; grid-row: 1 / -1; } .sezione:has(> [data-classifica]) .podio { display: grid; grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; margin: var(--sp-5) 0 0; padding: 0; list-style: none; } [data-classifica] .podio ~ .classifica :is(.classifica__riga--1, .classifica__riga--2, .classifica__riga--3) { display: none; } /* R10: i testi da leggere a 17px */ .testo-lungo { font-size: 1.0625rem; } } /* ---------- 11. riduci movimento ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } /* I nastri scorrono anche qui (decisione del 30/09: le scritte girano sempre, anche col «riduci movimento» del sistema), ma più piano. Restano fermi fuori dallo schermo e sotto il puntatore. */ .nastro__binario { animation: nastro-scorre calc(var(--durata, 26s) * 1.6) linear infinite !important; } .nastro--destra .nastro__binario { animation-direction: reverse !important; } .nastro.fermo .nastro__binario { animation-play-state: paused !important; } } @media (prefers-reduced-motion: reduce) and (hover: hover) { .nastro:hover .nastro__binario { animation-play-state: paused !important; } }