/* ============================================================ A.S.D. BASKET 4 TRIESTE — foglio di stile unico 1 variabili · 2 base · 3 utilità · 4 navbar · 5 sezioni 6 bottoni · 7 hero · 8 card · 9 timeline · 10 box 11 caroselli · 12 contatti · 13 footer · 14 responsive 15 blocco modalità scura · 16 sipario di caricamento ============================================================ */ /* ---------- 1. VARIABILI ---------- */ :root{ --r:#D13615; /* rosso aranciato B4T (contrasto 4.94 su bianco) */ --r-dk:#a82b0f; /* rosso scuro (hover) */ --r-lt:#EE5A32; /* rosso chiaro: testi piccoli su fondo scuro */ --o:#F39200; /* arancione (accento) */ --n:#16181D; /* nero */ --w:#FFFFFF; /* bianco */ --g:#F5F6F8; /* grigio (solo attesa foto) */ --bd:#E6E8EC; /* bordi */ --t:#2A2D34; /* testo */ --muted:#6B7078; /* testo secondario */ --mw:1160px; /* contenitore largo */ --mw-txt:920px; /* contenitore testo */ --mw-box:700px; /* riquadri con la barra rossa a sinistra */ --sec-pad:88px; /* spazio verticale sezioni */ --nav-h:70px; /* altezza navbar */ --br:6px; /* raggio bordi */ --f-display:'Oswald',sans-serif; --f-body:'Inter',sans-serif; --fs-h1:clamp(2.5rem,5.4vw,4.4rem); --fs-h2:clamp(1.9rem,3.4vw,2.7rem); --fs-h3:1.25rem; --fs-body:1.06rem; --fs-small:.95rem; --fs-xs:.78rem; } /* ---------- 2. BASE ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);color-scheme:only light;} body{font-family:var(--f-body);background:#FFFFFF;color:var(--t);line-height:1.65;padding-top:var(--nav-h);-webkit-font-smoothing:antialiased;} h1,h2,h3,h4{font-family:var(--f-display);color:var(--n);line-height:1.15;letter-spacing:.01em;font-weight:600;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{list-style:none;} /* ---------- 3. UTILITÀ ---------- */ .red{color:var(--r);} .wrap{max-width:var(--mw);margin:0 auto;} .wrap-txt{max-width:var(--mw-txt);margin:0 auto;} .center{text-align:center;} .js .fi{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;} .js .fi.v{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .js .fi{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } .tab{display:inline-block;background:var(--r);color:#FFFFFF;font-family:var(--f-display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:3px;margin-bottom:18px;} .band-red .tab{background:#FFFFFF;color:var(--r);} .sub-h{font-family:var(--f-display);font-weight:600;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;color:var(--n);text-align:center;margin:0 0 20px;} .dark .sub-h{color:#FFFFFF;} /* ---------- 4. NAVBAR + MENU A SIPARIO ---------- */ header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;background:#FFFFFF;border-bottom:1px solid var(--bd);} .nw{max-width:var(--mw);height:100%;margin:0 auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;} .nl{display:flex;align-items:center;gap:12px;} .nl .badge{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--n);border:2px solid var(--r);flex-shrink:0;} .nl .badge img{width:100%;height:100%;object-fit:cover;} .nl .badge .fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:600;font-size:.9rem;color:#FFFFFF;} .nl .badge .fb b{color:var(--o);} .nl .bn{font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:var(--n);} .nav-right{display:flex;align-items:center;gap:10px;} .nav-social{display:flex;align-items:center;gap:8px;margin-left:4px;} .nav-social a{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--n);transition:.2s;} .nav-social a:hover{background:var(--r);border-color:var(--r);color:#FFFFFF;} /* voci di menu nella navbar (solo computer) */ .nav-tabs{display:flex;align-items:center;gap:26px;} /* "Home" come collegamento diretto nella navbar */ .nav-tab-link{text-decoration:none;display:inline-block;} /* su computer Home è già nella barra: nel pannello resta solo per il telefono */ @media(min-width:961px){.dd .solo-telefono{display:none;}} .nav-tab{ background:none;border:none;cursor:pointer;padding:6px 2px;position:relative; font-family:var(--f-display);font-weight:500;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n); transition:color .2s; } .nav-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--r);transform:scaleX(0);transform-origin:left;transition:transform .22s;} .nav-tab:hover{color:var(--r);} .nav-tab:hover::after,.nav-tab.active::after{transform:scaleX(1);} .nav-tab.active{color:var(--r);} /* il sipario mostra una sola colonna quando si apre da una voce */ .dd.only-1 .dd-col:nth-child(2),.dd.only-1 .dd-col:nth-child(3), .dd.only-2 .dd-col:nth-child(1),.dd.only-2 .dd-col:nth-child(3), .dd.only-3 .dd-col:nth-child(1),.dd.only-3 .dd-col:nth-child(2){display:none;} @media(max-width:960px){.nav-tabs{display:none;}} @media(min-width:961px){.nav-right .hbg{display:none!important;}} .hbg{width:44px;height:44px;flex-shrink:0;background:none;border:2px solid var(--bd);border-radius:var(--br);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:border-color .2s;} .hbg:hover{border-color:var(--r);} .hbg span{display:block;width:20px;height:2px;background:var(--n);border-radius:1px;transition:background .2s;} .hbg:hover span{background:var(--r);} .dd{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:var(--n);border-bottom:4px solid var(--r);pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.4,0,.2,1);} .dd.open{clip-path:inset(0 0 0% 0);pointer-events:auto;} .dd-inner{max-width:var(--mw);margin:0 auto;padding:0 44px 0 26px;display:flex;flex-direction:column;align-items:flex-end;} /* pannello compatto sotto la voce cliccata (computer) */ .dd.compact{right:auto;width:max-content;min-width:190px;max-width:300px;border-bottom:3px solid var(--r);border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px -18px rgba(0,0,0,.5);} .dd.compact .dd-inner{padding:0 20px;align-items:stretch;max-width:none;margin:0;width:100%;} .dd.compact .dd-cols{gap:0;justify-content:flex-start;width:100%;} .dd.compact .dd-col{min-width:0;width:100%;} .dd.compact .dd-col a{text-align:left;padding:13px 0;min-width:0;width:100%;white-space:nowrap;} @media(max-width:960px){ .dd.compact{left:0!important;right:0!important;width:auto!important;min-width:0;border-left:none;border-right:none;box-shadow:none;} .dd.compact .dd a,.dd.compact a{text-align:right;padding:15px 22px 15px 28px;} } .dd-cols{display:flex;justify-content:flex-end;gap:56px;width:100%;} .dd-col{display:flex;flex-direction:column;min-width:220px;} /* tablet: tre colonne affiancate si dividono lo spazio disponibile */ @media(max-width:960px) and (min-width:761px){ .dd-cols{gap:26px;} .dd-col{min-width:0;flex:1 1 0;} .dd a{min-width:0;} } @media(max-width:760px){ .dd-cols{flex-direction:column;gap:0;} .dd-col{min-width:0;} .dd-col+.dd-col a:first-child{border-top:1px solid rgba(255,255,255,.12);} /* con tre gruppi di voci il menu può superare l'altezza dello schermo */ .dd{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;-webkit-overflow-scrolling:touch;} .dd a{padding:13px 22px 13px 28px;} } .dd a{display:block;width:auto;min-width:min(300px,100%);text-align:right;padding:15px 22px 15px 28px;cursor:pointer;color:#FFFFFF;border-top:1px solid rgba(255,255,255,.12);font-family:var(--f-display);font-weight:500;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;transition:color .2s,background .2s;} .dd a:first-child{border-top:none;} .dd a:hover{color:var(--r-lt);background:rgba(255,255,255,.05);} .dd a.active{color:var(--r-lt);} /* striscia avviso sotto il menu (stagionale, si toglie da site.js) */ .avviso{ display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; background:var(--o);color:#2a1c00;padding:11px 20px;text-align:center; font-family:var(--f-display);font-weight:500;font-size:.92rem;letter-spacing:.03em; } .avviso a{ font-weight:600;color:#2a1c00;text-decoration:underline;text-underline-offset:3px; white-space:nowrap;transition:opacity .2s; } .avviso a:hover{opacity:.7;} @media(max-width:560px){.avviso{font-size:.84rem;gap:8px;padding:10px 16px;}} /* ---------- 5. SEZIONI ---------- */ section.sec{padding:var(--sec-pad) 26px;background:#FFFFFF;text-align:center;} section.sec.dark{background:var(--n);} section.sec.band-red{background:var(--r);color:#FFFFFF;} .head{margin-bottom:44px;} .head h1,.head h2{font-size:var(--fs-h2);font-weight:600;} .head .lead{color:var(--muted);font-size:var(--fs-body);line-height:1.7;max-width:640px;margin:14px auto 0;} .dark .head h1,.dark .head h2,.band-red .head h1,.band-red .head h2,.band-red h1,.band-red h2{color:#FFFFFF;} .dark .head .lead{color:rgba(255,255,255,.65);} .band-red .head .lead{color:rgba(255,255,255,.92);} /* ---------- 6. BOTTONI ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;padding:14px 26px;border-radius:var(--br);border:2px solid transparent;cursor:pointer;transition:.2s;} .btn svg{flex-shrink:0;} .btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(0);} .bg-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;} .btn.sm{padding:9px 18px;font-size:.8rem;} .bp{background:var(--r);color:#FFFFFF;border-color:var(--r);} .bp:hover{background:var(--r-dk);border-color:var(--r-dk);} .bo{background:transparent;color:var(--n);border-color:var(--n);} .bo:hover{background:var(--n);color:#FFFFFF;} .bw{background:#FFFFFF;color:var(--r);border-color:#FFFFFF;} .bw:hover{background:transparent;color:#FFFFFF;border-color:#FFFFFF;} .bwo{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.6);} .bwo:hover{background:var(--n);color:#FFFFFF;border-color:#FFFFFF;} /* ---------- 7. HERO ---------- */ .hero{padding:104px 26px 108px;text-align:center;position:relative;overflow:hidden;background-color:var(--n);background-image:linear-gradient(rgba(18,20,25,.46),rgba(18,20,25,.62)),var(--hero-img,url('hero.jpg'));background-size:cover;background-position:center center;background-repeat:no-repeat;border-bottom:4px solid var(--r);} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 65% 35%,rgba(243,146,0,.16),transparent 60%),radial-gradient(ellipse 90% 80% at 40% 50%,rgba(209,54,21,.22),transparent 65%);} .hero-inner{max-width:840px;margin:0 auto;position:relative;z-index:1;} .hero .eyebrow{font-family:var(--f-display);font-weight:500;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px;} .hero .eyebrow b{color:var(--r-lt);font-weight:600;} .hero h1{font-size:var(--fs-h1);font-weight:600;letter-spacing:.01em;color:#FFFFFF;margin-bottom:24px;} .hero .head{margin-bottom:0;} .hero .head h1,.hero .head h2{color:#FFFFFF;font-size:var(--fs-h2);margin-bottom:0;} .hero .head .lead{color:rgba(255,255,255,.78);} .hero p.intro{font-size:1.12rem;line-height:1.8;color:rgba(255,255,255,.75);max-width:620px;margin:0 auto 34px;} /* ---------- 8. CARD SQUADRE + GRIGLIE CENTRATE ---------- */ .team-grid,.org-grid,.grid-2{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(16px,2.2vw,40px);max-width:var(--mw);margin:0 auto;} .team-grid>*{flex:0 1 260px;max-width:280px;} .org-grid>*{flex:0 1 220px;max-width:260px;} .grid-2>*{flex:0 1 300px;max-width:320px;} .team{background:#FFFFFF;border:1px solid var(--bd);border-top:4px solid var(--r);border-radius:10px;overflow:hidden;text-align:center;transition:.22s;display:block;color:inherit;} a.team:hover,.team.expandable:hover{transform:translateY(-5px);box-shadow:0 16px 34px -18px rgba(0,0,0,.25);} a.team:hover h3{color:var(--r);} .team-photo{width:100%;aspect-ratio:5/4;background:var(--g);position:relative;overflow:hidden;} .team-photo img{width:100%;height:100%;object-fit:cover;} /* foto 3:2 (card della home) */ .team-grid.wide .team-photo{aspect-ratio:3/2;} .team-grid.wide>*{flex:0 1 280px;max-width:300px;} .team-body{padding:20px 18px 22px;} .team .ico{font-size:1.8rem;margin-bottom:10px;} .team h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:6px;transition:color .2s;} .team .cat{display:block;font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--r);} .team .cat+p{margin-top:10px;} .team p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;} /* ---------- card apribile: orari allenamenti ---------- */ .team.expandable{cursor:pointer;} .team.expandable:focus-visible{outline:3px solid var(--o);outline-offset:2px;} .team-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease,margin .35s ease;text-align:left;} .team.open .team-more{max-height:260px;opacity:1;margin-top:14px;} .tm-row{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-small);padding:7px 0;border-top:1px solid var(--bd);} .tm-row:first-child{border-top:none;} .tm-row .tk{color:var(--muted);} .tm-row .tv{color:var(--n);font-weight:500;text-align:right;} .team-toggle{ display:inline-block;margin-top:12px;font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs); letter-spacing:.08em;text-transform:uppercase;color:var(--r); } .team-toggle::after{content:" ▾";display:inline-block;transition:transform .3s;} .team.open .team-toggle::after{transform:rotate(180deg);} .team.open .team-toggle{color:var(--muted);} .od-rows{margin-top:14px;text-align:left;} .od-rows .tv a{color:var(--r);text-decoration:underline;text-underline-offset:3px;} .tv.soon{color:var(--muted);font-style:italic;font-weight:400;} /* ---------- Open Day: riquadro con le categorie ---------- */ .od-box{max-width:var(--mw-box);margin:0 auto;background:#FFFFFF;border:1px solid var(--bd);border-left:4px solid var(--r);border-radius:10px;overflow:hidden;text-align:left;} .od-head{padding:20px 24px;border-bottom:1px solid var(--bd);} .od-head .od-t{display:block;font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--n);} .od-head .od-s{display:block;font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--r);margin-top:4px;} /* le categorie rientrano rispetto al titolo del settore */ .od-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 24px 14px 48px;border-top:1px solid var(--bd);} .od-row:first-of-type{border-top:none;} .od-cat{font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:var(--n);} .od-cat span{display:block;font-family:var(--f-body);font-weight:400;font-size:var(--fs-xs);color:var(--muted);margin-top:2px;} .od-when{font-size:var(--fs-small);color:var(--t);text-align:right;flex-shrink:0;} .od-when.soon{color:var(--muted);font-style:italic;} .acc-note{max-width:var(--mw-txt);margin:18px auto 0;font-size:var(--fs-small);color:var(--muted);text-align:center;} .acc-note a{color:var(--r);text-decoration:underline;text-underline-offset:3px;} @media(max-width:560px){ .od-row{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 20px 14px 34px;} .od-when{text-align:left;} } /* ---------- 9. TIMELINE ---------- */ .tl{max-width:720px;margin:0 auto;position:relative;padding-left:38px;text-align:left;} .tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--bd);} .tl-item{position:relative;padding:0 0 26px 8px;} .tl-item:last-child{padding-bottom:0;} .tl-item::before{content:"";position:absolute;left:-32px;top:3px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:3px solid var(--r);z-index:1;} .tl-item .yr{font-family:var(--f-display);font-weight:600;font-size:1.4rem;color:var(--r);line-height:1;margin-bottom:8px;} .tl-item p{font-size:var(--fs-small);line-height:1.6;color:var(--t);} .tl-item p strong{color:var(--n);font-weight:600;} .dark .tl::before{background:rgba(255,255,255,.18);} .dark .tl-item::before{background:var(--n);} .dark .tl-item p{color:rgba(255,255,255,.8);} .dark .tl-item p strong{color:#FFFFFF;} /* ---------- 10. BOX ---------- */ /* etichette categorie nella sezione Open Day della home */ .od-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;} .od-tags span,.od-tags a{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF;} /* le pillole cliccabili (link) danno un riscontro chiaro al passaggio del mouse */ .od-tags a{text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;} .od-tags a:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.6);transform:translateY(-1px);} .od-tags a:active{transform:translateY(0);} /* stesse pillole su fondo chiaro */ .od-tags.light span,.od-tags.light a{background:var(--g);border-color:var(--bd);color:var(--n);} .od-tags.light a:hover{background:var(--r);border-color:var(--r);color:#FFFFFF;} .hl-box{max-width:660px;margin:28px auto 0;background:var(--r);color:#FFFFFF;border-radius:10px;padding:24px 28px;font-family:var(--f-display);font-weight:500;font-size:1.18rem;line-height:1.45;text-align:center;} .hl-box u{text-decoration-thickness:3px;text-underline-offset:5px;} h2 u{text-decoration-thickness:3px;text-underline-offset:6px;} /* codice fiscale del 5x1000: riquadro bianco sulla fascia rossa */ .cf-box{max-width:440px;margin:0 auto 26px;background:#FFFFFF;border-radius:10px;padding:20px 26px;text-align:center;box-shadow:0 16px 34px -22px rgba(0,0,0,.45);} .cf-box .cf-l{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--r);} .cf-box .cf-n{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,4.4vw,2.05rem);letter-spacing:.1em;color:var(--n);line-height:1.2;margin-top:6px;} /* coordinate bancarie: leggibili e facili da ricopiare */ .iban{font-family:var(--f-display);font-weight:600;font-size:1.04rem;letter-spacing:.07em;line-height:1.5;color:var(--n);display:inline-block;word-break:break-word;} .doc-list{max-width:var(--mw-box);margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:left;} .doc{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#FFFFFF;border:1px solid var(--bd);border-left:4px solid var(--r);border-radius:8px;padding:15px 20px;} .doc .dn{font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:var(--n);line-height:1.3;} .doc .dsc{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.5;} .doc .dsc a{color:var(--r);text-decoration:underline;text-underline-offset:2px;word-break:break-word;} .doc-btn{flex-shrink:0;white-space:nowrap;font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--r);border:2px solid var(--r);border-radius:var(--br);padding:8px 16px;transition:.2s;} .doc-btn:hover{background:var(--r);color:#FFFFFF;transform:translateY(-2px);} .doc-btn:active{transform:translateY(0);} .doc-soon{flex-shrink:0;white-space:nowrap;font-family:var(--f-display);font-weight:500;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:2px solid var(--bd);border-radius:var(--br);padding:8px 16px;font-style:italic;} .note-box{max-width:var(--mw-box);margin:28px auto 0;background:#FFFFFF;border:1px solid var(--bd);border-left:4px solid var(--r);border-radius:10px;padding:22px 26px;text-align:left;} .note-box h4{font-family:var(--f-display);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;} .note-row{padding:12px 0;border-top:1px solid var(--bd);} .note-row:first-of-type{border-top:none;padding-top:0;} .note-row .nk{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--r);margin-bottom:4px;} .note-row .nv{font-size:var(--fs-small);line-height:1.6;color:var(--t);} .note-row .nv strong{color:var(--n);} .note-row .nv a{color:var(--r);text-decoration:underline;text-underline-offset:2px;word-break:break-word;} .gym{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;text-align:left;max-width:var(--mw-box);margin:26px auto 0;background:#FFFFFF;border:1px solid var(--bd);border-left:4px solid var(--r);border-radius:8px;padding:18px 22px;} .gym .gn{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--n);} .gym .ga{font-size:var(--fs-small);color:var(--muted);margin-top:2px;} .poster{max-width:460px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:#FFFFFF;box-shadow:0 16px 40px -22px rgba(0,0,0,.4);aspect-ratio:4/5;} .poster img{width:100%;height:100%;object-fit:cover;} .poster-ph{background:var(--n);color:#FFFFFF;padding:44px 26px;text-align:center;} .poster-ph .pt{font-family:var(--f-display);font-weight:600;font-size:1.6rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;} .poster-ph .ps{font-family:var(--f-display);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);margin-bottom:24px;} .poster-ph ul{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto;text-align:left;} .poster-ph li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:13px 16px;font-family:var(--f-display);font-weight:500;letter-spacing:.03em;text-transform:uppercase;font-size:.98rem;} .poster-ph li span{display:block;font-family:var(--f-body);font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--fs-xs);color:rgba(255,255,255,.6);margin-top:3px;} .person{background:#FFFFFF;border:1px solid var(--bd);border-bottom:3px solid var(--r);border-radius:8px;padding:16px 18px;text-align:center;} .person .pnm{font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:var(--n);} .person .prl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--r);margin-top:5px;} .staff-team{max-width:var(--mw-box);margin:0 auto 16px;background:#FFFFFF;border:1px solid var(--bd);border-left:4px solid var(--r);border-radius:8px;padding:18px 22px;text-align:left;} .staff-team h4{font-family:var(--f-display);font-weight:600;font-size:1.02rem;text-transform:uppercase;letter-spacing:.05em;color:var(--r);margin-bottom:10px;} .staff-team .role{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-small);padding:6px 0;border-top:1px solid var(--bd);} .staff-team .role:first-of-type{border-top:none;} .staff-team .role .rl{color:var(--muted);} .staff-team .role .rn{color:var(--n);font-weight:500;text-align:right;} .numbers{margin-top:52px;background:var(--n);border-radius:14px;padding:38px 30px;color:#FFFFFF;} .numbers .nlead{font-family:var(--f-display);font-weight:500;font-size:1.15rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:640px;margin:0 auto 30px;} .numbers .nlead b{color:var(--r);font-weight:600;font-size:1.15em;} .ngrid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;} .ngrid .item{flex:0 1 150px;text-align:center;} .ngrid .n{font-family:var(--f-display);font-weight:600;font-size:2.1rem;color:#FFFFFF;line-height:1;} .ngrid .l{font-size:var(--fs-xs);color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em;line-height:1.35;margin-top:8px;} /* ---------- griglia loghi (pagina sponsor) ---------- */ .logo-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(16px,2.2vw,40px);max-width:var(--mw);margin:0 auto;} .logo-item{flex:0 1 260px;max-width:300px;text-align:center;} .logo-nome{font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--n);margin-top:14px;line-height:1.3;} .dark .logo-nome{color:#FFFFFF;} .logo-box{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid var(--bd);border-radius:10px;padding:22px;} a.logo-box{transition:.2s;} a.logo-box:hover{border-color:var(--r);box-shadow:0 14px 26px -18px rgba(0,0,0,.4);} .logo-box img{transition:transform .25s ease;} a.logo-box:hover img{transform:scale(1.08);} .logo-box img{max-width:100%;max-height:100%;object-fit:contain;} /* riga discreta sotto la griglia sponsor: non deve rubare la scena ai loghi */ .join-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;max-width:var(--mw-txt);margin:44px auto 0;} .join-note p{font-size:var(--fs-small);font-weight:600;color:var(--t);} .dark .join-note p{color:rgba(255,255,255,.75);} @media(max-width:560px){.logo-item{flex:1 1 100%;max-width:340px;}} /* ---------- 11. CAROSELLI ---------- */ .spw{overflow-x:auto;scrollbar-width:none;cursor:grab;padding:8px 0;-webkit-overflow-scrolling:touch;} .spw::-webkit-scrollbar{display:none;} .spw-track{display:flex;width:max-content;min-width:100%;margin:0 auto;align-items:stretch;justify-content:center;gap:clamp(16px,2.2vw,40px);} /* NEWS: stessa griglia delle card squadre, si dispone da sola su ogni schermo */ .nws{max-width:var(--mw);margin:0 auto;} .nws-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(16px,2.2vw,40px);} .news-card{flex:0 1 300px;max-width:340px;background:#FFFFFF;border:1px solid var(--bd);border-bottom:3px solid var(--r);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;color:inherit;transition:.2s;} .news-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px rgba(0,0,0,.35);} .news-photo{width:100%;aspect-ratio:5/4;background:var(--g);position:relative;overflow:hidden;} .news-photo img{width:100%;height:100%;object-fit:cover;} .news-body{padding:16px 18px 18px;text-align:left;display:flex;flex-direction:column;flex:1;} .news-body .nd{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--r);margin-bottom:6px;} .news-body h3{font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--n);} .news-body p{font-size:var(--fs-small);color:var(--muted);line-height:1.55;margin-top:8px;} .news-body .nl{display:inline-block;margin-top:auto;padding-top:10px;font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .news-card:hover .nl{color:var(--r);} .sponsors{background:#FFFFFF;border-top:1px solid var(--bd);} .sp{flex-shrink:0;width:170px;height:74px;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid var(--bd);border-radius:8px;padding:12px 18px;} .sp span{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:#b7bcc3;} .sp img{max-height:52px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:.2s;} .sp:hover img{filter:grayscale(0);opacity:1;} /* ---------- 12. CONTATTI ---------- */ .ct-sec{border-top:3px solid var(--o);} .ct-sec h2{font-size:var(--fs-h2);font-weight:600;color:var(--n);} /* variante su fascia rossa */ .ct-sec.band-red h2{color:#FFFFFF;} .ct-sec.band-red{border-top:none;} .ct-sec.band-red .ct-div{background:#FFFFFF;} .ct-div{width:54px;height:4px;background:var(--o);margin:16px auto 28px;} .ct-lead{max-width:560px;margin:0 auto 34px;color:rgba(255,255,255,.92);line-height:1.7;font-size:var(--fs-body);} /* smistamento dei contatti per gruppo */ .ct-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(14px,2vw,22px);max-width:var(--mw);margin:0 auto;} .ct-card{flex:0 1 250px;max-width:280px;background:#FFFFFF;border-radius:10px;padding:22px 20px 20px;text-align:center;} .ct-card .ct-t{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--n);line-height:1.25;} .ct-card .ct-s{font-family:var(--f-display);font-weight:500;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--r);margin-top:5px;} .ct-card .ct-n{font-size:var(--fs-small);color:var(--muted);margin:14px 0 8px;} .ct-card a{display:block;font-size:var(--fs-small);line-height:1.5;color:var(--r);text-decoration:underline;text-underline-offset:3px;word-break:break-word;margin-top:4px;} .ct-card a:hover{color:var(--r-dk);} /* ---------- 13. TORNA SU + FOOTER ---------- */ #btt{display:none;position:fixed;bottom:24px;right:24px;z-index:98;width:46px;height:46px;border-radius:50%;background:var(--o);color:#2a1c00;border:none;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(243,146,0,.45);} footer{background:var(--n);color:rgba(255,255,255,.6);padding:56px 26px 30px;border-top:3px solid var(--r);} /* le tre colonne si adattano al contenuto e il gruppo resta centrato nella pagina */ .foot-grid{max-width:var(--mw);margin:0 auto;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(34px,13vw,200px);text-align:left;} .foot-brand,.foot-contact,.foot-docs{flex:0 1 auto;} .foot-logo{width:220px;max-width:100%;height:auto;margin-bottom:18px;display:block;} .foot-name{font-family:var(--f-display);font-weight:600;font-size:1.1rem;letter-spacing:.04em;color:#FFFFFF;margin-bottom:18px;} /* dati societari sotto al logo */ .foot-legal{margin-top:16px;font-size:var(--fs-xs);line-height:1.75;color:rgba(255,255,255,.42);} .foot-legal p{margin:0;} .foot-legal span{color:rgba(255,255,255,.72);letter-spacing:.03em;} .foot-social{display:flex;gap:12px;margin-top:22px;} .foot-social a{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;transition:.2s;} .foot-social svg{width:21px;height:21px;} .foot-social a:hover{background:var(--r);border-color:var(--r);color:#FFFFFF;} footer h4{font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-bottom:16px;} .foot-contact p{font-size:var(--fs-small);line-height:1.5;margin-bottom:10px;} .foot-docs p{font-size:var(--fs-small);line-height:1.5;margin-bottom:10px;} .foot-contact a:hover{color:var(--r-lt);} .foot-docs a:hover{color:var(--r-lt);} .foot-bottom{max-width:var(--mw);margin:0 auto;padding-top:22px;text-align:center;font-family:var(--f-display);font-size:var(--fs-xs);letter-spacing:.04em;color:rgba(255,255,255,.35);} .foot-bottom p{margin:0;} /* ---------- 14. RESPONSIVE ---------- */ @media(max-width:860px){ .hero{padding:72px 24px 76px;} } @media(max-width:760px){ .nav-social{display:none;} .foot-grid{flex-direction:column;align-items:center;text-align:center;gap:34px;} /* il blocco è largo quanto la riga dell'IBAN: il logo va centrato dentro di esso */ .foot-logo{margin-left:auto;margin-right:auto;} .foot-social{justify-content:center;} } @media(max-width:560px){ .team-grid>*,.org-grid>*,.grid-2>*,.news-card,.ct-card{flex:1 1 100%;max-width:340px;} .hl-box{font-size:1.05rem;padding:20px 22px;} .doc{flex-direction:column;align-items:flex-start;gap:12px;} } /* ---------- 15. BLOCCO MODALITÀ SCURA ---------- */ @media (prefers-color-scheme: dark){ html,body{background:#FFFFFF;color:var(--t);} section.sec{background:#FFFFFF;} section.sec.dark{background:var(--n);} section.sec.band-red{background:var(--r);} header{background:#FFFFFF;} footer,.dd{background:var(--n);} .team,.doc,.note-box,.gym,.person,.staff-team,.sp,.news-card,.poster{background:#FFFFFF;} h1,h2,h3,h4{color:var(--n);} .hero h1,.dark .head h1,.dark .head h2,.dark .sub-h,.band-red h2,.poster-ph .pt,footer h4{color:#FFFFFF;} .tl-item p{color:var(--t);} .dark .tl-item p{color:rgba(255,255,255,.8);} .dark .tl-item p strong{color:#FFFFFF;} .team h3,.news-body h3,.doc .dn,.person .pnm,.gym .gn{color:var(--n);} } /* ---------- 16. SIPARIO DI CARICAMENTO ---------- Copre il lampo dei font (FOUT) e sfuma appena sono pronti. Il logo compare solo se il caricamento supera la soglia (vedi site.js). Senza JavaScript il sipario è disattivato dal