/* ============================================================ Mare Group — design system del sito Token dal Figma "2026 Mare Group" (vedi design/design_tokens.md) Stack volutamente semplice: CSS puro, niente framework. ============================================================ */ :root{ /* ============================================================ PALETTE — design system Claudia (design/Mare_Group_Design_System proposta Claudia.txt, §5–§8/§18). Regola di perimetro: le parti CHIARE del sito restano invariate (bianco, --paper, --ink, --line); i valori DARK qui sotto valgono dove il sito è già scuro (fasce .scura, footer, nav dei dettagli, hero 3D). Gli stessi valori sono replicati a mano nei due :root autonomi (gen/tpl_home.html per la home 3D, prototipo/ir_template.html per la IR): NON unificare i file (la home non deve caricare site.css — gotcha noto). Mappatura vecchio→nuovo (violaceo #1A0F3A → famiglia #080719): --dark #1A0F3A → #080719 (color-bg-primary) --dark-2 #12092B → #09071B (color-bg-footer) --dark-3 #2A1C56 → #18113B (color-bg-section; gradienti/hover) --sec-* #536FA1/#738D56/#C15955 → #5F8FFF/#91AB7E/#B36C78 (§6) ============================================================ */ /* --- chiaro (INVARIATO: bianco e grigio di oggi) --- */ --ink:#1E1E1E; /* grey/12 — testo su chiaro */ --paper:#F5F5F5; /* fondo pagina chiara */ --white:#FFFFFF; --line:#E3E2E6; --muted:#71707C; /* --- scuro: palette Claudia (§5) --- */ --dark:#080719; /* color-bg-primary (era #1A0F3A) */ --dark-2:#09071B; /* color-bg-footer (era #12092B) */ --dark-3:#18113B; /* color-bg-section (era #2A1C56); gradienti e bottoni navy su chiaro (il --dark pieno è troppo scuro come bottone — Giovanni, 16 lug 2026) */ --bg-secondary:#100C29; /* color-bg-secondary */ /* superfici traslucide su scuro (§5) */ --surface-1:#151329; --surface-2:#1C1935; --surface-3:#242044; --surface-glass:rgba(31,29,61,.72); /* bordi su scuro (§5) */ --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14); --border-hover:rgba(255,255,255,.28); --border-accent:rgba(115,121,255,.60); /* testi su scuro (§5) */ --text-primary:#F5F4FA; --text-secondary:#B8B5C8; --text-tertiary:#858198; --text-disabled:#656176; /* accenti su scuro (§5) */ --accent-primary:#7379FF; --accent-secondary:#A3A8FF; --accent-blue:#336CFF; --accent-cyan:#7AB8FF; /* colore eyebrow su scuro */ --accent-violet:#8872FF; /* stati (§5) */ --success:#55CFA2; --warning:#F2B968; --error:#F07178; --info:#6EA8FF; /* azione/link su CHIARO. Gli accenti di Claudia (#7379FF/#A3A8FF) sono tarati su fondo scuro: su bianco non reggono il contrasto testo (≈3.5:1 < 4.5:1). Per link/azioni su pagine chiare si conserva #4F52FF, che su --paper supera 4.5:1. Vedi TODO SITO.md (contrasto). */ --accent:#4F52FF; /* gradienti card settore (design system Claudia §6, desaturati) */ --sec-aero-bg1:#17223F; --sec-aero-bg2:#243756; --sec-industry-bg1:#28372F; --sec-industry-bg2:#415441; --sec-infra-bg1:#3B2339; --sec-infra-bg2:#63363F; /* --- settori: palette Claudia (§6), sostituisce #536FA1/#738D56/#C15955. La tinta card si ottiene con opacità .15; l'eyebrow usa il colore pieno. NB: pensati per fondo scuro — su chiaro l'eyebrow settore può non reggere il contrasto (vedi TODO SITO.md). --sec-*-bg1/2 = gradienti §6. */ --sec-aero:#5F8FFF; --sec-industry:#91AB7E; --sec-infra:#B36C78; --sec-aero-bg1:#17223F; --sec-aero-bg2:#243756; --sec-industry-bg1:#28372F; --sec-industry-bg2:#415441; --sec-infra-bg1:#3B2339; --sec-infra-bg2:#63363F; /* --- radius (§8) --- */ --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; /* --- motion (§18) --- */ --motion-fast:120ms; --motion-base:180ms; --motion-medium:300ms; --motion-slow:500ms; --ease-emphasis:cubic-bezier(.2,.8,.2,1); /* --- font --- */ --tit:'Jost','Segoe UI',sans-serif; --sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono','Consolas',monospace; } *{box-sizing:border-box; margin:0} html{scroll-behavior:smooth} /* cintura anti-sbordo (bug iPhone 21 lug 2026, v. footer .dati): nessun elemento può allargare la pagina in orizzontale — su mobile Safari un overflow orizzontale rimpicciolisce TUTTA la pagina per farcelo stare. clip e non hidden: niente scroll container, la nav sticky funziona */ html,body{overflow-x:clip} body{background:var(--paper); color:var(--ink); font:400 16px/1.56 var(--sans)} /* i campi modulo NON ereditano il font di pagina da soli: senza questa regola cadono sul serif di sistema (nota Claudia, slide 19) */ input,select,textarea,button{font:inherit} img{max-width:100%; display:block} a{color:inherit} /* ---- scala tipografica (design system Claudia §4) ---- Jost sempre 400: la gerarchia si fa con dimensione, spazio e colore, mai col bold. Valori fluidi mobile→desktop via clamp (mobile §4: H1 36/40, H2 30/36, H3 24/30, H4 20/26; desktop: H1 56/60, H2 40/46, H3 28/34, H4 22/28). I componenti con dimensione propria la sovrascrivono. Eyebrow: 12px (eccezione decisa, NON i 10px del documento), IBM Plex Mono 500, uppercase, tracking 14%. */ .eyebrow{font:500 12px/1.33 var(--mono); letter-spacing:.14em; text-transform:uppercase} h1,h2,h3,h4{font-family:var(--tit); font-weight:400} /* grassetto nei titoli (standard 20 lug 2026, gradito a Claudia): una o due parole consecutive che marcano il punto d'arrivo del titolo — peso medio, non nero, per non spezzare il tratto leggero dello Jost */ /* NB: 500 e non di più — Jost è caricato SOLO a 300/400/500 (comune.py, Google Fonts): un peso non caricato viene sintetizzato dal browser e diventa un finto-nero (bug segnalato da Giovanni, 21 lug) */ h1 b, h2 b, .titolo b{font-weight:500} h1{font-size:clamp(36px, 1.7rem + 2.2vw, 56px); line-height:1.07; letter-spacing:-.01em} h2{font-size:clamp(30px, 1.6rem + 1.5vw, 40px); line-height:1.15; letter-spacing:-.005em} h3{font-size:clamp(24px, 1.2rem + 1vw, 28px); line-height:1.21} h4{font-size:clamp(20px, 1.1rem + .6vw, 22px); line-height:1.27} /* larghezza del main in VARIABILE (nota Giovanni 22 lug, fatta il 30): sui monitor grandi (fino ai 24:9) si allarga a gradini — l'80% dell'utenza è laptop/mobile, ma il contenuto non deve galleggiare in una colonnina. La variabile la usano anche i caroselli allineati al bordo del wrap; le colonne di LETTURA restano protette dai loro max-width in ch; i full-bleed a 6vw non cambiano. */ :root{--wrapmax:1240px} @media(min-width:1600px){:root{--wrapmax:1440px}} @media(min-width:2100px){:root{--wrapmax:1720px}} .wrap{max-width:var(--wrapmax); margin:0 auto; padding:0 6vw} /* corpo ricco delle fasce testo/custom (pannello sezioni, gen/fasce.py): il reset globale azzera i margini, qui la prosa riprende respiro. Paragrafi max ~620px (§2). */ .prosa{max-width:620px; margin-top:18px} .prosa p,.prosa ul,.prosa ol{margin:0 0 12px} .prosa ul,.prosa ol{padding-left:1.2em} .prosa h3{font-size:22px; margin:20px 0 8px} .prosa h4{font:600 16px var(--sans); margin:16px 0 6px} .prosa a{color:var(--accent)} /* link testuali di contenuto (§10): sottolineatura con offset in hover */ .prosa a:hover,.partcard a:hover,.sede-corpo a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px} /* elementi delle fasce composte (tipo "elementi" in gen/fasce.py) */ .fotopiena{width:100%; border-radius:var(--radius-md); margin-top:18px} .ctariga{margin-top:26px} .fascia.scura .ctariga .linkprog{background:#fff; color:var(--dark)} .fascia.scura .lead{opacity:.85} .cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:26px} .gcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit} .gcard .foto{height:160px; background-size:cover; background-position:center} .gcard h3{font-size:20px; letter-spacing:-.01em; margin:14px 16px 6px} .gcard p{font-size:14px; color:#4a4a52; margin:0 16px 16px} a.gcard:hover{box-shadow:0 6px 22px rgba(26,15,58,.12)} /* ---- nav ---- */ nav.top{position:sticky; top:0; z-index:20; background:var(--dark); color:#fff} nav.top .wrap{display:flex; align-items:center; gap:24px; padding-top:16px; padding-bottom:16px} nav.top .logo{display:block; transition:opacity .2s} nav.top .logo:hover{opacity:.75} nav.top .logo img{height:34px; width:auto} /* voci a SINISTRA accanto al logo (31 lug, Giovanni): il logo diventa il primo elemento del gruppo di navigazione e si legge come "torna alla home"; lingua e Contattaci restano ancorati a destra */ nav.top ul{display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:nowrap} nav.top a.voce{font:400 14px var(--tit); letter-spacing:.01em; text-decoration:none; white-space:nowrap; opacity:.85; padding:6px 0; border-bottom:2px solid transparent} nav.top a.voce:hover,nav.top a.voce.on{opacity:1; border-bottom-color:var(--accent)} nav.top .cta{font:400 14px var(--tit); background:#fff; color:var(--dark); padding:10px 20px; border-radius:var(--radius-pill); text-decoration:none; white-space:nowrap} /* switcher di lingua nella barra (desktop) */ nav.top .lingua{font:500 12px var(--mono); letter-spacing:.08em; color:#fff; text-decoration:none; opacity:.7; padding:7px 2px; transition:opacity .2s} nav.top .lingua:hover{opacity:1} /* blocco di servizio a DESTRA (28 set 2026): Lavora con Noi · lingua · Contattaci. Il link carriere ha lo stesso peso discreto della lingua, non del menu. */ nav.top .destra{margin-left:auto; display:flex; align-items:center; gap:22px} nav.top a.util{font:400 13px var(--tit); color:#fff; opacity:.72; text-decoration:none; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; transition:opacity .2s} nav.top a.util:hover, nav.top a.util.on{opacity:1; border-bottom-color:var(--accent)} nav.top .destra .cta{margin-left:6px} nav.top .util-mob{display:none} /* hamburger, voce-CTA e switcher-mobile del pannello mobile: nascosti su desktop */ nav.top .navtog, nav.top .menubtn, nav.top .cta-mob, nav.top .lingua-mob{display:none} /* sottomenu (voce Settori, lug 2026): tendina al passaggio/focus su desktop; nel pannello mobile (media query in fondo) diventa righe rientrate sempre visibili */ nav.top li.hasub{position:relative} nav.top ul.sub{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); flex-direction:column; gap:2px; min-width:250px; margin:0; padding:10px; list-style:none; background:rgba(12,9,27,.94); border:1px solid rgba(255,255,255,.12); border-radius:10px; backdrop-filter:blur(14px); z-index:30} nav.top li.hasub:hover > ul.sub, nav.top li.hasub:focus-within > ul.sub{display:flex} nav.top ul.sub a.voce{display:block; padding:9px 14px; border-radius:6px; border-bottom:0} nav.top ul.sub a.voce:hover, nav.top ul.sub a.voce.on{border-bottom:0; background:rgba(255,255,255,.08)} /* ---- hero con carosello ---- */ .hero{position:relative; min-height:560px; color:#fff; overflow:hidden; background:linear-gradient(125deg,var(--dark-2),var(--dark) 55%,var(--dark-3))} /* sfondo per-slide su layer proprio: parallasse (var --par) + "respiro" lento */ .hero .slide .bg{position:absolute; inset:-14% 0; z-index:0; background-size:cover; background-position:center; will-change:transform; animation:respiro 36s ease-in-out infinite alternate} @keyframes respiro{ from{transform:translateY(var(--par,0px)) scale(1)} to{transform:translateY(var(--par,0px)) scale(1.07)} } .hero .slide::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(18,9,43,.92) 30%,rgba(26,15,58,.55) 70%,rgba(26,15,58,.25))} .hero .slide > .wrap{position:relative; z-index:2} .hero .dots{z-index:3} @media(prefers-reduced-motion:reduce){.hero .slide .bg{animation:none}} .hero .slide{position:absolute; inset:0; display:flex; align-items:center; opacity:0; transition:opacity .9s; pointer-events:none} .hero .slide.on{opacity:1; pointer-events:auto} .hero .slide > .wrap{width:100%} .hero .k{opacity:.72} .hero h1{font-size:clamp(38px,5.5vw,76px); letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 14px; max-width:14ch; line-height:1.06} .hero p{max-width:52ch; opacity:.88; font-size:20px} /* nota Claudia: hero tutti a 20 */ .hero .azioni{margin-top:26px; display:flex; gap:14px} .hero .btn{font:400 14px var(--tit); padding:12px 24px; border-radius:var(--radius-pill); text-decoration:none; background:#fff; color:var(--dark)} .hero .btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)} .hero .dots{position:absolute; left:6vw; bottom:26px; display:flex; gap:8px} .hero .dots button{width:26px; height:4px; border:0; border-radius:2px; background:rgba(255,255,255,.3); cursor:pointer} .hero .dots button.on{background:#fff} /* ---- fasce ---- */ section.fascia{padding:72px 0} section.fascia.stretta{padding:64px 0} /* 48→64: più respiro (nota Claudia 27 lug) */ /* ritmo FITTO (Careers, 1 ago: "troppi gap tra le sezioni" dopo lo spostamento della descrizione nell'hero): confine fra sezioni 88px, in scala coi margini interni delle fasce */ section.fascia.fitta{padding:44px 0} section.fascia.scura{background:var(--dark); color:#fff} section.fascia.bianca{background:#fff} /* titolo di fascia = H2 (§4): 40/46 desktop, 30/36 mobile */ .fascia .titolo{font-size:clamp(30px, 1.6rem + 1.5vw, 40px); line-height:1.15; letter-spacing:-.01em; margin-bottom:18px} .fascia .kicker{color:var(--muted); margin-bottom:26px; display:flex; align-items:center; gap:12px} /* 20-28px dal titolo (nota Claudia) */ .fascia .kicker::after{content:""; flex:0 0 46px; height:1px; background:currentColor; opacity:.4} .fascia.scura .kicker{color:var(--accent-cyan)} /* eyebrow su scuro: accent-cyan (§4) */ /* Lead paragraph (§4): IBM Plex Sans 400, 20/30 desktop → 18/28 mobile, colonna ≤620px (§2) */ .lead{font-size:clamp(18px, 1.05rem + .35vw, 20px); line-height:1.5; max-width:620px} .lead p{margin-bottom:.8em} /* ---- blocco mercato: ticker + grafico + contatori ---- */ .mercato{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .mercato .griglia{display:grid; grid-template-columns:minmax(230px,.8fr) 1.4fr; gap:48px; align-items:center} .tickerbox .sigla{font:500 12px var(--mono); letter-spacing:.14em; color:var(--muted)} .tickerbox .prezzo{font-family:var(--tit); font-size:56px; letter-spacing:-.03em; line-height:1.1} .tickerbox .prezzo small{font-size:22px; color:var(--muted); letter-spacing:0} .tickerbox .var{font:500 14px var(--mono)} .tickerbox .var.giu{color:#B3261E} .tickerbox .var.su{color:#0A7D4F} .tickerbox .meta{font:400 12px var(--mono); color:var(--muted); margin-top:14px; line-height:2} .tickerbox .range{margin-top:10px; height:4px; background:var(--line); border-radius:2px; position:relative; max-width:220px} .tickerbox .range i{position:absolute; top:-3px; width:10px; height:10px; border-radius:50%; background:var(--dark)} .grafico .barre{display:flex; gap:9%; align-items:flex-end; height:230px; border-bottom:1px solid var(--line); padding:0 4%} .grafico .anno{flex:1; height:100%; display:flex; gap:10px; align-items:flex-end; justify-content:center} .grafico .barra{width:44px; border-radius:3px 3px 0 0; position:relative; transform:scaleY(0); transform-origin:bottom; transition:transform .9s cubic-bezier(.25,.7,.2,1)} .mercato.vivo .barra{transform:scaleY(1)} .mercato .anno:nth-child(2) .barra{transition-delay:.12s} .mercato .anno:nth-child(3) .barra{transition-delay:.24s} .grafico .barra b{opacity:0; transition:opacity .4s .8s} .mercato.vivo .barra b{opacity:1} .grafico .barra.ricavi{background:var(--dark)} .grafico .barra.ebitda{background:#A4BBF7} .grafico .barra b{position:absolute; top:-24px; left:50%; transform:translateX(-50%); font:500 12px var(--mono); color:var(--muted); white-space:nowrap} .grafico .assi{display:flex; padding:8px 4% 0; gap:9%} .grafico .assi span{flex:1; text-align:center; font:500 12px var(--mono); color:var(--muted)} .grafico .legenda{display:flex; gap:22px; margin:16px 0 6px; font-size:12px} .grafico .legenda i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px} .grafico .note{font-size:12px; color:var(--muted); line-height:1.7; margin-top:10px} .contatori{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin-top:44px; border-top:1px solid var(--line); padding-top:30px} .contatori .c .v{font-family:var(--tit); font-size:38px; letter-spacing:-.03em} .contatori .c .t{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-top:2px} .contatori .c .s{font-size:14px; color:var(--muted)} /* sottotesto descrittivo: 12 era sotto il pavimento di lettura */ /* ---- movimenti leggeri ---- */ .rivela{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.25,.7,.2,1)} .rivela.visto{opacity:1; transform:none} nav.top{transition:padding .25s} nav.top .wrap{transition:padding .25s} nav.top.compatta .wrap{padding-top:9px; padding-bottom:9px} @media(prefers-reduced-motion:reduce){ .rivela{opacity:1; transform:none; transition:none} } /* ---- card settore ---- */ /* NB: qui c'erano le sfumature decorative ".alone" (blob radiali nei colori settore, classe .zona-settori) — rimosse lug 2026, vedi SITO.md §TODO. */ .settori{display:flex; flex-direction:column; gap:22px; margin-top:34px; position:relative} .setcard{display:grid; grid-template-columns:1fr 1.1fr; border-radius:var(--radius-md); overflow:hidden; min-height:300px; text-decoration:none; background:#fff} .setcard .foto{background-size:cover; background-position:center; min-height:220px} .setcard .corpo{position:relative; padding:38px 42px; display:flex; flex-direction:column; gap:12px; justify-content:center} .setcard .corpo::before{content:""; position:absolute; inset:0; background:var(--sc); opacity:.15} .setcard .corpo > *{position:relative} .setcard .eyebrow{color:var(--sc)} .setcard h3{font-size:28px; letter-spacing:-.02em} .setcard p{font-size:16px; max-width:56ch} .setcard .vai{font:400 14px var(--tit); background:var(--dark-3); color:#fff; border-radius:var(--radius-pill); padding:10px 20px; align-self:flex-start; margin-top:6px} .setcard:hover .vai{background:var(--surface-3)} @media(max-width:820px){.setcard{grid-template-columns:1fr}} /* variante "tris" (home): tre card affiancate su un'unica fascia, solo foto e nome del settore — semplificazione nata nel prototipo stile3d e promossa sulla home (lug 2026). Le descrizioni vivono nella pagina Settori, che mantiene le card complete. */ .settori.tris{flex-direction:row} .settori.tris .setcard{display:block; position:relative; flex:1; min-height:340px} .settori.tris .setcard::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sc); z-index:2} .settori.tris .setcard .foto{position:absolute; inset:0; min-height:0; transition:transform .8s cubic-bezier(.2,.7,.2,1)} .settori.tris .setcard:hover .foto{transform:scale(1.05)} .settori.tris .setcard .corpo{position:absolute; inset:auto 0 0 0; padding:26px 28px; justify-content:flex-end; background:linear-gradient(180deg, rgba(26,15,58,0) 0%, rgba(26,15,58,.82) 100%)} .settori.tris .setcard .corpo::before{display:none} .settori.tris .setcard h3{color:#fff; font-size:24px} @media(max-width:820px){ .settori.tris{flex-direction:column} .settori.tris .setcard{min-height:260px} } /* ---- teaser (azienda / R&D) ---- */ .teasers{display:grid; grid-template-columns:1fr 1fr; gap:22px} .teaser{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:40px 42px} .fascia.scura .teaser{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14)} .teaser h3{font-size:28px; letter-spacing:-.02em; margin:8px 0 12px} .teaser p{font-size:16px; opacity:.9} .teaser .vai{display:inline-block; font:400 14px var(--tit); margin-top:18px; padding:10px 22px; border-radius:var(--radius-pill); background:var(--dark-3); color:#fff; text-decoration:none} .fascia.scura .teaser .vai{background:#fff; color:var(--dark)} @media(max-width:820px){.teasers{grid-template-columns:1fr}} /* ---- news: fascia a tutta larghezza con scorrimento ---- */ .newsband{overflow:hidden} .newsband .pista{position:relative} .newsband .freccia{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; background:rgba(26,15,58,.38); color:#fff; font-size:19px; backdrop-filter:blur(3px); transition:background .15s, opacity .2s} .newsband .freccia:hover{background:rgba(26,15,58,.75)} .newsband .freccia.prev{left:2.5vw} .newsband .freccia.next{right:2.5vw} .newsband .freccia[disabled]{opacity:.25; cursor:default} /* niente scroll-snap (regola generale di Giovanni, 20 lug 2026: lo scroll non deve mai andare "a scatti"; qui c'era un mandatory) */ .newstrack{display:flex; gap:22px; overflow-x:auto; padding:28px 6vw 10px; scrollbar-width:none} .newstrack::-webkit-scrollbar{display:none} /* position+z-index: sopra i canvas 3D fissi, come .progcard qui sopra */ a.newscard{flex:0 0 340px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; position:relative; z-index:2} a.newscard:hover{box-shadow:0 6px 22px rgba(26,15,58,.12)} a.newscard img{width:100%; aspect-ratio:16/10; object-fit:cover} a.newscard .corpo{padding:18px 22px 22px; display:flex; flex-direction:column; gap:9px} a.newscard .dt{font:500 12px var(--mono); color:var(--muted)} a.newscard h4{font-family:var(--tit); font-weight:400; font-size:20px; letter-spacing:-.01em; line-height:1.3} .newsband .sotto{display:flex; align-items:center; margin-top:16px} .puntini{display:flex; gap:8px; margin:0 auto} .puntini button{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:#c9c7d6; cursor:pointer} .puntini button.on{background:var(--dark); transform:scale(1.25)} .newsband .tutte{font:400 14px var(--tit); color:var(--ink); position:absolute; right:6vw} .newsband .sotto{position:relative} @media(max-width:640px){a.newscard{flex-basis:82vw}} /* ---- specializzazioni: fisarmonica a somma costante ---- */ .specband{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start} .specband .sx{position:sticky; top:90px} .fisar{display:flex; flex-direction:column; height:600px; border-top:1px solid rgba(255,255,255,.18)} .fisar .spec{flex:1; min-height:0; overflow:hidden; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.18); padding:0 6px; transition:flex .5s cubic-bezier(.3,.7,.2,1), background .2s} .fisar .spec:hover{background:rgba(255,255,255,.05)} .fisar .spec.on{flex:3.4} .fisar .testa{display:flex; align-items:center; gap:16px; height:64px; flex:none} .fisar .num{font:500 12px var(--mono); color:rgba(255,255,255,.4)} .fisar .nome{font:400 18px var(--tit); letter-spacing:-.01em; color:#fff} .fisar .piu{margin-left:auto; font:300 20px var(--tit); color:rgba(255,255,255,.45); transition:transform .3s} .fisar .spec.on .piu{transform:rotate(45deg)} .fisar .desc{font-size:14px; line-height:1.6; color:rgba(255,255,255,.78); max-width:52ch; padding-left:29px; opacity:0; transition:opacity .35s .15s} .fisar .spec.on .desc{opacity:1} @media(max-width:900px){ .specband{grid-template-columns:1fr; gap:30px} .specband .sx{position:static} .fisar{height:auto} .fisar .spec{flex:none} .fisar .desc{max-height:0; padding-bottom:0; transition:max-height .4s, opacity .3s} .fisar .spec.on .desc{max-height:200px; padding-bottom:18px} } /* ---- carosello clienti (scorrimento continuo) ---- */ .clienti{background:var(--dark); padding:30px 0 36px; overflow:hidden} .clienti .eyebrow{color:var(--accent-cyan)} /* eyebrow su scuro: accent-cyan (§4) */ .clienti .nastro{margin-top:22px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .clienti .corsa{display:flex; align-items:center; gap:90px; width:max-content; padding-right:90px; animation:scorri 26s linear infinite} .clienti .nastro:hover .corsa{animation-play-state:paused} .clienti img{height:32px; width:auto; opacity:.75; filter:brightness(0) invert(1); flex:none} @keyframes scorri{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.clienti .corsa{animation:none}} /* ---- pagine interne: testata (statica o carosello, da heroes.json) ---- */ .pagehero{position:relative; overflow:hidden; color:#fff; background:linear-gradient(115deg,var(--dark-2),var(--dark) 70%,#241548)} /* pagine settore (20 lug sera): via il sottotitolo dell'hero, il manifesto sotto è la continuazione visiva della testata (stesso fondo scuro) — senza questo azzeramento il distacco titolo→testo era troppo. Il margin-top del manifesto va azzerato anche lui: con padding-top:0 collassava FUORI dalla sezione e apriva una riga di body chiaro tra hero e fascia (la "striscia bianca", 21 lug) */ .pagehero + .fascia.scura.stretta{padding-top:0} .pagehero + .fascia.scura.stretta .manifesto{margin-top:0} .pagehero .slide{position:relative; padding:180px 0 160px} /* H1 con più aria (nota Claudia: 180-220) */ .pagehero .slide .bg{position:absolute; inset:-12% 0; z-index:0; background-size:cover; background-position:center; will-change:transform} .pagehero .slide::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(18,9,43,.9) 30%,rgba(26,15,58,.5) 75%,rgba(26,15,58,.2))} .pagehero .slide > .wrap{position:relative; z-index:2} .pagehero .k{opacity:.72} .pagehero .eyebrow{color:var(--accent-cyan)} /* eyebrow hero su scuro: accent-cyan (§4) */ .pagehero h1{font-size:clamp(36px,4.5vw,56px); letter-spacing:-.035em; margin:26px 0 14px; max-width:760px} /* titolo hero ≤760px (§2); 26px dall'eyebrow (nota Claudia) */ .pagehero p{max-width:620px; opacity:.86; font-size:20px} /* hero tutti a 20 */ .pagehero .azioni{margin-top:20px; display:flex; gap:14px} .pagehero .btn{font:400 14px var(--tit); padding:11px 22px; border-radius:var(--radius-pill); text-decoration:none; background:#fff; color:var(--dark)} .pagehero .btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)} /* ---- stati bottoni (§9) ---- Tutti i bottoni-pill del sito: label Jost 400, radius pill. Hover: solleva di 1px + ombra morbida; pressed: torna giù; disabled: opacità 40%, inerte. I bottoni a fondo scuro (setcard/linkprog/btninvia) tengono il loro cambio di fondo in hover; qui si aggiunge solo il movimento e l'ombra. */ .hero .btn, .pagehero .btn, .setcard .vai, .teaser .vai, .linkprog, .btninvia, nav.top .cta{ transition:transform var(--motion-base) var(--ease-emphasis), box-shadow var(--motion-base) var(--ease-emphasis), background var(--motion-base) var(--ease-emphasis), border-color var(--motion-base) var(--ease-emphasis)} .hero .btn:hover, .pagehero .btn:hover, .setcard:hover .vai, .teaser:hover .vai, .linkprog:hover, .btninvia:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(8,7,25,.24)} .hero .btn:active, .pagehero .btn:active, .linkprog:active, .btninvia:active{ transform:translateY(0); box-shadow:none} .hero .btn[disabled], .pagehero .btn[disabled], .btninvia:disabled{ opacity:.4; pointer-events:none} /* bottone secondario/ghost (§9 Secondary): bordo sottile, hover più marcato */ .hero .btn.ghost:hover, .pagehero .btn.ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.7)} /* variante carosello: slide sovrapposte, altezza fissa */ .pagehero.multi{min-height:330px} .pagehero.multi .slide{position:absolute; inset:0; display:flex; align-items:center; padding:0; opacity:0; transition:opacity .8s; pointer-events:none} .pagehero.multi .slide.on{opacity:1; pointer-events:auto} .pagehero.multi .slide > .wrap{width:100%} .pagehero.multi h1{font-size:clamp(28px,3.8vw,46px)} .pagehero.multi p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .pagehero .dots{position:absolute; left:6vw; bottom:18px; z-index:3; display:flex; gap:8px} .pagehero .dots button{width:26px; height:4px; border:0; border-radius:2px; background:rgba(255,255,255,.3); cursor:pointer} .pagehero .dots button.on{background:#fff} .pagehero .torna{display:inline-block; font:400 14px var(--tit); color:#fff; opacity:.7; text-decoration:none; margin-bottom:18px} .pagehero .torna:hover{opacity:1} /* hero delle pagine posizione (jobs/): costruito senza .slide, quindi il respiro 180/160 del pagehero non lo raggiungeva — tutto accatastato sotto la barra (nota di Giovanni, 2 ago 2026). Ritmo proprio: */ .pagehero.jobhero{padding:110px 0 72px} .pagehero.jobhero .torna{margin-bottom:36px} .pagehero.jobhero h1{margin:14px 0 0} .pagehero.jobhero .azioni{margin-top:30px} @media(max-width:900px){.pagehero.jobhero{padding:64px 0 48px}} /* ---- R&D: filtri e griglia progetti ---- */ /* pillole a sinistra (vanno a capo tra loro), casella di ricerca fissa a destra sulla prima riga: griglia a due colonne, non un'unica riga flessibile (la casella finiva da sola su una seconda riga — Giovanni, 26 set 2026) */ .filtri{display:grid; grid-template-columns:1fr auto; gap:9px 18px; align-items:start; margin-bottom:30px} .filtri .pillole{display:flex; gap:9px; flex-wrap:wrap} .filtri .pill{font:500 14px var(--mono); letter-spacing:.03em; padding:9px 15px; border:1px solid #c9c7d6; border-radius:999px; background:#fff; cursor:pointer; color:var(--ink)} .filtri .pill .n{color:#a8a6b2; margin-left:4px} .filtri .sep{width:1px; align-self:stretch; margin:4px 6px; background:var(--line)} /* settori | tecnologie */ /* ricerca per nome (R&D): stessa casella della barra IR (ir_template.html, nav.bar input) */ .filtri .cerca{width:260px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; font:13.5px 'Segoe UI', system-ui, sans-serif; background:#fff; color:var(--ink)} .filtri .cerca:focus{outline:none; border-color:var(--accent)} .nessuno{font-size:15px; color:var(--muted); margin-top:8px} /* testi legali (privacy, cookie): testo verbatim dal sito ufficiale, colonna di lettura */ /* colonna di lettura (78ch) per il testo; le tabelle usano tutta la fascia */ .testo-legale{font-size:15.5px; line-height:1.65} .testo-legale > :not(.tabwrap){max-width:78ch} .testo-legale p{margin:0 0 12px} .testo-legale ol,.testo-legale ul{margin:0 0 14px 22px; padding:0} .testo-legale li{margin-bottom:6px} .testo-legale a{color:var(--accent); text-decoration:underline; word-break:break-word} .testo-legale .titolo{font-size:clamp(24px,2.6vw,32px); margin-bottom:10px} .testo-legale .meta{color:var(--muted); font-size:14px; margin:0 0 4px} .testo-legale .meta + :not(.meta){margin-top:22px} .testo-legale h3{font:500 19px/1.3 var(--tit,inherit); letter-spacing:-.01em; margin:32px 0 10px} .testo-legale h4{font-size:16px; font-weight:500; line-height:1.35; margin:20px 0 6px} .testo-legale p strong:first-child{color:var(--ink)} /* tabelle dell'informativa (finalità/conservazione, contatti): a tutta colonna, scorrono in orizzontale se non ci stanno */ .testo-legale .tabwrap{overflow-x:auto; margin:8px 0 18px} .testo-legale table{border-collapse:collapse; width:100%; font-size:14px; line-height:1.45} .testo-legale th,.testo-legale td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--line)} .testo-legale th{font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--line)} @media(max-width:640px){.filtri{grid-template-columns:1fr} .filtri .cerca{margin-left:0; width:100%}} .filtri .pill.on{background:var(--dark-3); color:#fff; border-color:var(--dark-3)} .filtri .pill.on .n{color:rgba(255,255,255,.6)} .griglia-prog{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px} /* position+z-index: sopra i canvas 3D fissi (z-index:1 in stile3d.py, STESSA convenzione dell'hero) — solo la card, non tutto il fondo della fascia: il soggetto 3D deve restare visibile nei vuoti, non sparire dietro il blu */ .progcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; position:relative; z-index:2} .progcard:hover{box-shadow:0 6px 22px rgba(26,15,58,.12)} .progcard .foto{aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--dark-2)} .progcard .corpo{padding:18px 22px 22px; display:flex; flex-direction:column; gap:8px} .progcard .eyebrow{font-size:12px; color:var(--muted)} .progcard h3{font-size:20px; letter-spacing:-.01em} .progcard p{font-size:14px; color:#4a4a52} /* ---- news: pagina elenco e dettaglio ---- */ .griglia-news{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px} .griglia-news a.newscard{flex:none} .news-dettaglio .copertina{border-radius:var(--radius-md); margin-bottom:30px; max-height:420px; width:100%; object-fit:cover} .news-dettaglio .testo{font-size:16px; line-height:1.7; max-width:72ch} .news-dettaglio .testo p{margin-bottom:1em} /* ---- R&D: dettaglio progetto ---- */ .prog-dettaglio{display:grid; grid-template-columns:1.4fr .9fr; gap:52px; align-items:start} .prog-dettaglio .testo{font-size:16px; line-height:1.7; max-width:70ch} .prog-dettaglio .testo p{margin-bottom:1em} .prog-dettaglio .testo h3{font-size:22px; letter-spacing:-.01em; margin:1.4em 0 .5em} .prog-dettaglio .lato img{border-radius:var(--radius-md); position:sticky; top:90px} .linkprog{display:inline-block; font:400 14px var(--tit); background:var(--dark-3); color:#fff; text-decoration:none; border-radius:var(--radius-pill); padding:11px 22px; margin-top:18px} .linkprog:hover{background:var(--surface-3)} .tagriga{display:flex; gap:8px; flex-wrap:wrap; margin-top:26px} .tagriga span{font:500 12px var(--mono); letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 9px} @media(max-width:820px){.prog-dettaglio{grid-template-columns:1fr} .prog-dettaglio .lato{order:-1}} /* ---- pagine istituzionali ---- */ .partgriglia{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:30px} /* partecipazioni compatte: 4 fisarmoniche con righe tabellari (logo·%·nome·desc) */ .partgruppi{max-width:920px; margin-top:26px; border-top:1px solid var(--line)} .partgruppo{border-bottom:1px solid var(--line)} .partgruppo summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; padding:15px 6px; font:400 18px var(--tit); letter-spacing:-.01em; color:var(--ink); transition:color .15s} .partgruppo summary::-webkit-details-marker{display:none} .partgruppo .pg-tit{flex:1; min-width:0} .partgruppo .pg-nomi{font:400 14px var(--sans); letter-spacing:0; color:var(--muted)} .partgruppo summary::after{content:''; flex:none; align-self:center; margin-right:2px; width:8px; height:8px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg); transition:transform .2s} .partgruppo[open] summary::after{transform:rotate(-135deg)} .partgruppo summary:hover{color:var(--accent)} .partgruppo summary:hover::after{border-color:var(--accent)} .pg-lista{padding:2px 6px 12px} /* apertura animata dei
del sito (partecipazioni, sedi — stessa scelta della IR, 22 lug 2026): su Chromium anima l'altezza vera (interpolate-size + ::details-content), altrove degrada nel fade-in. Motion ~200ms con l'easing del design system (§18). */ :root{interpolate-size:allow-keywords} details.partgruppo::details-content, details.sede::details-content{ opacity:0; block-size:0; overflow-y:clip; transition:content-visibility .2s allow-discrete, opacity .2s cubic-bezier(.2,.8,.2,1), block-size .2s cubic-bezier(.2,.8,.2,1)} details.partgruppo[open]::details-content, details.sede[open]::details-content{opacity:1; block-size:auto} @keyframes dett-apri{from{opacity:0; transform:translateY(-4px)}} details.partgruppo[open] .pg-lista, details.sede[open] .sede-corpo{animation:dett-apri .2s cubic-bezier(.2,.8,.2,1)} @media(prefers-reduced-motion:reduce){ :root{interpolate-size:numeric-only} details.partgruppo::details-content, details.sede::details-content{transition:none} details.partgruppo[open] .pg-lista, details.sede[open] .sede-corpo{animation:none} } .pg-riga{display:grid; grid-template-columns:66px 62px minmax(140px,1.1fr) 2fr; align-items:center; gap:18px; padding:11px 0; border-top:1px solid var(--line)} .pg-riga:first-child{border-top:0} .pg-logo{height:30px; display:flex; align-items:center} .pg-logo img{max-height:30px; max-width:66px; object-fit:contain; object-position:left} .pg-pct{font:600 12px var(--mono); color:var(--accent)} .pg-nome{font:500 14px var(--sans); color:var(--ink)} .pg-desc{font-size:14px; color:#4a4a52; line-height:1.45} @media(max-width:720px){ .pg-riga{grid-template-columns:44px auto 1fr; gap:6px 12px; align-items:baseline} .pg-desc{grid-column:1 / -1; margin-left:56px} } .partcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 28px} .partcard .pct{font:500 12px var(--mono); letter-spacing:.1em; color:var(--accent)} .partcard h3{font-size:20px; letter-spacing:-.01em; margin:6px 0 8px} .partcard p{font-size:14px; color:#4a4a52} .partcard a{color:var(--accent)} .ghostlink{background:transparent !important; color:var(--ink) !important; border:1px solid #c9c7d6; margin-left:10px} .spectab{margin-top:8px} .specriga{display:flex; align-items:baseline; gap:18px; padding:14px 4px; border-bottom:1px solid var(--line)} .specriga .nome{font:400 18px var(--tit); letter-spacing:-.01em; flex:1} .specriga .ambito{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sc,var(--muted)); border:1px solid currentColor; border-radius:999px; padding:4px 12px; opacity:.9} /* ---- pagine settore (ristrutturazione lug 2026): link di risalita alla pagina-indice, specializzazioni del settore (card compatte), società del gruppo (righe), acquisizioni (righe linkate alle news del sito storico) ---- */ .fascia .torna{display:inline-block; font:400 14px var(--tit); color:var(--muted); text-decoration:none; margin-bottom:16px} .fascia .torna:hover{color:var(--ink)} .speclista{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:22px} .specvoce{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px} .specvoce .nome{font:400 18px var(--tit); letter-spacing:-.01em; margin-bottom:6px} .specvoce p{font-size:14px; color:#4a4a52; line-height:1.55} .soclista{margin-top:14px} .socriga{display:grid; grid-template-columns:170px 230px 1fr; gap:18px; align-items:baseline; padding:15px 4px; border-bottom:1px solid var(--line)} .soc-pct{font:500 12px var(--mono); color:var(--muted)} .soc-nome{font:400 18px var(--tit); letter-spacing:-.01em} .soc-desc{font-size:14px; color:#4a4a52} .soc-sito{font:500 14px var(--mono); color:var(--accent); text-decoration:none; white-space:nowrap} @media(max-width:760px){.socriga{grid-template-columns:1fr; gap:3px}} .acqlista{margin-top:14px} .acqriga{display:grid; grid-template-columns:104px 1fr auto; gap:18px; align-items:baseline; padding:14px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit} .acqriga:hover{background:#fff; box-shadow:inset 3px 0 0 var(--accent)} .acqriga .dt{font:500 12px var(--mono); color:var(--muted); white-space:nowrap} .acqriga .corpo strong{font-weight:600; font-size:16px; display:block; margin-bottom:3px} .acqriga .sintesi{font-size:14px; color:#4a4a52; line-height:1.55} .acqriga .dl{font:600 12px var(--mono); color:var(--accent); white-space:nowrap} @media(max-width:760px){.acqriga{grid-template-columns:1fr; gap:4px} .acqriga .dl{display:none}} /* filetto di settore sulle card capacità (colore mai come testo su chiaro) */ .specvoce{border-top:3px solid var(--sc, var(--line))} /* link "Tutte le news" della fascia Dal settore */ /* CTA "tutti/tutte" come BOTTONE pill (nota Claudia, slide 5: i tasti tutti uguali — i link mono si confondevano con le etichette) */ .fascia-tutte{display:inline-block; font:400 14px var(--tit); color:var(--accent); text-decoration:none; border:1px solid currentColor; border-radius:var(--radius-pill); padding:10px 22px; letter-spacing:0} .fascia-tutte:hover{background:rgba(115,121,255,.08)} /* "torna" leggibile sulla fascia scura */ .fascia.scura .torna{color:rgba(255,255,255,.65)} .fascia.scura .torna:hover{color:#fff} /* presidio come manifesto: il blocco citabile respira */ .manifesto{font-size:20px; line-height:1.7; max-width:64ch; margin-top:6px} /* carosello R&D di settore: stesse .progcard della griglia R&D, in pista orizzontale (.carosello generico, chiaro) invece che a griglia multi-riga */ .progband .cartrack .progcard{flex:0 0 min(430px,84vw)} /* 3-4 card per schermata (nota Claudia) */ /* carosello news di settore: card con foto su fascia scura (gemello della griglia news della home — al futuro rework della home riusare queste) */ .newsband .testata{display:flex; align-items:center; justify-content:space-between} .newsband .frecce{display:flex; gap:10px} /* la pista full-bleed è FUORI dal .wrap che stile3d alza a z-index 2: senza questo rialzo le card restano SOTTO i canvas 3D fissi (z-index 1) e il wireframe disegna sopra il testo (v. standard card traslucide qui sotto) */ .newsband .cartrack{display:flex; gap:22px; overflow-x:auto; padding:22px 6vw 8px; scrollbar-width:none; position:relative; z-index:2} .newsband .cartrack::-webkit-scrollbar{display:none} /* STANDARD (Giovanni, 19 lug 2026): le card su fondo scuro attraversato dai canvas 3D hanno fondo TRASLUCIDO SCURO (non vetro bianco quasi trasparente): il wireframe resta visibile intorno ma non passa sotto il testo. Stessi valori dei pannelli filiera del prototipo A&D (genera_aero2.py). */ .newsband .newscard{flex:0 0 min(360px,80vw); background:rgba(9,7,27,.62); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; text-decoration:none; color:#fff; display:flex; flex-direction:column; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .3s, border-color .3s} .newsband .newscard:hover{transform:translateY(-5px); border-color:var(--accent-secondary)} .newsband .newscard img{height:170px; object-fit:cover; width:100%; opacity:.9} .newsband .newscard .corpo{padding:18px} .newsband .newscard .dt{font:500 12px var(--mono); color:var(--accent-soft, var(--accent-secondary)); letter-spacing:.06em} .newsband .newscard h4{font:400 16px/1.35 var(--tit); margin-top:9px} .newsband .freccia{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#fff; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center} .newsband .freccia:not(:disabled):hover{background:rgba(255,255,255,.1)} .newsband .freccia:disabled{opacity:.3; pointer-events:none} .newsband .news-tutte{display:inline-block; margin-top:16px; font:400 14px var(--tit); color:#fff; opacity:.85; text-decoration:none; border:1px solid rgba(255,255,255,.4); border-radius:var(--radius-pill); padding:10px 22px} .newsband .news-tutte:hover{opacity:1; background:rgba(255,255,255,.08)} /* brand di settore: riga di pill sotto la fisarmonica */ /* loghi brand NUDI, affiancati e spaziati (niente riquadri — decisione Giovanni 18 lug 2026); l'etichetta sta su una riga propria. La scala ottica equalizzata è già nei pixel (prepara_assets.py, file a 2x) e la dimensione di resa la fissano gli attributi width/height del generatore. La riga loghi scorre in orizzontale (mai a capo, coerente con le altre liste del sito): sta nella colonna stretta del .piatt (metà di .wrap), dove un a-capo isolava l'ultimo logo su una riga propria (visto su Chrome Mac, 18 lug 2026 — con 4 loghi il calcolo dei px non lascia margine tra i ~900 e ~1080px di larghezza pagina, prima che .piatt torni a colonna singola). */ .brandriga{margin-top:26px} .brandlabel{display:block; margin-bottom:14px; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .brandriga .loghi{display:flex; align-items:center; gap:18px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin} .brandpill{font:400 14px var(--tit); color:var(--ink); text-decoration:none; border:1px solid #c9c7d6; border-radius:999px; padding:8px 16px; background:#fff; transition:border-color .2s} .brandpill:hover{border-color:var(--sc, var(--accent))} .brandcard{display:inline-flex; align-items:center; transition:opacity .2s} .brandcard img{display:block} .brandcard:hover{opacity:.72} /* ---- fascia settori: card GRANDI TRASLUCIDE in carosello normale (pagina di servizio Settori; la home ha la stessa fascia con CSS nel template — TENERE ALLINEATI). Fondo card = gradiente di settore §6 in TRASPARENZA + blur (traslucido: si vede il layer 3D dietro); pista scorrevole con frecce a sponda, niente cloni né snap. ---- */ .setband{position:relative; margin-top:34px} .setpista{display:flex; gap:26px; overflow-x:auto; padding:6px 6vw 20px; scrollbar-width:none} .setpista::-webkit-scrollbar{display:none} .setgrande{flex:0 0 min(940px,86vw); position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; padding:38px; border-radius:24px; border:1px solid var(--border-subtle); color:#fff; text-decoration:none; overflow:hidden; background:linear-gradient(135deg, var(--bg1), var(--bg2) 82%); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:border-color .3s} @supports (background: color-mix(in srgb, red 50%, transparent)) { .setgrande{background:linear-gradient(135deg, color-mix(in srgb, var(--bg1) 58%, transparent), color-mix(in srgb, var(--bg2) 58%, transparent) 82%)} } .setgrande::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02))} .setgrande > *{position:relative} .setgrande:hover{border-color:var(--sc)} .setgrande .eyebrow{color:var(--sc)} .setgrande h3{font:400 36px/1.15 var(--tit); letter-spacing:-.02em; margin:12px 0 14px} .setgrande p{font-size:16px; line-height:1.62; color:var(--text-secondary); max-width:52ch} .setgrande .vai{display:inline-block; margin-top:24px; font:400 14px var(--tit); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:10px 22px; transition:background .2s} .setgrande:hover .vai{background:rgba(255,255,255,.1)} .setgrande .foto{align-self:stretch; min-height:360px; border-radius:14px; background-size:cover; background-position:center} .setnav{display:flex; gap:10px; margin-top:2px} .setnav .freccia{width:40px; height:40px; border-radius:50%; border:1px solid var(--border-subtle); background:rgba(255,255,255,.04); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s} .setnav .freccia:not(:disabled):hover{background:rgba(255,255,255,.1); border-color:var(--border-hover)} .setnav .freccia:disabled{opacity:.3; cursor:default; pointer-events:none} /* su fondo chiaro (fascia non scura) le frecce diventano scure */ .fascia:not(.scura) .setnav .freccia{color:var(--ink); border-color:#c9c7d6; background:#fff} .fascia:not(.scura) .setnav .freccia:not(:disabled):hover{background:var(--paper)} @media(max-width:900px){ .setgrande{grid-template-columns:1fr; gap:22px; padding:24px; flex-basis:88vw} .setgrande .foto{min-height:220px; order:-1} .setgrande h3{font-size:28px} } .claims{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px} .claim h3{font-size:22px; letter-spacing:-.01em; font-weight:400} .claim{border-left:3px solid var(--accent); padding-left:20px} .joblista{border-top:1px solid var(--line)} .jobriga{display:flex; align-items:baseline; gap:18px; padding:17px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit} .jobriga:hover{background:#fff; box-shadow:inset 3px 0 0 var(--accent)} .jobriga .nome{font:400 20px var(--tit); letter-spacing:-.01em; flex:1} .jobriga .dl{font:600 12px var(--mono); letter-spacing:.06em; color:var(--accent)} /* ---- Careers: filtri a faccette + griglia posizioni ---- */ .job-filtri{display:flex; flex-wrap:wrap; gap:14px; margin:38px 0 8px} .job-filtri select{font:400 14px var(--sans); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:26px; padding:11px 42px 11px 20px; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b76' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center} .job-filtri select:focus{outline:none; border-color:var(--accent)} .job-griglia{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px} .jobcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 26px 22px; display:flex; flex-direction:column; gap:11px; text-decoration:none; color:inherit; transition:border-color .2s, box-shadow .2s, transform .2s} .jobcard:hover{border-color:var(--accent); box-shadow:0 8px 26px rgba(26,15,58,.10); transform:translateY(-2px)} .jobcard .eyebrow{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)} .jobcard h3{font-size:22px; letter-spacing:-.015em; line-height:1.2} .joblocs{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto} .joblocs span{font:500 12px var(--mono); letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:3px 11px} .jobmore{font:400 14px var(--tit); color:var(--dark); margin-top:4px} .jobcard:hover .jobmore{color:var(--accent)} .job-vuoto{margin-top:28px; color:var(--muted); font-size:16px} /* Careers ristrutturata (1 ago 2026, piano employer branding): fascia "perché qui" (4 leve in fila monoriga scorrevole), selezione trasparente a passi numerati, posizioni raggruppate per settore con pallino colore */ /* quattro colonne elastiche che riempiono SEMPRE la riga (2 ago, Giovanni: niente scrollbar orizzontale); sotto i 760px in colonna */ .leve{display:flex; gap:26px; margin-top:44px} .levacard{flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 30px 30px} .levacard h3{font-size:19px; letter-spacing:-.01em; margin-bottom:12px} .levacard p{font-size:15px; line-height:1.65; color:#37424c} .selpassi{list-style:none; counter-reset:passo; margin-top:44px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px} .selpassi li{counter-increment:passo; position:relative; padding-top:56px} .selpassi li::before{content:counter(passo,decimal-leading-zero); position:absolute; top:0; left:0; font:500 15px var(--mono); color:var(--accent); width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff} .selpassi h3{font-size:18px; letter-spacing:-.01em; margin-bottom:8px} .selpassi p{font-size:15px; line-height:1.65; color:#37424c} .jobgruppo{margin-top:50px} .jobsett{font:400 15px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:10px; margin-bottom:22px} .setdot{width:10px; height:10px; border-radius:50%; flex:none} .jobspont{margin-top:60px; padding-top:30px; border-top:1px solid var(--line)} .jobspont h3{font-size:19px; letter-spacing:-.01em; margin-bottom:6px} .jobspont p{font-size:15px; color:#37424c} .jobspont a{color:var(--accent); text-decoration:none} .jobspont a:hover{text-decoration:underline} @media(max-width:760px){.leve{flex-direction:column; gap:16px}} /* dettaglio posizione: tag sotto il titolo + box candidatura */ .jobtags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px} .jobtags span{font:500 12px var(--mono); letter-spacing:.06em; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:20px; padding:4px 13px} /* dettaglio posizione a COLONNA UNICA (2 ago 2026, Giovanni: prima si legge tutto l'annuncio, poi il form largo in fondo — #candidati, raggiunto dal bottone nell'hero); titoli dell'annuncio ridotti */ .job-dett .testo{font-size:16px; line-height:1.7; max-width:75ch} .job-dett .testo p{margin-bottom:1em} .job-dett .testo ul, .job-dett .testo ol{margin-bottom:1em} .job-dett .testo h2{font-size:20px; letter-spacing:-.01em; margin:1.6em 0 .5em} .job-dett .testo h3{font-size:18px; letter-spacing:-.01em; margin:1.5em 0 .5em} .job-dett .testo h4{font-size:16px; margin:1.3em 0 .4em} .jobcand{background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 26px 28px; position:sticky; top:90px} .jobcand.larga{position:static; max-width:720px; padding:30px 34px 34px} .jobcand h3{font-size:20px; letter-spacing:-.01em} .jobcand .pmini{font-size:14px; color:var(--muted); margin:6px 0 16px} .jobcand .modulo{max-width:none; gap:13px} .jobcand .modulo input[type=file]{font:400 14px var(--sans); color:var(--muted); padding:9px 12px} /* ---- pagina Piattaforme Tecnologiche ---- */ .intropiatt{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start} .intropiatt .titolo{font-size:clamp(24px,2.6vw,36px); letter-spacing:-.03em; margin-bottom:18px} .chklist{list-style:none; columns:2; column-gap:26px; margin-top:4px} .chklist li{break-inside:avoid; position:relative; padding:9px 0 9px 26px; border-bottom:1px solid var(--line); font-size:14px} .chklist li::before{content:"✓"; position:absolute; left:0; top:9px; color:var(--accent); font:600 14px var(--mono)} @media(max-width:820px){.intropiatt{grid-template-columns:1fr; gap:26px} .chklist{columns:1}} .piattblocco{padding:34px 0} .piatt{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:stretch} .piatt .foto{background-size:cover; background-position:center; border-radius:var(--radius-md); min-height:420px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} .piatt.rovescia .foto{order:2} .piatt .contenuto{display:flex; flex-direction:column; justify-content:center} .piatt .pnome{color:var(--sc,var(--accent)); margin-bottom:8px} .piatt .contenuto .titolo{font-size:clamp(22px,2.3vw,30px); letter-spacing:-.025em; margin:0 0 22px; max-width:22ch} @media(max-width:900px){ .piatt{grid-template-columns:1fr; gap:26px} .piatt.rovescia .foto{order:0} .piatt .foto{min-height:250px} } /* specializzazioni: nel lato immagine, piu' foto che si alternano (crossfade) */ .specslide{position:relative; border-radius:var(--radius-md); overflow:hidden; min-height:420px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} .specslide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease} .specslide img.on{opacity:1} .piatt.rovescia .specslide{order:2} @media(max-width:900px){ .specslide{min-height:250px} .piatt.rovescia .specslide{order:0} } /* accordion (fisar) su fondo chiaro: accordion CLASSICO (non a somma costante). La voce chiusa collassa alla riga del titolo; solo l'aperta espande il testo. Annulla altezza fissa e distribuzione flex ereditate dalla versione scura. */ .fisar.chiara{height:auto; display:block; border-top-color:var(--line)} .fisar.chiara .spec{flex:none; display:block; border-bottom-color:var(--line)} .fisar.chiara .spec:hover{background:rgba(0,0,0,.025)} .fisar.chiara .spec.on{background:rgba(0,0,0,.015)} .fisar.chiara .nome{color:var(--ink)} .fisar.chiara .num{color:var(--muted)} .fisar.chiara .piu{color:var(--muted)} /* apertura animata all'ALTEZZA REALE del contenuto: il JS (movimento()) imposta max-height = scrollHeight della voce aperta, e la rimette a 0 su quelle chiuse. Animando all'altezza esatta (non a un max fisso) non c'e' overshoot — la fascia non "gonfia e poi si restringe" e la foto non zooma di scatto. */ .fisar.chiara .desc{color:#4a4a52; max-height:0; overflow:hidden; opacity:0; padding-bottom:0; transition:max-height .4s ease, opacity .3s, padding-bottom .4s} .fisar.chiara .spec.on .desc{opacity:1; padding-bottom:22px} /* ---- pagina La Società ---- */ /* carosello generico full-bleed (stesso comportamento delle news) */ .carosello{overflow:hidden} .carosello .testata{display:flex; align-items:center; justify-content:space-between; gap:20px} .carosello .frecce{display:flex; gap:10px; flex:none} .carosello .freccia{width:42px; height:42px; border-radius:50%; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--dark); font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s} /* hover SOLO se attiva; la disattivata è inerte (niente hover né cursore) */ .carosello .freccia:not(:disabled):hover{background:var(--dark-3); color:#fff; border-color:var(--dark-3)} .carosello .freccia:disabled{opacity:.3; cursor:default; pointer-events:none} /* FRECCE SOVRAPPOSTE alla pista (decisione Giovanni, 19 lug 2026, per TUTTI i caroselli con frecce): a bordo pagina, centrate in verticale sulle card — devono stare in vista INSIEME a ciò che sfogliano, non su nel titolo, e la card tagliata sta al bordo pagina: il comando va sul punto del taglio. I bottoni vivono in un involucro .pistawrap attorno alla sola pista (NON nella .testata dentro il .wrap: sulle pagine trattate da stile3d il .wrap è position:relative e diventerebbe lui il containing block — le frecce si centrerebbero sul titolo). L'ombra le stacca dalle foto. */ .pistawrap{position:relative} .pistawrap .freccia{position:absolute; top:50%; transform:translateY(-50%); z-index:3; box-shadow:0 4px 14px rgba(26,15,58,.18)} .pistawrap .freccia.prev{left:2.5vw} .pistawrap .freccia.next{right:2.5vw} .carosello .pista{margin-top:22px} /* niente scroll-snap: navigazione pilotata dalle frecce. padding-left allineato al bordo del contenuto (.wrap max-width 1240) su schermi larghi; a destra le schede sfondano oltre il bordo. */ .carosello .cartrack{display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding-top:4px; padding-bottom:14px; padding-right:6vw; padding-left:max(6vw, calc((100vw - var(--wrapmax)) / 2 + 6vw))} .carosello .cartrack::-webkit-scrollbar{display:none} /* quando la pista ha abbastanza contenuto da SCORRERE, la prima card parte dal bordo dello schermo e non dall'area principale (decisione Giovanni, 19 lug 2026): sugli schermi larghi non resta vuoto sotto la freccia sinistra. La classe .piena la mette il JS (movimento) misurando l'overflow col padding wrap-allineato ipotetico. */ .carosello.piena .cartrack{padding-left:6vw} /* fascia con lead a TUTTA larghezza (classe `larga` dello store, 20 lug) */ .fascia.larga .lead{max-width:none} /* quotazione: lead su una riga piena col logo Euronext accanto */ .quotariga{display:flex; align-items:center; gap:28px} .quotariga .quotatesto{flex:1} .quotariga .quotatesto p{margin:0} .quotariga .quotatesto .lead{margin-bottom:22px} /* i tre contatori stanno raggruppati a sinistra, non stirati su tutta la riga (Giovanni, 23 set 2026: su desktop sembravano "sparsi") */ .mercato .contatori{grid-template-columns:repeat(auto-fit,minmax(160px,max-content)); column-gap:96px; justify-content:start} .logo-euronext{flex:none; line-height:0; opacity:.92; transition:opacity .2s} .logo-euronext:hover{opacity:1} @media(max-width:640px){.quotariga{flex-direction:column; align-items:flex-start; gap:14px}} /* quando invece la pista ci sta TUTTA (niente classe .scorre dal JS), le frecce spariscono e le card si CENTRANO con padding simmetrico (decisione Giovanni, 20 lug 2026: comandi solo quando servono) */ .carosello:not(.scorre) .freccia{display:none} .carosello:not(.scorre) .cartrack{justify-content:center; padding-left:6vw} /* ---- La Società: fascia "modello" (tesi + citazione CEO) e blocco citabile col bottone copia (20 lug 2026) ---- */ /* fascia GRIGIA (20 lug 2026: ristabilisce l'alternanza dopo l'hero navy). Larghezze invertite (Giovanni): l'intro in piccolo va a TUTTA larghezza, la citazione a 2/3; la firma resta a destra sulla larghezza piena */ .modello .lead.manifesto{max-width:none} .modello .citazione{margin:44px 0 0; padding:28px 0 0; border-top:1px solid var(--line)} .modello .citazione p{max-width:66%} @media(max-width:900px){.modello .citazione p, .modello .citazione .firma{max-width:none}} /* corsivo, senza punto finale (il dato non lo contiene), firma a destra e vicina (NB: non usare