/* ========================================================== 8 delle Langhe — Sito ufficiale Stile derivato dal Sito Classifiche 8DL (Cabrito + glass + ambra) ========================================================== */ /* Cabrito Condensed — font principale del sito */ @font-face{font-family:'Cabrito';src:url('../fonts/CabritoConMed.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Cabrito';src:url('../fonts/CabritoConDem.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Cabrito';src:url('../fonts/CabritoConBol.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} :root{ --bg-primary:#f8fafc; --bg-secondary:#ffffff; --bg-card:#ffffff; --border-color:#e2e8f0; --border-subtle:#edf1f7; --text-main:#0f172a; --text-muted:#475569; --text-dim:#64748b; --accent-gold:#d97706; --accent-gold-light:#fef3c7; --accent-red:#ef4444; --accent-cyan:#0891b2; --accent-green:#059669; --accent-purple:#8b5cf6; --bg-card-hover:#f1f5f9; --font-sans:'Cabrito',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; } html{scroll-behavior:smooth} /* 25/09/2026: lo sfondo NON e' piu' impostato come background-* del body con "background-attachment:fixed". Su alcuni browser mobile (Safari iOS in primis) questa proprieta' non viene onorata in modo affidabile: lo sfondo puo' comunque scorrere/ridisegnarsi col contenuto, risultando sgranato, anche se la regola CSS e' corretta e pubblicata. La tecnica robusta e supportata ovunque e' invece un layer separato, ancorato al viewport con "position:fixed" (non "background-attachment"), messo dietro a tutto il resto con z-index negativo. Il body resta senza sfondo proprio: il colore/ immagine che si vede e' quello di questo pseudo-elemento. NON tornare a "background-attachment:fixed" sul body per "sistemare" lo sfondo: e' proprio quello il meccanismo che su mobile non e' affidabile. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; background-image:url('../img/8DL-Sito-Background_optimized.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; } body{ color:var(--text-main); font-family:var(--font-sans); font-weight:600; margin:0;padding:0; min-height:100vh; -webkit-font-smoothing:antialiased; } /* ---------- Superfici in vetro ---------- */ .glass-panel{ background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border-color); } .glass-card{ background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--border-color); transition:all .25s cubic-bezier(.16,1,.3,1); } .glass-card:hover{ transform:translateY(-4px); border-color:rgba(217,119,6,.4); box-shadow:0 12px 30px -10px rgba(15,23,42,.18),0 0 15px rgba(217,119,6,.12); } .glass-flat{ background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--border-color); } /* ---------- Navigazione ---------- */ .nav-link{ padding:.375rem .875rem; border-radius:8px; font-size:.75rem; font-weight:700; color:#64748b; text-decoration:none; white-space:nowrap; transition:all .2s; display:inline-flex;align-items:center;gap:.375rem; } .nav-link:hover{color:#0f172a;background:rgba(15,23,42,.04)} .nav-link.active{background:#FAA741;color:#020617;border-radius:5px} /* Menu "Altro": raccoglie le voci di navigazione che non entrano nella barra (a partire da destra), invece di farle uscire dalla pagina o andare a capo. Vedi la logica di spostamento in js/site.js. .nav-lista e' il contenitore che si può comprimere (min-width:0, altrimenti un elemento flessibile non si restringe mai sotto la larghezza del suo contenuto) e nasconde le voci in eccesso con overflow:hidden; ".nav-piu" sta fuori da questo contenitore apposta, cosi' il suo menu a tendina non viene mai tagliato dall'overflow:hidden della lista. */ #nav-principale{min-width:0} .nav-lista{display:flex;align-items:center;gap:.25rem;min-width:0;overflow:hidden} .nav-piu{position:relative;flex-shrink:0} .nav-piu-btn{cursor:pointer;background:none;border:none;font-family:inherit} .nav-piu-caret{font-size:.6rem;transition:transform .2s} .nav-piu.aperto .nav-piu-caret{transform:rotate(180deg)} .nav-piu-menu{ position:absolute;top:calc(100% + .5rem);right:0;min-width:170px; background:#fff;border:1px solid var(--border-color);border-radius:12px; box-shadow:0 12px 28px rgba(15,23,42,.16);padding:.35rem; display:flex;flex-direction:column;gap:.1rem; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; z-index:40; } .nav-piu.aperto .nav-piu-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-piu-menu .nav-link{width:100%;justify-content:flex-start} /* ---------- Bottoni ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.625rem 1.25rem;border-radius:8px; font-weight:700;font-size:.875rem;text-decoration:none; transition:all .2s;border:1px solid transparent;cursor:pointer; } .btn-primary{background:#FAA741;color:#111827;border-color:#FAA741} .btn-primary:hover{background:#ffb866;border-color:#ffb866;transform:translateY(-1px)} .btn-ghost{background:rgba(255,255,255,.9);color:#0f172a;border-color:var(--border-color)} .btn-ghost:hover{border-color:rgba(217,119,6,.5);color:#b45309} /* ---------- Dettagli ---------- */ .year-chip{ font-family:var(--font-mono);font-size:.65rem;font-weight:700; padding:2px 6px;border-radius:4px; background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.1);color:var(--text-muted); } .year-chip.active{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.35);color:#b45309} .glow-gold{box-shadow:0 0 12px rgba(217,119,6,.3)} /* Bordo dorato in cima alle schede in evidenza (come le winner card) */ .gold-top{position:relative} .gold-top::after{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#f59e0b,#fbbf24,transparent); border-radius:8px 8px 0 0; } /* Illustrazione del trofeo nella card "Trofeo Dario Sebaste" (sezione Chi siamo), stessa grafica gia' usata in Albo d'Oro (img/trofeo.png). 28/09/2026: su richiesta di Alberto e' uno sfondo dietro al testo (non sotto, nel flusso): la card diventa il contenitore di riferimento (position:relative + overflow:hidden, cosi' l'immagine resta sempre dentro ai bordi arrotondati e non puo' mai "sforare" fuori dalla card), il testo sta in un livello sopra (.trofeo-card-testo, z-index:1) e l'immagine e' posizionata in basso a destra, in trasparenza, dietro al testo (z-index:0). L'altezza della card torna a essere dettata solo dal testo. */ .trofeo-card{position:relative;overflow:hidden} .trofeo-card-testo{position:relative;z-index:1} .trofeo-card-illustrazione{ position:absolute;right:-10px;bottom:-10px; width:150px;max-width:60%;height:auto; opacity:.14; pointer-events:none;user-select:none; z-index:0; } /* Numero grande della tappa */ .stage-num{ font-size:3rem;line-height:1;font-weight:700; color:transparent;-webkit-text-stroke:1.5px var(--t,#d97706); } /* Riga di programma (orari) */ .timeline-row{display:flex;gap:.75rem;align-items:flex-start;padding:.625rem 0;border-top:1px solid var(--border-subtle)} .timeline-row:first-child{border-top:none} .timeline-time{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--t-scuro,#b45309);min-width:3.5rem;padding-top:.15rem} /* Scrollbar coerenti col sito classifiche */ ::-webkit-scrollbar{width:7px;height:7px} ::-webkit-scrollbar-track{background:#f1f5f9} ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:#94a3b8} /* Tabella quote */ .price-table{width:100%;border-collapse:collapse;font-size:.8rem} .price-table th{ text-align:left;padding:.625rem .75rem;font-size:.7rem; letter-spacing:.01em;color:var(--text-dim);border-bottom:1px solid var(--border-color);background:rgba(255,255,255,.6) } .price-table th.text-right{text-align:right} .price-table td{padding:.625rem .75rem;border-bottom:1px solid var(--border-subtle)} .price-table tr:last-child td{border-bottom:none} .price-table td.num{font-family:var(--font-mono);font-weight:700;text-align:right;white-space:nowrap} @media print{ body{background:#fff} .glass-panel,.glass-card,.glass-flat{background:#fff;backdrop-filter:none} header,footer .no-print{display:none} } /* ========================================================== News / blog ========================================================== */ .post-content{color:#334155;font-size:1rem;line-height:1.7;max-width:65ch} .post-content p{margin:0 0 1rem} .post-content h2{font-weight:700;font-size:1.25rem;color:#0f172a;margin:1.75rem 0 .5rem} .post-content h3{font-weight:700;font-size:1rem;color:#0f172a;margin:1.25rem 0 .375rem} .post-content ul{margin:0 0 1rem;padding-left:1.15rem} .post-content li{margin-bottom:.35rem} .post-content a{color:#b45309;text-decoration:underline} .post-content a:hover{color:#d97706} .post-content strong{font-weight:700;color:#0f172a} .post-content hr{border:0;border-top:1px solid var(--border-subtle);margin:1.75rem 0} .post-content figure{margin:1.25rem 0} .post-content figure img{border-radius:8px;border:1px solid var(--border-color);width:100%} .post-content figcaption{font-size:.75rem;color:var(--text-dim);margin-top:.375rem} .post-content .glass-flat{max-width:none} /* Immagini dei post a schermo intero con un click (28/09/2026). Le immagini gia' dentro un link (es. la copertina di un magazine che porta al PDF) restano escluse in js/site.js: quel click serve gia' a qualcos'altro. */ .post-img-zoomabile{cursor:zoom-in} .post-lightbox{ position:fixed;inset:0;z-index:100; display:flex;align-items:center;justify-content:center; background:rgba(47,64,80,.94);padding:24px; opacity:0;visibility:hidden;transition:opacity .2s ease; } .post-lightbox.aperta{opacity:1;visibility:visible} .post-lightbox-img{ max-width:100%;max-height:100%;object-fit:contain; cursor:zoom-out;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5); } body.lightbox-aperta{overflow:hidden} /* Icone di condivisione social in fondo a ogni post (28/09/2026): Facebook e "copia link" (nessun account/SDK esterno, solo un URL di sharer e la Clipboard API - gestita in js/site.js). */ .post-condividi{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--border-subtle); } .post-condividi-label{font-size:.8rem;color:var(--text-muted);font-weight:600} .post-condividi-icona{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:999px;flex:0 0 auto; background:#f1f5f9;color:#475569;border:none;cursor:pointer;padding:0; text-decoration:none;transition:background .15s ease,color .15s ease; } .post-condividi-icona svg{width:16px;height:16px;fill:currentColor} a.post-condividi-icona:hover{background:#1877f2;color:#fff} .post-copia-link:hover{background:#d97706;color:#fff} .post-copia-link-conferma{ font-size:.75rem;color:#16a34a;font-weight:600; opacity:0;transition:opacity .2s ease; } .post-copia-link-conferma.visibile{opacity:1} /* Scheda news */ .news-card{display:block;text-decoration:none} .news-card .news-cover{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:8px;border:1px solid var(--border-color);margin-bottom:.75rem} .news-date{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--t-scuro,#b45309);letter-spacing:.03em} .news-title{font-weight:700;font-size:1.05rem;color:#0f172a;margin:.25rem 0 .375rem;line-height:1.25} .news-excerpt{font-size:.85rem;color:#475569;line-height:1.5} .news-year{font-weight:700;font-size:1.5rem;color:transparent;-webkit-text-stroke:1.2px #d97706} /* ========================================================== Codice colore delle tappe (ripreso dalle grafiche ufficiali) Ogni blocco con classe .tappa-N eredita --t (colore pieno) e --t-scuro (versione leggibile su fondo chiaro). ========================================================== */ .tappa-1{--t:#1CB3BE;--t-scuro:#0E7C85;--t-tint:rgba(28,179,190,.12)} /* Bormida */ .tappa-2{--t:#0A744C;--t-scuro:#0A744C;--t-tint:rgba(10,116,76,.12)} /* Alpi Marittime*/ .tappa-3{--t:#FAA741;--t-scuro:#B26A0C;--t-tint:rgba(250,167,65,.16)} /* Langhe */ .tappa-4{--t:#F0596C;--t-scuro:#C22F43;--t-tint:rgba(240,89,108,.12)} /* Roero */ /* barra colorata in cima al pannello, come .gold-top ma col colore della tappa */ .tappa-top{position:relative} .tappa-top::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--t,#f59e0b) 18%,var(--t,#fbbf24) 82%,transparent); border-radius:8px 8px 0 0; } .tappa-top:hover{border-color:var(--t,rgba(217,119,6,.4))} /* Sfondo tinteggiato col colore della tappa, solo per le 4 card della home "Le quattro tappe" (25/09/2026, su richiesta di Alberto) — non per le news-card, che condividono le classi .tappa-N solo per barra/data colorate e restano col fondo bianco. Tinta leggera (non a piena saturazione) per mantenere leggibile il testo scuro sopra. */ .tappa-card-tinta{background:var(--t-tint,transparent)} /* pallino colorato nei link di navigazione fra le tappe */ .chip-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:999px;background:var(--t,#d97706);margin-right:.1rem} /* etichetta colorata della tappa */ .tappa-tag{ display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:999px;color:#fff;background:var(--t,#d97706); } /* Link "Segui la tappa live" nei box tappa, home e Il Giro (25/09/2026): punta a followmychallenge.com, come sul vecchio sito Wix. Pallino rosso pulsante per richiamare una diretta, testo nel colore scuro della tappa. */ .tappa-live-link{ display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem; font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.01em; color:var(--t-scuro,#b45309);text-decoration:none; } .tappa-live-link:hover{text-decoration:underline} .tappa-live-link::before{ content:'';width:.5rem;height:.5rem;flex:0 0 auto;border-radius:999px;background:#ef4444; animation:tappa-live-pulse 1.6s infinite; } @keyframes tappa-live-pulse{ 0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)} 70%{box-shadow:0 0 0 6px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} } /* Link "Classifiche di tappa (PDF)" nei box tappa di Il Giro (25/09/2026): punta al PDF già presente in doc/2026/classifiche/. Stesso stile testuale di .tappa-live-link ma senza il pallino pulsante (non è una diretta). */ .tappa-doc-link{ display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem; font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.01em; color:var(--t-scuro,#b45309);text-decoration:none; } .tappa-doc-link:hover{text-decoration:underline} /* ========================================================== Home: hero, bande fotografiche, video ========================================================== */ /* --- HERO: logo, claim e pulsanti su sfondo cemento del sito (24/09/2026: non ha piu' foto proprie, ora piu' compatto — le foto sono nella fascia carosello subito sotto) --- */ .hero{ position:relative;display:flex;align-items:center;justify-content:center; padding:clamp(40px,7vw,76px) 24px clamp(32px,5vw,56px); } .hero-inner{position:relative;z-index:1;width:100%;max-width:80rem;margin:0 auto;text-align:center} .hero-logo{width:min(552px,93.6vw);margin:0 auto 18px} .hero-claim{ color:var(--text-main);font-family:var(--font-sans);font-weight:600;margin:0 0 10px;line-height:1.15; font-size:20px; /* +2px poi altri +2px su richiesta di Alberto (era 1rem = 16px) */ } .hero-meta{ /* font-weight:700 = CabritoConBol.ttf (vedi i @font-face in cima al file): e' gia' il vero file Bold della famiglia Cabrito, non un nero sintetico. */ color:var(--text-main);font-family:var(--font-sans);font-weight:700;font-size:clamp(16px,2.4vw,26px);letter-spacing:normal; margin:0 0 22px; } .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .logo-meta{ font-family:var(--font-sans);font-weight:700; /* +2px su richiesta di Alberto (29/09/2026) rispetto alle utility condivise .text-[10px]/.sm:text-xs (10px/12px), che restano invariate per tutto il resto del sito: l'override sta qui, sull'unica classe dedicata a questo elemento, cosi' non tocca nessun altro testo che usa quelle utility. */ font-size:12px;line-height:1.4; } @media (min-width:640px){ .logo-meta{font-size:14px;line-height:1.2} } /* --- Fascia carosello a tutta larghezza, con bordo "strappato" (24/09/2026) --- Le 26 foto che prima erano lo sfondo dell'hero sono ora qui, in una fascia separata a piena larghezza di pagina (fuori dal contenitore max-w-7xl), subito sotto l'hero. I due bordi (sopra/sotto) sono "strappati": due strisce che ridipingono la stessa texture di sfondo del sito (stessa immagine, stesso background-attachment:fixed, per restare perfettamente allineate al resto della pagina) ritagliate con un profilo frastagliato via clip-path. Bordo ispirato alla home di solarites.it. */ .carosello-fascia{position:relative;overflow:hidden;min-height:clamp(320px,42vw,560px);margin-top:-20px} .carosello-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;opacity:0;transition:opacity 1.8s ease-in-out} .carosello-bg.attiva{opacity:1} .carosello-credit{position:absolute;right:14px;bottom:40px;z-index:3;font-size:.68rem;color:rgba(255,255,255,.8);text-decoration:none;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.55)} .carosello-credit:hover{color:#fff;text-decoration:underline} .strappo{ position:absolute;left:0;right:0;height:96px;z-index:2; background-image:url('../img/8DL-Sito-Background_optimized.jpg'); background-size:cover;background-position:center;background-repeat:no-repeat; background-attachment:fixed; -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x; -webkit-mask-size:620px 96px;mask-size:620px 96px; } .strappo-top{ top:0; -webkit-mask-image:url('../img/strappo-top-mask.png');mask-image:url('../img/strappo-top-mask.png'); -webkit-mask-position:top left;mask-position:top left; filter:drop-shadow(0 3px 3px rgba(15,23,42,.22)); } .strappo-bottom{ bottom:0; -webkit-mask-image:url('../img/strappo-bottom-mask.png');mask-image:url('../img/strappo-bottom-mask.png'); -webkit-mask-position:bottom left;mask-position:bottom left; filter:drop-shadow(0 -3px 3px rgba(15,23,42,.22)); } /* --- bande fotografiche con testo in sovraimpressione --- */ .banda{ position:relative;display:flex;align-items:flex-end;overflow:hidden; border-radius:8px;border:1px solid var(--border-color); min-height:clamp(280px,36vw,420px); } .banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* --- banda-video: variante con video di sfondo invece di una foto (es. "Il territorio", 24/09/2026). L'iframe di YouTube non supporta object-fit, quindi lo ingrandiamo e centriamo via JS (site.js, dimensionaVideoBanda) in base al rapporto tra il riquadro e il 16:9 del video, poi lo ritagliamo con overflow:hidden. pointer-events:none lo rende non interagibile (niente click, niente comandi da tastiera): autoplay, muto, in loop. */ .banda-video-embed{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#2f4050} .banda-video-embed iframe{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); border:0;pointer-events:none; } .banda-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.1rem} .banda::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(47,64,80,.85) 0%,rgba(47,64,80,.55) 45%,rgba(47,64,80,.05) 100%); } /* 25/09/2026: su richiesta di Alberto, il filtro scuro sopra non si vede piu' sulla variante "Il territorio" col video di sfondo. */ .banda-video::after{background:none} /* 28/09/2026: su mobile YouTube spesso non parte in autoplay e mostra la sua grafica statica sopra al video, rendendo illeggibile il testo della banda "Il territorio". Sotto i 768px sostituiamo il video con una foto fissa (img/foto/galleria-09.jpg) e ripristiniamo il velo scuro (rimosso sopra solo per la variante video) perche' su una foto serve per leggere il testo. */ .banda-video-poster{display:none} @media (max-width:767px){ .banda-video-embed{display:none} .banda-video-poster{ display:block;position:absolute;inset:0; width:100%;height:100%;object-fit:cover; } .banda-video::after{ background:linear-gradient(90deg,rgba(47,64,80,.85) 0%,rgba(47,64,80,.55) 45%,rgba(47,64,80,.05) 100%); } } .banda-destra::after{ background:linear-gradient(270deg,rgba(47,64,80,.85) 0%,rgba(47,64,80,.55) 45%,rgba(47,64,80,.05) 100%); } .banda-destra{justify-content:flex-end} .banda-testo{position:relative;z-index:1;padding:clamp(22px,3vw,40px);max-width:34rem;color:#fff} .banda-testo h2{font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.1;margin-bottom:.6rem;text-shadow:0 2px 14px rgba(0,0,0,.5)} .banda-testo p{color:rgba(255,255,255,.93);font-size:.95rem;line-height:1.6;margin:0} .banda-kicker{ display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em; color:#fcd34d;margin-bottom:.5rem; } /* --- foto nelle schede dei tre pilastri --- */ .pilastro-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--border-color);margin-bottom:.875rem} /* --- video: anteprima statica, YouTube caricato solo al clic --- */ .video-facade{ position:relative;display:block;width:100%;overflow:hidden;cursor:pointer; border-radius:8px;border:1px solid var(--border-color);aspect-ratio:16/9;background:#2f4050; } .video-facade img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.16,1,.3,1)} .video-facade:hover img{transform:scale(1.03)} .video-facade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,64,80,.25),rgba(47,64,80,.45))} .video-play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem} .video-play .tasto{ width:68px;height:68px;border-radius:999px;background:rgba(217,119,6,.94); display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(0,0,0,.4); transition:transform .2s; } .video-facade:hover .tasto{transform:scale(1.06)} .video-play .etichetta{color:#fff;font-weight:700;font-size:.85rem;text-shadow:0 2px 12px rgba(0,0,0,.6);text-align:center;padding:0 1rem} .video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* --- patrocinatori nel pie' di pagina --- */ /* patrocinatori: una colonna del pie' di pagina come le altre, con il titolo in

uguale a "Contatti" e "Seguici" */ .patrocini{display:flex;align-items:center;flex-wrap:wrap;gap:16px} .patrocini img{height:46px;width:auto;opacity:.9;transition:opacity .2s} .patrocini a:hover img{opacity:1} @media (max-width:640px){ .patrocini img{height:42px} } /* ========================================================== Pagine: Albo d'Oro, Foto, Partner, Area Stampa ========================================================== */ /* elenco di documenti scaricabili */ .doc-riga{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.85rem 0;border-top:1px solid var(--border-subtle);text-decoration:none; } .doc-riga:first-of-type{border-top:none} .doc-riga .nome{font-weight:700;color:#0f172a;font-size:.95rem} .doc-riga .meta{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim)} .doc-riga:hover .nome{color:#b45309} /* galleria fotografica */ .galleria{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem} @media (min-width:768px){ .galleria{grid-template-columns:repeat(3,1fr)} } .galleria img{ width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px; border:1px solid var(--border-color);transition:transform .35s cubic-bezier(.16,1,.3,1); } .galleria a:hover img{transform:scale(1.02)} /* citazioni di Egle Sebaste (pagina Dario Sebaste) */ .citazione-egle{ background:var(--accent-gold-light); border-left:3px solid var(--accent-gold); border-radius:0 12px 12px 0; padding:1rem 1.25rem; margin:0; } .citazione-egle p{ font-style:italic;font-size:.9rem;color:#334155;margin:0 0 .6rem;line-height:1.5; } .citazione-egle footer{font-size:.75rem;font-weight:700;color:#92400e;font-style:normal} /* loghi dei partner */ .griglia-partner{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} @media (min-width:640px){ .griglia-partner{grid-template-columns:repeat(3,1fr)} } @media (min-width:1024px){ .griglia-partner{grid-template-columns:repeat(4,1fr)} } .scheda-partner{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem; text-align:center;text-decoration:none;padding:1.1rem .75rem;min-height:140px; } .scheda-partner img{max-height:74px;width:auto;object-fit:contain;mix-blend-mode:multiply} /* i due loghi dei club promotori alla stessa altezza */ .scheda-partner img[src$="amici-vecchie-moto.png"], .scheda-partner img[src$="partner/ruote-epoca-cherasco.png"]{height:89px;max-height:89px} .scheda-partner .nome{font-weight:700;font-size:.82rem;color:#334155;line-height:1.2} .scheda-partner:hover .nome{color:#b45309} /* riga di edizione nell'albo d'oro */ .edizione{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--border-subtle)} .edizione:first-of-type{border-top:none} .edizione .anno{font-weight:700;font-size:1.6rem;color:transparent;-webkit-text-stroke:1.3px #d97706;min-width:7rem} .edizione .azioni{display:flex;flex-wrap:wrap;gap:.6rem} /* mappe di tappa: compatte, a fianco del testo, cliccabili per ingrandire */ .mappa-link{display:block;text-decoration:none} .mappa-tappa{display:block;width:100%;max-height:360px;object-fit:contain; border-radius:8px;border:1px solid #e2e8f0;background:#fff} .mappa-nota{display:block;margin-top:6px;text-align:center;font-size:11px; color:#64748b} .mappa-link:hover .mappa-nota{color:var(--t-scuro,#b45309)} @media (max-width:1023px){.mappa-tappa{max-height:420px}} /* riquadri di apertura con un disegno di sfondo (News, Il Giro) */ .hero-illustrato{position:relative;overflow:hidden} .hero-illustrato>*{position:relative;z-index:1} .hero-illustrato .illustrazione{position:absolute;z-index:0;right:-2rem; top:50%;transform:translateY(-50%); width:min(50%,500px);height:auto;max-height:125%;object-fit:contain;opacity:.5; pointer-events:none;user-select:none} .hero-illustrato .illustrazione.piccola{width:min(38%,380px);right:-1rem} .hero-illustrato .illustrazione.minuta{width:min(24%,260px);right:1.5rem;max-height:85%} /* la stretta di mano e' molto larga: sta bene un po' piu' contenuta */ .hero-illustrato .illustrazione[src$="stretta-di-mano.png"]{width:min(32%,320px)} /* ancorato in alto: lascia aria sopra e si fa tagliare in basso dal riquadro */ .hero-illustrato .illustrazione.alto{top:1.125rem;transform:none;max-height:none;right:1.5rem;width:min(22%,230px)} @media (max-width:767px){ /* su telefono il disegno esce dallo sfondo e si affianca al titolo; il testo e i pulsanti vanno sotto, a tutta larghezza */ .hero-illustrato{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem} .hero-illustrato>*{width:100%;order:3} .hero-illustrato>h1{order:1;width:auto;flex:1 1 0;min-width:0} /* margin-right:100% manda a capo quello che segue, lasciando il chip da solo; se il chip apre la sezione sta sopra al titolo, altrimenti subito sotto */ .hero-illustrato>.year-chip, .hero-illustrato>p>.year-chip{width:auto;flex:0 0 auto;white-space:nowrap} .hero-illustrato>.year-chip{order:2;margin-right:100%} .hero-illustrato>.year-chip:first-child{order:0} .hero-illustrato>p.riga-chip{order:2} .hero-illustrato>p{order:3} .hero-illustrato>div{order:4} .hero-illustrato .illustrazione, .hero-illustrato .illustrazione.piccola, .hero-illustrato .illustrazione.minuta{ position:static;transform:none;right:auto;order:1; flex:0 0 32%;width:32%;margin:0;opacity:.9} } /* ========================================================== Sito classifiche integrato — stili aggiuntivi (23/09/2026) Classi usate dalle schede pilota e dalla finestra di dettaglio del cruscotto classifiche (Albo d'Oro), riprese identiche da 8DL Sito Classifiche/Deployment/css/style.css. ========================================================== */ .glass-card:hover .portrait-img{transform:scale(1.04)} .glow-red{box-shadow:0 0 12px rgba(239,68,68,.3)} .glow-cyan{box-shadow:0 0 12px rgba(8,145,178,.3)} .modal-enter{animation:fadeIn .2s ease-out forwards} .modal-content-enter{animation:scaleUp .25s cubic-bezier(.16,1,.3,1) forwards} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes scaleUp{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}} .winner-card-border{position:relative} .winner-card-border::after{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#f59e0b,#fbbf24,transparent); border-radius:8px 8px 0 0; } .portrait-container{ aspect-ratio:3/4;width:100%;position:relative;overflow:hidden; background:radial-gradient(circle at center,#e2e8f0,#cbd5e1);border-radius:8px 8px 0 0; } .portrait-img{ width:100%;height:100%;object-fit:cover;object-position:center 15%; transition:transform .4s cubic-bezier(.16,1,.3,1); } .portrait-overlay{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(47,64,80,.08) 0%,transparent 35%,rgba(255,255,255,.35) 80%,rgba(255,255,255,.92) 100%); } .modal-portrait-frame{ aspect-ratio:3/4;max-height:460px;width:100%; background:radial-gradient(circle at center,#e2e8f0 0%,#cbd5e1 100%); border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center; box-shadow:0 16px 36px rgba(15,23,42,.15);border:1px solid var(--border-color); } .modal-portrait-img{width:100%;height:100%;object-fit:contain;border-radius:8px} .thumbnail-portrait{aspect-ratio:3/4;height:4.5rem;border-radius:8px;overflow:hidden;flex-shrink:0} /* Rassegna stampa: schede invece di elenco (23/09/2026) */ .scheda-rassegna{display:flex;flex-direction:column;gap:.65rem;text-decoration:none;height:100%} .scheda-rassegna-riga{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .scheda-rassegna .nome{font-weight:700;color:#0f172a;font-size:1rem;line-height:1.3} .scheda-rassegna .meta{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim)} .scheda-rassegna .riassunto{font-size:.85rem;color:var(--text-dim);line-height:1.45;flex-grow:1} .scheda-rassegna .apri{font-size:.8rem;font-weight:700;color:#b45309;margin-top:auto} .scheda-rassegna:hover .apri{text-decoration:underline} /* Banner cookie / consenso Google Analytics (24/09/2026) */ .banner-cookie{ position:fixed;left:0;right:0;bottom:0;z-index:80; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); } .banner-cookie-box{ max-width:64rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem; padding:1rem 1.25rem; } .banner-cookie p{font-size:.85rem;color:var(--text-dim);line-height:1.5;flex:1 1 20rem;margin:0} .banner-cookie p a{color:#b45309;text-decoration:underline} .banner-cookie-azioni{display:flex;gap:.6rem;flex-shrink:0} .banner-cookie .btn{padding:.5rem 1.1rem;font-size:.8rem} /* 24/09/2026: su mobile/touch avevamo messo "background-attachment:scroll" pensando che fosse "fixed" a causare lo sfondo sgranato durante lo scroll (il telefono deve ridisegnare tutto lo sfondo a ogni fotogramma). Il 25/09/2026 Alberto ha segnalato che sul suo telefono e' vero il contrario: e' proprio lo sfondo che "scorre" con la pagina a risultare sgranato, mentre da fermo (ancorato allo schermo) e' nitido. Il 25/09/2026 stesso pero' e' emerso che sul suo telefono lo sfondo restava sgranato anche a sito ripubblicato con "background-attachment:fixed" corretto e online: il problema e' che quella proprieta' non e' affidabile su mobile Safari (iOS), che spesso non la rispetta indipendentemente dal CSS. Lo sfondo del body ora e' quindi realizzato con "body::before{position:fixed;...}" (vedi sopra, vicino alla regola "body{}") invece che con "background-attachment:fixed": stesso risultato visivo (sfondo ancorato al viewport, i contenuti scorrono sopra) ma con una tecnica che i browser mobile rispettano davvero. Le due strisce ".strappo" restano invece con l'immagine a tinta piatta introdotta allora (vedi sotto): non c'entrano col problema del body, ma usano ancora "background-attachment:fixed" per conto proprio (per restare allineate alla stessa texture), e su mobile quella proprieta' resta comunque costosa in termini di performance per una striscia che tanto e' troppo sottile perche' si noti la differenza. Se lo sfondo dovesse tornare sgranato in futuro, il problema NON e' piu' "fixed" vs "scroll" (gia' risolto con la tecnica sopra): va indagato altrove (es. le dimensioni/il peso del file immagine). */ @media (max-width:900px), (pointer:coarse){ /* Con "fixed" disattivato la striscia non riesce piu' a "continuare" esattamente la stessa immagine dello sfondo pagina (senza JS che calcoli l'esatta posizione, mostrerebbe un pezzetto leggermente disallineato della texture). Il 25/09/2026 avevamo provato a risolvere con un colore piatto (la media della texture), ma su schermo si vedeva come una fascia grigia uniforme ben visibile, stonata rispetto alla texture vera (che e' un cemento chiaro pieno di graffi/puntini, non un grigio piatto) proprio nel punto (il bordo "strappato") dove l'occhio guarda di piu'. Usiamo quindi di nuovo la stessa immagine vera dello sfondo (gia' scaricata dal browser per il body, quindi costo zero in piu') con "background-size:cover" e attacco normale (non "fixed"): il crop non sara' perfettamente allineato pixel per pixel con lo sfondo intorno, ma essendo una texture "rumorosa" senza soggetto riconoscibile il disallineamento non si nota, mentre il colore piatto sì. */ .strappo{ background-image:url('../img/8DL-Sito-Background_optimized.jpg'); background-size:cover;background-attachment:scroll; } } /* Raggio angoli unificato a 8px in tutto il sito (25/09/2026, prima testato solo in home poi confermato da Alberto ed esteso a tutte le pagine): card, pannelli, pulsanti, menu, foto, mappe, copertine news e le barre decorative in cima ai pannelli (.gold-top/.tappa-top/.winner-card-border) sono impostati direttamente nelle rispettive regole più sopra e in utilities.css (.rounded-2xl/.rounded-xl), quindi qui non serve più nessuna regola scoperta solo per la home. */ /* Raggio 5px solo sull'evidenziazione arancione della scheda attiva nel menu del cruscotto classifiche (Albo d'Oro): selettore per id, così vince sempre sulla classe .rounded-xl di Tailwind qualunque sia l'ordine di caricamento (25/09/2026, su richiesta di Alberto: stesso trattamento del menu principale). Si applica a tutti i 6 pulsanti della barra (solo quello attivo ha davvero lo sfondo arancione, gli altri sono trasparenti quindi il raggio non si nota). */ #tab-rankings,#tab-hof,#tab-squadre,#tab-riders,#tab-compare,#tab-curiosities{ border-radius:5px; } /* Telefoni stretti (375 px): logo + testo + hamburger sforavano di 3 px; spazi ridotti */ @media (max-width:400px){ header.sticky>div{gap:.5rem} header.sticky>div>a{gap:.5rem} } /* ---------- Header 2027 (condiviso) ---------- Colore pieno, nessun vetro né ombra; link piatti, la pagina corrente è segnata da una banda inclinata (12°, come le strisce del logo); in basso le quattro strisce nei colori delle tappe. I margini sono gli stessi della home (--m). */ .sito-header{position:sticky;top:0;z-index:30;background:#f6f7f7;color:#0f1b24} .sito-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:1680px;margin:0 auto;min-height:74px;padding:10px clamp(16px,3vw,44px) 12px} .sito-header .logo-meta{color:#0f1b24;font-size:12px} @media (min-width:640px){.sito-header .logo-meta{font-size:14px}} .sito-header #nav-principale{background:none;border:0;padding:0;min-width:0} .sito-header .nav-link{position:relative;isolation:isolate;padding:.5rem 1rem;border-radius:0;background:none; font-size:15px;font-weight:700;color:#0f1b24;font-family:inherit} .sito-header .nav-link::before{content:'';position:absolute;inset:5px 3px;z-index:-1;background:transparent; transform:skewX(-12deg);transition:background-color .2s} .sito-header .nav-link:hover{background:none;color:#000} .sito-header .nav-link:hover::before{background:#e1e5e8} .sito-header .nav-link.active{background:none;color:#0f1b24} .sito-header .nav-link.active::before{background:#FAA741} .sito-header .nav-link:focus-visible{outline:3px solid #2f4050;outline-offset:2px} .sito-header .nav-piu-menu{border-radius:0;border:0;background:#fff} .sito-header .nav-piu-menu .nav-link{padding:.6rem 1rem} .burger-btn{place-items:center;width:48px;height:48px;background:none;border:0;cursor:pointer} @media (max-width:767.98px){.burger-btn{display:grid}} @media (min-width:768px){.burger-btn{display:none}} .burger{display:grid;gap:5px;width:26px} .burger i{display:block;height:3px;background:#2f4050} .sito-menu-mobile{padding:8px clamp(16px,3vw,44px) 22px;gap:2px;background:#f6f7f7} .sito-menu-mobile .nav-link{font-size:20px;padding:.7rem 1rem} .sito-strisce{position:absolute;left:0;right:0;bottom:0;height:6px;display:flex} .sito-strisce i{flex:1} .sito-strisce i:nth-child(1){background:#1CB3BE} .sito-strisce i:nth-child(2){background:#0A744C} .sito-strisce i:nth-child(3){background:#FAA741} .sito-strisce i:nth-child(4){background:#F0596C} /* ---------- Footer 2027 (condiviso) ---------- Si riconosce ancora dal tag