/* Palette dal LOGO: antracite #515151 (GUERRIERI) + azzurro #00A4FF (VISUAL). Interfaccia tenuta monocroma di proposito: il colore lo portano video e foto. */ :root{--bg:#08080A;--ink:#F4F2EC;--muted:#9A9AA2;--muted2:#54545C;--cy:#00A4FF;--cy2:#4FC3FF; --line:rgba(244,242,236,.16);--soft:rgba(244,242,236,.08); --sans:"Inter",sans-serif;--disp:"Bricolage Grotesque",sans-serif;--mono:"JetBrains Mono",monospace;} *{box-sizing:border-box;margin:0;padding:0} /* Il blocco dello scroll vale solo per la home/reel a tutto schermo. Le pagine interne (foto, cover, contatti, legali) scorrono normalmente. La classe .reel viene messa da PHP su . */ html{height:100%} html.reel,html.reel body{height:100%;overflow:hidden} body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none}::selection{background:var(--cy);color:#fff} .mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} :focus-visible{outline:2px solid var(--cy);outline-offset:3px} /* header */ .top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between; padding:22px clamp(20px,4vw,52px); border-bottom:1px solid transparent; transition:transform .34s cubic-bezier(.2,.7,.2,1),padding .25s ease,background .25s ease,border-color .25s ease; will-change:transform} /* Appena si stacca dall'alto diventa una barra vera: fondo scuro sfocato e filo di separazione. Sulle griglie a tutta larghezza le immagini passano sotto l'header, e senza fondo il logo finiva sopra uno scafo bianco. */ /* Fondo PIENO, non traslucido. Con la sfocatura le immagini continuavano a trasparire attraverso header e barra filtri insieme, e i due si leggevano come un unico pasticcio invece che come due strisce distinte. */ .top.is-solid{background:#08080A; border-bottom-color:var(--line);padding-top:13px;padding-bottom:13px} /* Scorrendo verso il basso si toglie di mezzo: su un portfolio lo schermo deve essere tutto per le immagini. Torna appena si risale o ci si ferma. */ .top.is-hidden{transform:translateY(-100%)} /* FIX 13: header ingrandito e reso leggibile su qualsiasi frame. La nav diventa una pillola con blur, stesso trattamento delle frecce del carosello. */ .logo-link{display:block;line-height:0} .logo{height:30px;width:auto;display:block; filter:drop-shadow(0 1px 8px rgba(0,0,0,.6))} nav.main{display:flex;gap:2px;padding:4px;border-radius:100px; background:rgba(8,8,10,.40);border:1px solid var(--line);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)} nav.main a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.74);padding:10px 16px;border-radius:100px;transition:.25s} nav.main a:hover{color:var(--ink);background:rgba(244,242,236,.08)} nav.main a.active{color:#fff;background:var(--cy);box-shadow:0 6px 20px -8px var(--cy)} /* Pulsante WhatsApp. Verde ufficiale #25D366 e simbolo bianco: e' l'accostamento previsto dalle linee guida del marchio, che chiedono di non ricolorarlo. Nella barra e' l'unico elemento pieno oltre alla voce attiva, quindi si legge subito come l'azione da fare. */ nav.main a.nav-wa{display:inline-flex;align-items:center;gap:8px; color:#fff;background:#25D366;box-shadow:0 6px 20px -9px #25D366} nav.main a.nav-wa:hover{background:#1FBE5A;color:#fff} .ico-wa{width:16px;height:16px;flex:none;display:block} /* Nel drawer il fondo e' scuro: il simbolo resta verde e la cornetta viene ritagliata nel colore della pagina, non nel verde. */ .drawer nav a .dl{display:inline-flex;align-items:center;gap:14px;min-width:0} .drawer nav a.drawer-wa{color:#25D366} .drawer nav a.drawer-wa::after{content:"\2197"} /* freccia in uscita: porta fuori dal sito */ .drawer nav a.drawer-wa .ico-wa{width:22px;height:22px} .menu-btn{display:none;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:0 18px;height:44px;border-radius:100px;cursor:pointer; background:rgba(8,8,10,.40);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)} /* se il browser non supporta il blur, si compensa con più opacità */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ nav.main,.menu-btn{background:rgba(8,8,10,.72)}} /* velo dedicato dietro l'header: separa il menu dalla foto senza scurire tutto il frame */ /* Il velo esiste solo sul reel, dove l'header galleggia su una foto a tutto schermo. Sulle pagine che scorrono lo sostituisce lo stato solido: tenerlo significherebbe una fascia scura fissa che scurisce la cima delle immagini mentre passano. */ .topveil{display:none} html.reel .topveil{display:block;position:fixed;inset:0 0 auto 0;height:170px;z-index:35;pointer-events:none; background:linear-gradient(to bottom,rgba(8,8,10,.70),rgba(8,8,10,.26) 55%,transparent)} /* menu mobile (FIX 8: prima il bottone non faceva nulla) FIX 14: passa da Bricolage display a JetBrains Mono uppercase, cioè la stessa lingua della nav desktop, delle didascalie e dei numeri sulle miniature. Il display face resta riservato al numerone del frame, che è il segno forte della pagina. */ /* ATTENZIONE a justify-content:center qui: su un contenitore che scorre, quando il contenuto supera l'altezza dello schermo la parte in alto finisce fuori e non e' raggiungibile nemmeno scorrendo. Con cinque voci piu' il footer succede gia' su uno schermo da 568px. I margini automatici centrano quando c'e' spazio e cedono quando non ce n'e'. */ .drawer{position:fixed;inset:0;z-index:50;background:rgba(8,8,10,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); display:none;flex-direction:column;justify-content:flex-start;align-items:stretch; padding:88px clamp(20px,7vw,52px) clamp(24px,5vw,40px);overflow-y:auto; overscroll-behavior:contain} .drawer.open{display:flex} .drawer nav{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:auto} .drawer nav a{display:flex;align-items:center;justify-content:space-between;gap:14px; font-family:var(--mono);font-size:clamp(15px,4.2vw,19px);letter-spacing:.16em;text-transform:uppercase; color:var(--ink);padding:22px 2px;border-bottom:1px solid var(--line);transition:.2s; min-height:64px} .drawer nav a::after{content:"→";color:var(--muted2);font-size:.95em;transition:.2s} .drawer nav a.active,.drawer nav a.active::after{color:var(--cy)} .drawer nav a:active{background:rgba(244,242,236,.05)} .drawer .close{position:absolute;top:20px;right:clamp(20px,4vw,52px);font-family:var(--mono);font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:0 18px;height:44px; display:flex;align-items:center;border-radius:100px;background:none;cursor:pointer} .drawer-foot{margin-top:34px;margin-bottom:auto;display:flex;flex-direction:column;gap:9px; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)} .drawer-foot a{color:var(--muted)}.drawer-foot a:hover{color:var(--cy)} .drawer-foot .mail{font-size:12px;letter-spacing:.1em;color:var(--ink);text-transform:none} /* stage */ .stage{position:fixed;inset:0;overflow:hidden;background:var(--bg)} .fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center; background:radial-gradient(120% 90% at 50% 30%,#17171d,#08080A);color:var(--muted2)} .fallback .fbn{font-family:var(--disp);font-weight:800;font-size:34vw;line-height:1;opacity:.14} /* FIX 1+3: i layer partono da un pixel trasparente e lo z-index viene alzato via JS sul frame in ingresso, così la dissolvenza non passa mai per il nero */ .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1; transition:opacity .9s ease;will-change:opacity} .layer.show{opacity:1} .layer.kb{animation:kb 12s ease-out forwards} /* FIX 9: scrim più leggero in alto, prima la fascia scura si leggeva come un rettangolo */ .scrim{position:absolute;inset:0;z-index:10;pointer-events:none; background:linear-gradient(to top,rgba(8,8,10,.92) 2%,rgba(8,8,10,.38) 32%,rgba(8,8,10,.10) 62%,rgba(8,8,10,.18) 100%)} .scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.55),transparent 52%)} /* content overlay */ .ui{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end; padding:0 clamp(20px,4vw,52px) clamp(20px,3vw,34px);pointer-events:none} .ui > *{pointer-events:auto} .meta{max-width:900px;margin-bottom:clamp(20px,3vw,30px)} .eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:18px} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy);animation:blink 1.6s steps(1) infinite} .count{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.86; font-size:clamp(70px,15vw,220px);display:flex;align-items:flex-start;gap:.12em} .count .cur{color:var(--ink)}.count .tot{font-size:.24em;color:var(--muted);font-weight:600;margin-top:.5em;letter-spacing:.05em} .line{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px} .play{display:inline-flex;align-items:center;gap:12px;background:var(--cy);color:#fff; font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; padding:15px 24px;border-radius:100px;transition:.25s;box-shadow:0 12px 40px -12px var(--cy)} .play:hover{transform:translateY(-2px);background:var(--cy2)} .play svg{width:13px;height:13px;fill:#fff} .ref{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)} /* FIX 15: riga legale in fondo — copyright, dati societari, credit */ .legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)} .legal a{color:var(--muted2);transition:.25s}.legal a:hover{color:var(--cy)} .legal .sep{opacity:.5} /* filmstrip */ .strip-wrap{display:flex;align-items:center;gap:16px} .arrows{display:flex;gap:8px;flex:none} .arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.4); backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.25s} .arrows button:hover{border-color:var(--cy);color:var(--cy)} .arrows svg{width:16px;height:16px;fill:currentColor} .strip{display:flex;gap:10px;overflow-x:auto;padding:6px 2px;scrollbar-width:none;flex:1; overscroll-behavior-x:contain} .strip::-webkit-scrollbar{display:none} .thumb{position:relative;flex:none;width:120px;aspect-ratio:16/9;border-radius:4px;overflow:hidden; cursor:pointer;opacity:.5;border:1px solid transparent;transition:.3s;background:#141418} .thumb:hover{opacity:.85} .thumb.on{opacity:1;border-color:var(--cy);box-shadow:0 0 0 1px var(--cy),0 8px 24px -8px var(--cy)} .thumb img{width:100%;height:100%;object-fit:cover;display:block} /* FIX 7: il fallback a righe diagonali è visibile subito, così una miniatura che non carica non resta un rettangolo nero pieno */ .thumb .fb{position:absolute;inset:0;z-index:0;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px);color:var(--muted2);font-family:var(--mono);font-size:10px;letter-spacing:.12em} .thumb img{position:relative;z-index:1} .thumb img.dead{display:none} .thumb .n{position:absolute;z-index:2;left:6px;top:5px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#fff;text-shadow:0 1px 4px #000} /* Ultima scheda della striscia: non e' un lavoro, e' la porta per l'archivio. Bordo tratteggiato e niente immagine, cosi' si legge come "altro" e non come un video a cui non e' arrivata l'anteprima. */ .thumb-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; background:none;border:1px dashed var(--line);opacity:1;padding:6px;text-align:center} .thumb-all:hover{opacity:1;border-color:var(--cy);border-style:solid;background:rgba(0,164,255,.07)} .thumb-all .ta-i{font-size:17px;line-height:1;color:var(--cy)} .thumb-all .ta-t{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);line-height:1.3} .thumb-all:hover .ta-t{color:var(--ink)} /* Ultimo lavoro del reel: la scheda in coda si accende, ed e' proprio dove lo sguardo arriva in quel momento. */ .thumb-all.is-end{border-style:solid;border-color:var(--cy); background:rgba(0,164,255,.12);box-shadow:0 0 0 1px var(--cy)} .thumb-all.is-end .ta-t{color:var(--ink)} /* progress line */ .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--soft);z-index:25} .prog i{display:block;height:100%;width:0;background:var(--cy);box-shadow:0 0 10px var(--cy)} @keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}} @keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.2}} @media(max-width:760px){nav.main{display:none}.menu-btn{display:inline-flex} .logo{height:26px}.topveil{height:130px} .legal .full{display:none}.legal{gap:6px;font-size:9px} .thumb{width:92px}.count{font-size:clamp(64px,22vw,120px)}.arrows{display:none}} /* FIX 9: su viewport bassi (landscape mobile, notebook 13") il blocco numerico spingeva fuori schermo la striscia, e con overflow:hidden non si recuperava */ @media(max-height:640px){ .drawer{padding-top:74px} .drawer nav a{padding:15px 2px;min-height:52px;font-size:14px} .drawer-foot{margin-top:22px;gap:7px} .drawer .close{height:38px} } @media(max-height:620px){.count{font-size:clamp(48px,10vh,88px)}.eyebrow{margin-bottom:10px} .line{margin-top:12px}.meta{margin-bottom:14px}.play{padding:11px 18px}.thumb{width:84px} .legal{display:none} /* spazio verticale insufficiente: il copyright resta nel menu */ .drawer{padding-top:80px}} @media(prefers-reduced-motion:reduce){.layer{transition:opacity .2s}.layer.kb{animation:none}.eyebrow .dot{animation:none}} /* ========================================================================= PAGINE INTERNE (foto, cover, contatti, legali) Stessa palette e stessa tipografia della home, ma con scorrimento normale. ========================================================================= */ .doc{max-width:1180px;margin:0 auto;padding:clamp(120px,16vh,180px) clamp(20px,4vw,52px) clamp(60px,8vw,110px)} /* Griglie a tutta larghezza: niente contenitore centrato, niente margini laterali oltre allo spazio fra le colonne. Con tre colonne fisse le miniature crescono da sole. Lo stacco dall'alto e' minore perche' non c'e' piu' il titolo in pagina: lo spazio che serviva a staccarlo dall'header non ha piu' motivo di esserci. */ .doc--full{max-width:none;padding:clamp(88px,11vh,116px) 16px clamp(60px,8vw,110px)} /* Con header e barra filtri entrambi fissi in cima, l'ancoraggio dello scorrimento deve tenerne conto: senza, saltando a un punto della pagina il contenuto finirebbe sotto di loro. */ html{scroll-padding-top:120px} .doc-head{max-width:70ch;margin-bottom:clamp(36px,6vw,64px)} /* Titoli delle pagine interne. Bricolage 800 resta riservato al contatore del reel: è l'unico momento forte del sito e ripeterlo qui lo svuotava. Il titolo passa al mono maiuscolo, cioè la lingua dell'header, delle didascalie e dei numeri sulle miniature. A 44px il mono va stretto di spaziatura, non largo come le etichette da 11px: .04em contro .14em. */ .doc h1{font-family:var(--mono);font-weight:500;text-transform:uppercase; letter-spacing:.04em;line-height:1.12;font-size:clamp(24px,4.2vw,44px);margin:16px 0 20px} .doc .lede{font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:60ch} /* Sottotitoli in Inter: una terza voce calma, per non avere due livelli di mono maiuscolo che si somigliano. */ .doc h2{font-family:var(--sans);font-weight:500;letter-spacing:-.01em;color:var(--ink); font-size:clamp(19px,2.4vw,26px);margin:clamp(34px,5vw,54px) 0 14px} .doc h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:26px 0 10px} .doc p{line-height:1.72;color:var(--muted);margin-bottom:15px;max-width:72ch} .doc ul{margin:0 0 18px 20px;color:var(--muted);line-height:1.72;max-width:72ch} .doc li{margin-bottom:7px} .doc strong{color:var(--ink);font-weight:500} .doc a.inline{color:var(--cy);border-bottom:1px solid rgba(0,164,255,.35);transition:.2s} .doc a.inline:hover{border-bottom-color:var(--cy)} .rule{height:1px;background:var(--line);margin:clamp(34px,5vw,54px) 0} /* griglia lavori (foto / cover) */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .grid.tall{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .cell{position:relative;display:block;overflow:hidden;border-radius:6px;background:#141418; aspect-ratio:16/9;border:1px solid transparent;transition:.3s} .grid.tall .cell{aspect-ratio:2/3} .cell::before{content:"";position:absolute;inset:0;z-index:1; background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px)} .cell img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s} .cell:hover{border-color:var(--cy)} .cell:hover img{transform:scale(1.05)} .cell figcaption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:26px 14px 12px; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink); background:linear-gradient(to top,rgba(8,8,10,.88),transparent); opacity:0;transform:translateY(6px);transition:.3s} .cell:hover figcaption,.cell:focus-visible figcaption{opacity:1;transform:none} .cell .num{position:absolute;z-index:3;left:10px;top:8px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;color:#fff;text-shadow:0 1px 4px #000} /* contatti */ .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:start} .info dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-top:22px} .info dd{font-size:17px;margin-top:6px} .info dd a:hover{color:var(--cy)} .form{display:flex;flex-direction:column;gap:16px;max-width:520px} .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} .field input,.field textarea,.field select{width:100%;background:rgba(244,242,236,.04);color:var(--ink); border:1px solid var(--line);border-radius:6px;padding:14px 15px;font-family:var(--sans);font-size:15px;transition:.2s} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cy);background:rgba(0,164,255,.05)} .field .err{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:#FF6B6B} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;background:var(--cy);color:#fff; font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer; padding:16px 26px;border-radius:100px;transition:.25s;box-shadow:0 12px 40px -12px var(--cy)} .btn:hover{transform:translateY(-2px);background:var(--cy2)} .notice{border:1px solid var(--line);border-left:2px solid var(--cy);border-radius:6px; padding:16px 18px;margin-bottom:26px;color:var(--muted);line-height:1.6} .notice.ok{border-left-color:#3ED598} .notice.ko{border-left-color:#FF6B6B} /* footer pagine interne */ .sitefoot{border-top:1px solid var(--line);padding:26px clamp(20px,4vw,52px) 34px} .sitefoot .legal{margin-top:0;max-width:1180px;margin-left:auto;margin-right:auto} @media(max-width:860px){.cols{grid-template-columns:1fr}} @media(max-width:760px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px} .grid.tall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .doc{padding-top:clamp(100px,14vh,140px)}} /* ========================================================================= ARCHIVIO VIDEO — griglia 1 colonna mobile / 2 tablet / 3 desktop ========================================================================= */ .works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)} @media(max-width:1024px){.works{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.works{grid-template-columns:1fr;gap:18px}} /* Con il contenitore pieno le celle crescono molto: a 1900px una didascalia da 15px sotto un video largo 600px sembrerebbe smarrita. */ @media(min-width:1500px){.works .work-t{font-size:17px}} .work{display:block;color:inherit} .work-media{position:relative;display:block;overflow:hidden;border-radius:6px; aspect-ratio:16/9;background:#141418;border:1px solid transparent;transition:.3s} .work-fb{position:absolute;inset:0;z-index:0; background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px)} .work-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s} .work:hover .work-media{border-color:var(--cy)} .work:hover .work-media img{transform:scale(1.04);opacity:.75} .work-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9); width:54px;height:54px;border-radius:50%;display:grid;place-items:center; background:var(--cy);box-shadow:0 12px 40px -12px var(--cy); opacity:0;transition:.3s} .work-play svg{width:18px;height:18px;fill:#fff;margin-left:2px} .work:hover .work-play,.work:focus-visible .work-play{opacity:1;transform:translate(-50%,-50%) scale(1)} .work-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:12px 2px 0} .work-n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cy)} .work-t{font-size:15px;line-height:1.4;color:var(--ink);flex:1 1 auto;min-width:0} .work-c{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);width:100%} /* paginazione */ .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px; margin-top:clamp(38px,6vw,60px);padding-top:26px;border-top:1px solid var(--line)} .pager-n,.pager-arrow{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px; border:1px solid var(--line);border-radius:100px; font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);transition:.25s} .pager-n:hover,.pager-arrow:hover{border-color:var(--cy);color:var(--cy)} .pager-n.is-on{background:var(--cy);border-color:var(--cy);color:#fff} .pager-arrow.is-off{opacity:.28;pointer-events:none} /* Il salto non e' un pulsante: niente bordo, niente area cliccabile. */ .pager-gap{display:grid;place-items:center;min-width:26px;height:42px; color:var(--muted2);font-family:var(--mono);font-size:12px;letter-spacing:.1em} /* Testo di servizio: con i salti si perde il senso di quanto manca. Riga propria sotto ai numeri, centrata come loro: spinto a destra finiva staccato dal gruppo e a schermo stretto veniva tagliato. */ .pager-info{order:9;width:100%;text-align:center;padding-top:14px; font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)} @media(max-width:560px){ .pager{gap:5px} .pager-n,.pager-arrow{min-width:38px;height:38px;padding:0 9px;font-size:11px} .pager-info{padding-top:12px} } /* CTA verso l'archivio, dentro il reel */ .ghost{display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink); padding:14px 22px;border:1px solid var(--line);border-radius:100px; background:rgba(8,8,10,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.25s} .ghost:hover{border-color:var(--cy);color:var(--cy)} .ghost .cnt{font-size:10px;color:var(--muted);padding-left:10px;border-left:1px solid var(--line)} .ghost:hover .cnt{color:var(--cy)} /* Ultimo lavoro del reel: da contorno diventa pieno, come il pulsante Guarda. */ .ghost.is-end{background:var(--cy);border-color:var(--cy);color:#fff; box-shadow:0 12px 40px -12px var(--cy)} .ghost.is-end .cnt{color:rgba(255,255,255,.75);border-left-color:rgba(255,255,255,.35)} .ghost.is-end:hover{background:var(--cy2);color:#fff} .ghost.is-end:hover .cnt{color:#fff} /* ========================================================================= PLAYER IN OVERLAY — l'iframe nasce solo al clic ========================================================================= */ .lightbox{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;padding:clamp(16px,4vw,48px); background:rgba(8,8,10,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .lightbox[hidden]{display:none} .lb-frame{width:100%;max-width:1200px;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden} .lb-frame iframe{width:100%;height:100%;border:0;display:block} .lb-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center} .lb-close{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,4vw,52px); font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink); border:1px solid var(--line);background:none;padding:0 18px;height:44px;border-radius:100px;cursor:pointer} .lb-close:hover{border-color:var(--cy);color:var(--cy)} /* ========================================================================= STRISCIA MINIATURE SU MOBILE Senza frecce lo scorrimento è l'unica navigazione: va reso evidente. ========================================================================= */ @media(max-width:760px){ /* Niente scroll-snap: con miniature da 92px e allineamento al centro, un trascinamento corto veniva riagganciato alla stessa miniatura e sembrava che la striscia non si muovesse. Scorrimento libero. */ .strip{-webkit-overflow-scrolling:touch;touch-action:pan-x; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 34px),transparent 100%)} .strip-wrap{gap:0} .ghost{padding:12px 18px} } /* ========================================================================= NOTIZIE — elenco Stessa griglia dell'archivio video (1 / 2 / 3 colonne), ma con testo: qui l'immagine accompagna, non è il contenuto. ========================================================================= */ .doc--narrow{max-width:820px} .empty{color:var(--muted);line-height:1.7} .empty small{color:var(--muted2)} .news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)} @media(max-width:1024px){.news{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.news{grid-template-columns:1fr;gap:26px}} .post{display:flex;flex-direction:column} .post-media{position:relative;display:block;overflow:hidden;border-radius:6px; aspect-ratio:16/9;background:#141418;border:1px solid transparent;transition:.3s} .post-fb{position:absolute;inset:0;z-index:0; background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px)} .post-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .post:hover .post-media{border-color:var(--cy)} .post:hover .post-media img{transform:scale(1.04)} .post-body{padding-top:14px} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)} .post-cat{color:var(--cy)} .post-meta .back{color:var(--muted);transition:.25s} .post-meta .back:hover{color:var(--cy)} .post-title{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.7vw,20px); line-height:1.35;letter-spacing:-.01em;margin:0 0 9px} .post-title a{color:var(--ink);transition:.25s} .post-title a:hover{color:var(--cy)} .post-ex{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:46ch} /* ========================================================================= NOTIZIA — articolo ========================================================================= */ .article-head{margin-bottom:clamp(26px,4vw,40px)} /* Titolo in Inter: nelle altre pagine l'H1 è mono maiuscolo perché etichetta una sezione, qui invece è una testata redazionale e può essere lunga. */ .article-title{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;line-height:1.16; font-size:clamp(26px,3.6vw,44px);color:var(--ink);margin:0 0 16px;text-transform:none} .article-hero{margin:0 0 clamp(26px,4vw,40px);border-radius:6px;overflow:hidden;background:#141418} .article-hero img{width:100%;height:auto;display:block} .article-body{font-size:16px;line-height:1.75;color:var(--muted)} .article-body > *:first-child{margin-top:0} .article-body p{margin:0 0 18px} .article-body h2{font-family:var(--sans);font-weight:500;color:var(--ink);letter-spacing:-.01em; font-size:clamp(20px,2.2vw,26px);line-height:1.3;margin:clamp(30px,4vw,44px) 0 12px} .article-body h3{font-family:var(--sans);font-weight:500;color:var(--ink); font-size:clamp(17px,1.8vw,20px);line-height:1.35;margin:28px 0 10px;text-transform:none;letter-spacing:0} .article-body h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:24px 0 9px} .article-body a{color:var(--cy);border-bottom:1px solid rgba(0,164,255,.35);transition:.2s} .article-body a:hover{border-bottom-color:var(--cy)} .article-body strong,.article-body b{color:var(--ink);font-weight:500} .article-body ul,.article-body ol{margin:0 0 20px 22px} .article-body li{margin-bottom:8px} .article-body img{max-width:100%;height:auto;border-radius:6px;display:block} .article-body figure{margin:clamp(24px,3vw,36px) 0} .article-body figcaption{margin-top:10px;font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)} .article-body blockquote{margin:clamp(26px,3vw,36px) 0;padding:4px 0 4px 22px; border-left:2px solid var(--cy);color:var(--ink);font-size:clamp(17px,1.8vw,20px);line-height:1.55} .article-body blockquote p:last-child{margin-bottom:0} .article-body code{font-family:var(--mono);font-size:13px;background:rgba(244,242,236,.07); padding:2px 6px;border-radius:3px;color:var(--ink)} .article-body pre{background:rgba(244,242,236,.05);border:1px solid var(--line);border-radius:6px; padding:16px 18px;overflow-x:auto;margin:0 0 20px} .article-body pre code{background:none;padding:0} .article-body hr{border:0;border-top:1px solid var(--line);margin:clamp(30px,4vw,44px) 0} .article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px} .article-body th,.article-body td{border:1px solid var(--line);padding:10px 12px;text-align:left} .article-body th{color:var(--ink);font-weight:500;background:rgba(244,242,236,.04)} /* i video incorporati da WordPress arrivano in un wrapper con ratio */ .article-body iframe{max-width:100%;border:0;border-radius:6px;aspect-ratio:16/9;width:100%;height:auto} .article-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px; margin-top:clamp(38px,5vw,56px);padding-top:28px;border-top:1px solid var(--line)} .ghost-sm{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:14px 20px;border:1px solid var(--line);border-radius:100px;transition:.25s} .ghost-sm:hover{border-color:var(--cy);color:var(--cy)} /* ========================================================================= GALLERIE — filtri a pastiglia Stessa forma delle frecce del carosello, attiva piena in azzurro. Scorre in orizzontale su mobile. ========================================================================= */ /* Filtri in flusso normale, non appiccicati. Da appiccicati dovevano restare allineati sotto l'header, che invece si nasconde scorrendo: tenere sincronizzate due animazioni a ogni fotogramma produceva sfasamenti a ogni scorrimento. Scorrendo via con la pagina non c'e' piu' niente da sincronizzare, e l'header torna libero di comportarsi come su video. */ .pills{display:flex;gap:8px;overflow-x:auto; padding:0 0 14px;margin:0 0 clamp(18px,2.5vw,26px); border-bottom:1px solid var(--line); scrollbar-width:none;-webkit-overflow-scrolling:touch} .pills::-webkit-scrollbar{display:none} .pill{display:inline-flex;align-items:center;gap:9px;flex:none; padding:11px 18px;border-radius:100px;border:1px solid var(--line); background:rgba(244,242,236,.03);color:var(--muted); font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;transition:.25s;cursor:pointer} .pill:hover{color:var(--ink);border-color:rgba(244,242,236,.28)} .pill.is-on{background:var(--cy);border-color:var(--cy);color:#fff; box-shadow:0 8px 26px -10px var(--cy)} .pill-ico{width:15px;height:15px;flex:none} .pill-n{font-size:9px;opacity:.65;padding-left:8px;border-left:1px solid currentColor} .pill.is-on .pill-n{opacity:.85} @media(max-width:760px){ /* Su telefono le categorie non ci stanno in riga: la fila scorre, e la sfumatura a destra e' l'unico modo per far capire che continua. Mandarle a capo sarebbe stato piu' esplicito, ma tre righe di pastiglie appiccicate sotto l'header mangiano mezzo schermo. */ .pills{padding:0 0 12px; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent 100%); scroll-snap-type:x proximity} .pill{padding:10px 15px;font-size:10px;gap:7px;scroll-snap-align:start} .pill-ico{width:14px;height:14px} .pill-n{padding-left:7px} } /* ========================================================================= GRIGLIA A COLONNE IRREGOLARI Le schede sono in posizione assoluta e le posiziona il JS: senza JavaScript restano in flusso normale, impilate ma leggibili. ========================================================================= */ .doc--wide{max-width:1400px} .mgrid{position:relative;min-height:200px} .mgrid.is-ready .mitem{position:absolute;top:0;left:0} .mitem{display:block;color:inherit;margin-bottom:16px; transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease} .mgrid:not(.is-ready) .mitem{width:100%} .mitem.is-off{opacity:0;pointer-events:none;transform:scale(.96)!important} .mitem-media{position:relative;display:block;overflow:hidden;border-radius:6px; background:#141418;border:1px solid transparent;transition:.3s} .mitem-fb{position:absolute;inset:0;z-index:0; background:repeating-linear-gradient(45deg,#141418,#141418 8px,#17171c 8px,#17171c 16px)} .mitem-media img{position:relative;z-index:1;width:100%;height:auto;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s} .mitem:hover .mitem-media{border-color:var(--cy)} .mitem:hover .mitem-media img{transform:scale(1.03);opacity:.8} .mitem-zoom{position:absolute;z-index:2;left:50%;top:50%; transform:translate(-50%,-50%) scale(.88); width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--cy);color:#fff;box-shadow:0 12px 40px -12px var(--cy); opacity:0;transition:.3s} .mitem-zoom svg{width:20px;height:20px} .mitem:hover .mitem-zoom,.mitem:focus-visible .mitem-zoom{opacity:1;transform:translate(-50%,-50%) scale(1)} .mitem-cap{display:block;padding:11px 2px 0;font-size:14px;line-height:1.45;color:var(--muted); transition:color .25s} .mitem:hover .mitem-cap{color:var(--ink)} /* Cella che non si apre: niente cursore a mano, niente reazione al passaggio del mouse. Un elemento che si illumina al passaggio promette un clic che non arrivera' mai, ed e' peggio che non reagire affatto. */ .mitem.is-static{margin:0;cursor:default} .mitem.is-static:hover .mitem-media{border-color:transparent} .mitem.is-static:hover .mitem-media img{transform:none;opacity:1} .mitem.is-static:hover .mitem-cap{color:var(--muted)} @media(max-width:620px){.mitem-cap{font-size:13px}} /* ========================================================================= PLAYER — modalità foto ========================================================================= */ .lb-frame.is-photo{aspect-ratio:auto;max-height:80vh;width:auto;max-width:100%; background:none;display:flex;align-items:center;justify-content:center} .lb-frame.is-photo img{max-width:100%;max-height:80vh;width:auto;height:auto; display:block;border-radius:6px} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:52px;height:52px;border-radius:50%;border:1px solid var(--line); background:rgba(8,8,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--ink);font-size:17px;cursor:pointer;display:none;place-items:center;transition:.25s} .lb-nav:hover{border-color:var(--cy);color:var(--cy)} .lb-prev{left:clamp(10px,2vw,28px)} .lb-next{right:clamp(10px,2vw,28px)} /* compaiono solo quando la cornice mostra una foto */ .lightbox:has(.lb-frame.is-photo) .lb-nav{display:grid} @media(max-width:620px){ .lb-nav{width:44px;height:44px;bottom:auto;top:auto; top:calc(50% - 22px);background:rgba(8,8,10,.75)} }