/* Eureka — foglio di stile condiviso da tutte le pagine. Prima viveva duplicato dentro index.html e aziende.html: le due copie avevano già iniziato a divergere, quindi ora la sorgente è una sola. */ /* ---------- CARATTERI, OSPITATI QUI ---------- Prima arrivavano da Google Fonts: il browser doveva risolvere due domini e scaricare un foglio di stile in più prima di poter disegnare il testo, e in mobilità quell'attesa si vedeva. Ora i quattro file stanno in assets/fonts e partono insieme alla pagina. Sono i file variabili di Google — uno solo copre tutti i pesi che usiamo — quindi il conto dei byte scende comunque. I sottoinsiemi restano divisi: «latin-ext» lo scarica solo chi incontra una parola che ne ha bisogno. */ @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Sora'; font-style:normal; font-weight:700 800; font-display:swap; src:url(/assets/fonts/sora-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Sora'; font-style:normal; font-weight:700 800; font-display:swap; src:url(/assets/fonts/sora-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ color-scheme:dark light; --bg:#14122A; --surface:#1E1B3D; --ink:#F6F4FF; --ink-mid:#C7C2E0; --ink-soft:#8F89AD; --ink-fixed:#0C0A1E; --violet:#FF6A22; --violet-dark:#FF8A4C; --violet-pale:rgba(255,106,34,0.16); --pink:#FFC93D; --mint:#00D9A8; --line:rgba(246,244,255,0.14); --line-soft:rgba(246,244,255,0.08); /* Le due famiglie stanno qui, non sparse per il foglio, e ognuna porta dietro il carattere di sistema del telefono: i caratteri arrivano con display:swap, e finché non arrivano il testo viene disegnato col ripiego. Con il generico "sans-serif" quel ripiego cambiava proporzioni da un blocco all'altro (e da telefono a telefono). */ --font-display:'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --radius:20px; --radius-lg:26px; --max:1180px; /* Altezza reale dell'intestazione sticky (16 di padding sopra e sotto + 44 del pulsante): serve al foglio mobile per far partire il menu a tutta altezza esattamente sotto la barra, senza numeri sparsi da tenere allineati. */ --headerH:76px; --shadow-sm:0 2px 10px -2px rgba(0,0,0,.35); --shadow-md:0 16px 38px -18px rgba(0,0,0,.55); --shadow-lg:0 32px 64px -28px rgba(0,0,0,.65); } *{box-sizing:border-box; margin:0; padding:0;} /* Il colore di fondo sta su e non su : così il livello di sfere animate (.bg-orbs, z-index:-1) resta visibile sotto al contenuto della pagina. */ /* text-size-adjust: iOS Safari, ruotando il telefono in orizzontale, ingrandisce da solo il testo dei blocchi larghi e manda fuori misura titoli e pulsanti. */ html{ scroll-behavior:smooth; scroll-padding-top:84px; background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ background:transparent; color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-0.035em; color:var(--ink); line-height:1.04;} a{color:inherit; text-decoration:none;} ul{list-style:none;} img,svg{display:block; max-width:100%;} /* L'attributo hidden deve valere anche sugli elementi a cui il foglio assegna un display (flex, grid, inline-flex): altrimenti il display del foglio vince e l'elemento «nascosto» resta a vista. */ [hidden]{display:none !important;} .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;} ::selection{background:var(--violet); color:var(--ink-fixed);} a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{ outline:2.5px solid var(--violet); outline-offset:3px; border-radius:6px; } .skip-link{ position:absolute; left:14px; top:-60px; z-index:200; background:var(--ink-fixed); color:#fff; padding:12px 20px; border-radius:10px; font-weight:700; font-size:.9rem; transition:top .2s ease; } .skip-link:focus{top:14px;} /* ---------- atoms ---------- */ .pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; font-size:0.8rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; background:var(--violet-pale); color:var(--violet-dark); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:12px; font-weight:700; font-size:1rem; border:none; cursor:pointer; font-family:inherit; text-align:center; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .btn-primary{background:var(--violet); color:var(--ink-fixed); box-shadow:0 10px 22px -10px rgba(255,106,34,.55);} .btn-primary:hover{background:var(--violet-dark); transform:translateY(-2px);} .btn-outline{background:var(--surface); color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow-sm);} .btn-outline:hover{border-color:var(--violet); color:var(--violet-dark); transform:translateY(-2px);} .btn-sm{padding:11px 20px; font-size:0.93rem;} .link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--violet-dark); font-size:1rem; transition:gap .16s ease; } .link-arrow:hover{gap:12px;} section{padding:104px 0;} .sec-head{max-width:660px; margin-bottom:52px;} .sec-head.center{margin-left:auto; margin-right:auto; text-align:center;} .sec-head h2{font-size:clamp(2.3rem, 5vw, 3.9rem); margin-top:18px; line-height:1.02;} .sec-head p{color:var(--ink-soft); margin-top:20px; font-size:1.15rem; max-width:56ch;} /* ---------- NAVBAR ---------- */ header{ position:sticky; top:0; z-index:100; background:rgba(20,18,42,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } nav.wrap{display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px;} .logo{font-family:var(--font-display); font-weight:800; font-size:1.3rem; display:flex; align-items:center; gap:9px; flex-shrink:0;} .navlinks{display:flex; gap:28px; font-size:0.97rem; font-weight:600; color:var(--ink-mid); margin-left:auto;} .navlinks a{display:inline-block; padding:4px 0; transition:color .15s ease, transform .15s ease;} .navlinks a:hover{color:var(--violet); transform:scale(1.08);} .nav-cta{flex-shrink:0;} /* «Accedi» è un ingresso di ritorno all'area studente: un collegamento sobrio accanto al CTA di iscrizione, non un secondo pulsante pieno che gli farebbe concorrenza. */ .nav-login{flex-shrink:0; font-weight:700; font-size:0.95rem; color:var(--ink); padding:4px 2px; transition:color .15s ease, transform .15s ease;} .nav-login:hover{color:var(--violet); transform:scale(1.08);} .nav-toggle{ display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); position:relative; transition:border-color .2s ease, background .2s ease; } .nav-toggle svg{width:22px; height:22px; transition:opacity .2s ease;} /* Menu aperto: il pulsante prende l'accento del sito e le tre righe lasciano il posto a una X disegnata coi due pseudo-elementi. Tutto in CSS, agganciato ad aria-expanded che site.js aggiorna: vale su ogni pagina senza toccarne il markup. */ .nav-toggle[aria-expanded="true"]{ border-color:var(--violet); background:var(--violet-pale); color:var(--violet-dark); } .nav-toggle[aria-expanded="true"] svg{opacity:0;} .nav-toggle[aria-expanded="true"]::before, .nav-toggle[aria-expanded="true"]::after{ content:""; position:absolute; left:50%; top:50%; width:20px; height:2.2px; border-radius:2px; background:currentColor; } .nav-toggle[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg);} .nav-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg);} @media(max-width:940px){ .navlinks{display:none;} .nav-cta{display:none;} .nav-login{display:none;} .nav-toggle{display:flex;} /* Il menu copre TUTTO lo schermo (inset:0), non solo da sotto la barra: così il suo fondo pieno nasconde la pagina anche nella striscia in alto e non ci si vede più «spuntare» il contenuto sotto. Le voci partono sotto la barra grazie al padding-top. Entra con una dissolvenza in salita; le voci compaiono a cascata (ritardi per posizione più sotto). È position:fixed su (site.js lo sposta lì), non un blocco nel flusso: aprendolo a metà pagina un foglio nel flusso cambiava l'altezza del documento mentre lo scorrimento era bloccato e su iOS congelava. Da fisso è agganciato al viewport e non tocca il flusso. */ .mobile-menu.open{ display:block; position:fixed; inset:0; z-index:95; padding-top:calc(var(--headerH) + 8px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; animation:menuSheetIn .32s cubic-bezier(.2,.8,.25,1) both; } /* Mentre il menu è aperto la barra è fissata in cima: sticky + blocco dello scorrimento su iOS la faceva scomparire (finiva sopra il viewport) e con lei la X per chiudere. Fissa resta sempre visibile, sopra il foglio (z-index 100 contro 95): logo a sinistra e X a destra restano a portata. */ html.menu-open header{position:fixed; top:0; left:0; right:0;} /* La barra CTA fissa in fondo sparirebbe sotto il foglio: mentre il menu è aperto non serve, il menu ha già il suo pulsante. */ html.menu-open .mobile-cta-bar{display:none;} } /* Il menu vive dentro l'intestazione sticky: se la pagina sotto continuasse a scorrere, il contenuto si muoverebbe sotto un menu fermo. Lo stato è messo su da site.js perché su iOS il blocco sul solo non tiene. */ html.menu-open, html.menu-open body{overflow:hidden;} .mobile-menu{ display:none; border-top:1px solid var(--line); background:var(--surface); padding:8px 24px calc(24px + env(safe-area-inset-bottom)); } /* Il contenitore interno è la colonna che distribuisce le voci: prende tutta l'altezza del foglio così il pulsante finale può scendere in fondo. */ .mobile-menu > .wrap{display:flex; flex-direction:column; min-height:100%;} .mobile-menu a{ display:flex; align-items:center; justify-content:space-between; padding:18px 2px; font-weight:600; font-size:1.22rem; color:var(--ink); } /* Freccia a fine riga: dà il segno di «vai» e, alla pressione, scivola in avanti restituendo al dito la sensazione del tocco (sul telefono non c'è :hover). */ .mobile-menu a:not(.btn)::after{ content:"→"; color:var(--ink-soft); font-weight:700; transition:transform .18s ease, color .18s ease; } .mobile-menu a:not(.btn):active{color:var(--violet-dark);} .mobile-menu a:not(.btn):active::after{transform:translateX(5px); color:var(--violet-dark);} /* la riga di separazione è tra le voci, non sotto il pulsante finale */ .mobile-menu a:not(.btn){border-bottom:1px solid var(--line-soft);} /* Il pulsante scende in fondo al foglio (margin-top:auto) e resta a portata di pollice qualunque sia il numero di voci sopra. */ .mobile-menu .btn{ width:100%; margin-top:auto; margin-bottom:6px; padding:17px 24px; font-size:1.05rem; justify-content:center; } /* Ingresso del foglio e comparsa a cascata delle voci. Sono animazioni (non transizioni): scattano quando site.js aggiunge .open e l'elemento passa da display:none a visibile, dove una transizione non partirebbe. */ @keyframes menuSheetIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} } @keyframes menuItemIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} } .mobile-menu.open > .wrap > a{animation:menuItemIn .4s cubic-bezier(.2,.8,.25,1) both;} .mobile-menu.open > .wrap > a:nth-child(1){animation-delay:.06s;} .mobile-menu.open > .wrap > a:nth-child(2){animation-delay:.11s;} .mobile-menu.open > .wrap > a:nth-child(3){animation-delay:.16s;} .mobile-menu.open > .wrap > a:nth-child(4){animation-delay:.21s;} .mobile-menu.open > .wrap > a:nth-child(5){animation-delay:.26s;} .mobile-menu.open > .wrap > a:nth-child(6){animation-delay:.31s;} /* ---------- SFONDO: SFERE IN MOVIMENTO ---------- Prima erano due pseudo-elementi dell'hero e sparivano appena si scorreva. Ora sono un livello fisso dietro tutta la pagina: le sezioni con fondo pieno (.problem, footer) le coprono, quelle trasparenti le lasciano intravedere. Solo transform e opacity, così l'animazione resta sul compositor. */ .bg-orbs{ /* Il livello sborda di 80px per lato: tanto basta perché la parallasse non scopra mai il bordo di ritaglio, e non tanto da spostare le sfere fuori schermo. Il ritaglio coincide quindi col bordo della finestra. */ position:fixed; inset:-80px; z-index:-1; pointer-events:none; overflow:hidden; transform:translate3d(0,0,0); transition:transform .9s cubic-bezier(.2,.7,.3,1); } .orb{ position:absolute; border-radius:50%; will-change:transform; transform-origin:center; } .orb-1{ top:-16vh; right:-8vw; width:min(52vw,700px); aspect-ratio:1; background:radial-gradient(circle at 34% 32%, rgba(255,106,34,.44), rgba(255,201,61,.16) 54%, transparent 72%); animation:orbA 17s ease-in-out infinite; } .orb-2{ top:28vh; right:12vw; width:min(32vw,450px); aspect-ratio:1; background:radial-gradient(circle at 42% 38%, rgba(255,201,61,.30), rgba(255,106,34,.10) 55%, transparent 72%); animation:orbB 21s ease-in-out infinite; } .orb-3{ top:46vh; left:-16vw; width:min(42vw,560px); aspect-ratio:1; background:radial-gradient(circle at 58% 44%, rgba(0,217,168,.20), rgba(108,140,255,.10) 52%, transparent 70%); animation:orbC 26s ease-in-out infinite; } .orb-4{ top:4vh; left:20vw; width:min(22vw,300px); aspect-ratio:1; background:radial-gradient(circle at 45% 45%, rgba(255,106,34,.26), transparent 68%); animation:orbD 13s ease-in-out infinite; } @keyframes orbA{ 0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); } 25%{ transform:translate3d(-13vw,7vh,0) scale(1.16) rotate(60deg); } 50%{ transform:translate3d(-5vw,17vh,0) scale(.86) rotate(140deg); } 75%{ transform:translate3d(7vw,5vh,0) scale(1.08) rotate(250deg); } } @keyframes orbB{ 0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); } 30%{ transform:translate3d(12vw,-14vh,0) scale(1.24) rotate(-90deg); } 60%{ transform:translate3d(-9vw,-4vh,0) scale(.82) rotate(-180deg); } 85%{ transform:translate3d(4vw,10vh,0) scale(1.1) rotate(-290deg); } } @keyframes orbC{ 0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); } 33%{ transform:translate3d(16vw,-11vh,0) scale(1.2) rotate(120deg); } 66%{ transform:translate3d(6vw,12vh,0) scale(.88) rotate(240deg); } } @keyframes orbD{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 40%{ transform:translate3d(9vw,12vh,0) scale(1.3); } 70%{ transform:translate3d(-6vw,6vh,0) scale(.78); } } /* Su schermi piccoli le sfere fisse costano parecchio: ne restano due, più lente. */ @media(max-width:760px){ .orb-2, .orb-4{display:none;} .orb-1{animation-duration:26s;} .orb-3{animation-duration:34s;} } /* ---------- HERO ---------- */ .hero{position:relative; padding:52px 0 84px; overflow:hidden;} /* ---------- FASCIA NUMERI ---------- */ /* Due soli numeri: la fascia non deve occupare tutta la larghezza, o resta un riquadro vuoto con due cifre perse in mezzo. Il pannello si stringe sul contenuto, sta al centro e ha una piccola soprascritta che gli dà senso. */ .stats-band{padding:0 0 64px;} .stats-panel{ width:fit-content; max-width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; padding:26px 44px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); text-align:center; } .stats-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .stats-nums{display:flex; align-items:center; justify-content:center; gap:44px;} .stat{display:flex; flex-direction:column; gap:4px;} .stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 2.7rem); line-height:1; color:var(--violet); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .stat-label{color:var(--ink-soft); font-weight:600; font-size:.9rem;} .stats-div{width:1px; align-self:stretch; background:var(--line);} @media(max-width:600px){ .stats-band{padding:0 0 44px;} .stats-panel{padding:22px 26px; gap:14px;} .stats-nums{gap:28px;} .stat-num{font-size:clamp(2.4rem, 11vw, 3.2rem);} .stat-label{font-size:.95rem;} } /* Hero a colonna unica: prima il titolo, poi la fascia che presenta il motore di affinità e il motore stesso, uno sotto l'altro e centrati. Prima il motore stava a destra del titolo e si contendeva con lui l'attenzione. */ .hero-stack{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:46px; } .hero-lead{max-width:760px;} .hero-lead .lede{margin-left:auto; margin-right:auto;} .hero-affinita-intro{max-width:620px;} .hero-affinita-intro h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem, 3.4vw, 2.4rem); line-height:1.08; margin-top:14px; } .hero-affinita-intro p{color:var(--ink-soft); margin-top:14px; font-size:1.05rem;} /* Dentro al motore torna l'allineamento a sinistra: chip e risultati restano incolonnati come nel resto del sito, non centrati dalla colonna dell'hero. */ .hero-stack .hero-match.is-profile{width:100%; max-width:560px; text-align:left;} .hero h1{font-size:clamp(2.6rem, 5.6vw, 5rem); margin:20px 0 24px; line-height:1.03;} .hero h1 .grad{background:linear-gradient(96deg, var(--violet), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal;} .hero h1 .line-mask > span{white-space:nowrap;} @media(max-width:600px){ .hero h1 .line-mask > span{white-space:normal;} } .hero p.lede{font-size:1.05rem; color:var(--ink-soft); max-width:46ch;} .hero-cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:34px;} @media(max-width:520px){ .hero-cta .btn{width:100%;} } /* L'affinità in tempo reale (assets/affinita.js). Il pannello di prima era una figura: due schede finte e un 86% scritto a mano, tenuto insieme da posizionamenti assoluti che si scomponevano a ogni riga in più. Questo invece calcola davvero, sulle aziende del portale. Tutto in flusso normale: niente assoluti, niente overflow, regge a qualsiasi lunghezza. Stesse regole in due posti: completo su /aziende (.is-wide), in versione tascabile nell'hero della home (.is-profile). Le differenze stanno in fondo al blocco. */ .hero-match{ display:flex; flex-direction:column; gap:14px; min-width:0; background:linear-gradient(160deg, var(--violet-pale), var(--surface)); border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow-lg); } .hm-head{display:flex; flex-direction:column; gap:6px;} .hm-eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); } .hm-ask{font-family:var(--font-display); font-weight:800; font-size:1.12rem; margin:0;} /* La seconda domanda (la sede) è un gradino sotto: si capisce che è un affinamento della prima, non una richiesta di pari peso. */ .hm-ask-sm{font-size:.95rem; margin-top:2px;} .hm-opt{font-family:inherit; font-size:.72rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;} /* I temi: pulsanti veri (aria-pressed), non finte pillole. */ .hm-chips{display:flex; flex-wrap:wrap; gap:7px;} .hm-chip{ font-family:inherit; font-size:.8rem; font-weight:700; line-height:1.2; padding:8px 13px; border-radius:99px; cursor:pointer; background:var(--bg); color:var(--ink-mid); border:1px solid var(--line); transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .hm-chip:hover{border-color:var(--violet); color:var(--ink);} .hm-chip:active{transform:scale(.96);} .hm-chip.on{background:var(--violet); border-color:var(--violet); color:#14122A;} .hm-out{display:flex; flex-direction:column; gap:12px;} .hm-empty{margin:0; font-size:.92rem; color:var(--ink-soft); padding:14px 0;} /* Testa del risultato: l'anello con la percentuale e, accanto, chi è. La griglia auto+1fr tiene l'anello a misura fissa e lascia al nome tutto lo spazio restante — con minmax(0,1fr) così un nome lungo non sfonda il blocco. */ .hm-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; } /* L'anello è un conic-gradient pilotato da --p (0-100), che il JS fa salire da zero: la percentuale si vede crescere invece di comparire già scritta. Il colore dell'arco segue la fascia di affinità (--aff-c, impostata dalle classi aff-liv-*), la stessa arancio → ambra → verde della scheda e delle card. */ .hm-ring{ --p:0; --aff-c:var(--violet); width:92px; height:92px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: conic-gradient(var(--aff-c) calc(var(--p) * 1%), var(--line) 0); position:relative; } .hm-ring.aff-liv-media{--aff-c:var(--pink);} .hm-ring.aff-liv-alta{--aff-c:var(--mint);} .hm-ring::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface); } .hm-ring-num{ position:relative; font-family:var(--font-display); font-weight:800; font-size:1.42rem; letter-spacing:-.02em; color:var(--aff-c); } .hm-top-id{display:flex; flex-direction:column; gap:3px; min-width:0;} .hm-top-label{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);} .hm-top-name{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; line-height:1.2; color:var(--ink); text-decoration:none; } .hm-top-name:hover{color:var(--violet-dark);} /* Alcune etichette di settore sono lunghe ("Apparecchi in pressione · Oil & Gas, Petrolchimico, Nucleare"): due righe al massimo, così l'altezza del pannello non cambia passando da un'azienda all'altra. */ .hm-top-meta{ font-size:.84rem; color:var(--ink-soft); font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Le ragioni del punteggio, sotto il nome. Piccole e in fila: sono la didascalia della percentuale, non un secondo contenuto che le contende l'attenzione. */ .hm-why{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;} .hm-why-item{ font-size:.72rem; font-weight:700; line-height:1.35; padding:3px 9px; border-radius:99px; background:var(--violet-pale); color:var(--ink-mid); border:1px solid var(--line-soft); } /* Il logo su piastra chiara, come nella fascia a scorrimento: i loghi sono pensati per fondo bianco e su quello si leggono. */ .hm-top-logo{ align-self:flex-start; margin-top:7px; height:44px; max-width:100%; display:flex; align-items:center; justify-content:center; padding:6px 10px; background:#fff; border:1px solid var(--line); border-radius:10px; } .hm-top-logo img{max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease;} .hm-top-logo img.loaded{opacity:1;} .hm-count{margin:0; font-size:.82rem; font-weight:700; color:var(--ink-soft);} /* Le altre in linea: righe compatte con barra, per dare profondità al risultato senza rubare spazio alla testa. */ .hm-rows{display:flex; flex-direction:column; gap:8px;} .hm-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); transition:border-color .15s ease, transform .15s ease; } .hm-row:hover{border-color:var(--violet); transform:translateX(2px);} .hm-row-logo{ width:52px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:4px 6px; background:#fff; border:1px solid var(--line); border-radius:8px; } .hm-row-logo img{max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease;} .hm-row-logo img.loaded{opacity:1;} .hm-row-id{display:flex; flex-direction:column; gap:1px; min-width:0;} .hm-row-name{font-weight:700; font-size:.94rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hm-row-meta{font-size:.76rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hm-row-score{display:flex; flex-direction:column; align-items:flex-end; gap:5px; width:62px; flex-shrink:0; --aff-c:var(--violet);} .hm-row-score.aff-liv-media{--aff-c:var(--pink);} .hm-row-score.aff-liv-alta{--aff-c:var(--mint);} .hm-row-pct{font-family:var(--font-display); font-weight:800; font-size:.92rem; color:var(--aff-c);} .hm-bar{width:100%; height:4px; border-radius:99px; background:var(--line); overflow:hidden;} .hm-bar-fill{ display:block; height:100%; border-radius:99px; background:var(--aff-c); transition:width .45s cubic-bezier(.2,.8,.25,1); } .hm-note{margin:0; font-size:.76rem; line-height:1.5; color:var(--ink-soft);} .hm-note a{color:var(--violet-dark); font-weight:700;} /* Il come-si-calcola è ora ripiegato dietro un riepilogo: in chiaro resta solo la riga che rassicura, il dettaglio si apre a chi lo cerca. Così lo stato pieno del blocco non è più preceduto da un paragrafo grigio che compete con i comandi. */ .hm-how{margin:0;} .hm-how summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; color:var(--violet-dark); } .hm-how summary::-webkit-details-marker{display:none;} .hm-how summary::after{content:"›"; font-size:1.05rem; line-height:1; transition:transform .15s ease;} .hm-how[open] summary::after{transform:rotate(90deg);} .hm-how p{margin:8px 0 0; font-size:.76rem; line-height:1.5; color:var(--ink-soft);} /* Stato vuoto di /aziende: un esempio dichiarato riempie la colonna del risultato (a destra su desktop) e mostra che forma avrà la risposta, invece di lasciare metà pannello vuota con il solo invito. Smorzato e non interattivo: è una dimostrazione, non un risultato da toccare. */ .hm-sample{position:relative; opacity:.5; filter:saturate(.72); pointer-events:none;} .hm-sample-tag{ position:absolute; top:-9px; left:12px; z-index:1; font-family:var(--font-body); font-weight:700; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); background:var(--bg); padding:2px 8px; border-radius:99px; border:1px solid var(--line-soft); } /* Il risultato viene ricostruito a ogni tocco: senza una breve dissolvenza il passaggio da un'azienda all'altra è secco. Solo dove il movimento è gradito. */ @media (prefers-reduced-motion: no-preference){ #matchOut .hm-top, #matchOut .hm-count, #matchOut .hm-rows{animation:hmFade .32s ease both;} } @keyframes hmFade{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}} /* ---------- versione completa: pagina delle aziende ---------- */ /* Sta fra il titolo della directory e l'elenco. Nessun fondo proprio: è un pannello appoggiato sulla pagina, non un'altra sezione che spezza la lettura. */ .affinita-band{padding:26px 0 8px;} @media(max-width:760px){ .affinita-band{padding:18px 0 4px;} /* Serve la doppia classe: .hero-match.is-wide vince comunque sulla misura generica del telefono, anche se scritta prima. */ .hero-match.is-wide{padding:18px;} } .hm-inputs{display:flex; flex-direction:column; gap:12px; min-width:0;} .hero-match.is-wide{padding:26px;} /* A piena pagina le domande vanno accanto al risultato: incolonnate, una fila di chip larga tutta la pagina spingerebbe la classifica sotto la piega, cioè fuori vista proprio mentre la si sta cambiando. */ @media(min-width:861px){ .hero-match.is-wide{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:28px; row-gap:18px; align-items:start; } .hero-match.is-wide .hm-head{grid-column:1 / -1;} .hero-match.is-wide .hm-note{margin-top:2px;} } /* Sul telefono la band è in colonna unica e sta sopra la griglia dei risultati, che mostra già la classifica intera in ordine di affinità. Perché il blocco non cresca a ogni scelta ripetendo quell'elenco, l'anteprima si riduce alla sola azienda in testa con il suo perché e il conteggio: le altre due righe e la piastra del logo, che qui non aggiungono nulla, restano al desktop. E lo stato vuoto non disegna l'esempio: serviva a riempire la colonna destra del desktop, su una colonna sola è solo una finta scheda in più. */ @media(max-width:860px){ #matchOut .hm-rows, #matchOut .hm-top-logo, #matchOut .hm-sample{display:none;} } /* ---------- profilo: hero della home ---------- */ /* La versione tascabile del blocco di /aziende: due domande, il proprio risultato e il passaggio alla directory. Disegnata prima per il telefono — pastiglie grandi abbastanza da premerle col pollice, una colonna sola, niente che sborda — e poi lasciata crescere sul desktop. */ .hero-match.is-profile{gap:12px; padding:20px;} /* Testa: la faccina, chi sei e la domanda; il pulsante «Azzera» a destra, alto quanto le due righe di testo, così non ruba spazio alla domanda. */ .hero-match.is-profile .hm-head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; row-gap:1px; align-items:center; } .hp-avatar{ grid-column:1; grid-row:1 / 3; width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:linear-gradient(150deg, var(--violet), var(--pink)); box-shadow:0 0 0 4px rgba(255,106,34,.14); } .hero-match.is-profile .hm-head .hm-eyebrow{grid-column:2; grid-row:1; align-self:end;} .hero-match.is-profile .hm-head .hm-ask{grid-column:2; grid-row:2; align-self:start;} #hpCount{color:var(--violet-dark);} .hp-reset{ grid-column:3; grid-row:1 / 3; font-family:inherit; font-size:.74rem; font-weight:700; line-height:1; color:var(--ink-soft); background:none; border:1px solid var(--line); border-radius:99px; padding:8px 12px; cursor:pointer; transition:color .15s ease, border-color .15s ease; } .hp-reset:hover{color:var(--ink); border-color:var(--violet);} /* La scheda del risultato è il punto caldo dell'hero: sfondo e bordo la staccano dal pannello che la contiene. */ .hero-match.is-profile .hm-top{ background:linear-gradient(160deg, var(--surface), rgba(255,106,34,.08)); border-color:rgba(255,106,34,.38); box-shadow:0 0 46px -22px rgba(255,106,34,.55); } .hero-match.is-profile .hm-ring{width:82px; height:82px;} .hero-match.is-profile .hm-ring::before{inset:6px;} .hero-match.is-profile .hm-ring-num{font-size:1.24rem;} .hero-match.is-profile .hm-top-name{font-size:1.1rem;} .hero-match.is-profile .hm-top-logo{height:36px; margin-top:6px;} /* Con il profilo completo l'etichetta sopra il nome è «La tua azienda»: è una risposta, non più l'attesa, e il colore lo dice. */ .hero-match.is-profile.is-mio .hm-top-label{color:var(--violet-dark);} /* Lo stato d'attesa: al posto dell'azienda c'è Eureka. Deve leggersi come un segnaposto sincero e non come un risultato, quindi niente bagliore e niente bordo acceso — quelli tornano quando l'azienda c'è davvero. */ .hm-top.is-eureka{ background:var(--surface); border-color:var(--line); box-shadow:none; } /* Anello pieno, ma nei due colori del marchio invece che nell'arancio del punteggio: è chiaro che non sta misurando una percentuale. */ .hm-ring.is-eureka{ background:conic-gradient(from 200deg, var(--violet), var(--pink), var(--violet)); } .hm-mark{ position:relative; width:46%; height:auto; color:var(--violet); } .hero-match.is-profile .hm-top.is-eureka .hm-top-label{color:var(--ink-soft);} .hm-top.is-eureka .hm-top-name{color:var(--ink);} .hp-hint{margin:0; font-size:.8rem; line-height:1.5; color:var(--ink-soft);} .hp-cta{width:100%;} /* ---------- PROBLEMA ---------- */ .problem{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;} @media(max-width:900px){ .problem-grid{grid-template-columns:1fr; gap:40px;} } .problem h2{font-size:clamp(2rem, 4vw, 3rem); line-height:1.04;} .problem .answer{font-size:1.1rem; color:var(--ink-mid); margin-top:26px; font-weight:600;} .questions{display:flex; flex-direction:column; gap:16px; position:relative; padding-left:32px;} /* il filo che attraversa le domande: tiene insieme i tre dubbi come un unico percorso, non è solo una decorazione */ .questions::before{ content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--violet), var(--pink)); opacity:.4; border-radius:2px; } /* I selettori sono discendenti (.questions .q-bubble) per stare sopra a ".reveal.visible{transform:none}": a parità di peso vincerebbe quella, e le bolle non si ingrandirebbero al passaggio del mouse. */ .questions .q-bubble{ background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:17px 22px; font-size:1.02rem; color:var(--ink-mid); font-weight:600; position:relative; transform-origin:left center; cursor:default; transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .22s ease, color .22s ease, background .22s ease, box-shadow .3s ease, opacity .75s; } /* nodo sul filo, allineato al centro verticale di ogni bolla */ .q-bubble::after{ content:""; position:absolute; left:-29px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:var(--violet); border:2px solid var(--surface); z-index:1; } /* barretta luminosa che compare a sinistra della bolla attiva */ .q-bubble::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(var(--violet), var(--pink)); opacity:0; transform:scaleY(.3); transform-origin:center; transition:opacity .25s ease, transform .25s ease; } .questions .q-bubble:hover{ transform:scale(1.05) translateX(8px); border-color:var(--violet); color:var(--ink); background:linear-gradient(115deg, rgba(255,106,34,.16), rgba(255,201,61,.06) 70%, var(--bg)); box-shadow:0 20px 40px -22px rgba(255,106,34,.75); z-index:2; } .questions .q-bubble:hover::before{opacity:1; transform:scaleY(1);} @media(max-width:520px){ .questions{padding-left:26px;} .q-bubble::after{left:-23px;} } /* ---------- PIASTRA DEI LOGHI ---------- Quasi tutti i loghi aziendali sono a inchiostro nero o molto scuro: appoggiati sul fondo notte del sito diventavano macchie illeggibili, e in qualche caso spariva perfino il nome dell'azienda. Ogni logo viaggia quindi su una piastra chiara — la stessa in tutto il sito, dalla fascia scorrevole alle schede — così l'azienda si riconosce come sulla sua carta intestata. Le uniche eccezioni sono i posti dove il fondo bianco c'era già: l'avatar dell'hero e la scheda azienda. */ .company-logo-link:has(img), .fc-logo:has(img), .logo-band-item{ background:#fff; border:1px solid rgba(20,18,42,.12); border-radius:12px; box-shadow:0 10px 22px -18px rgba(0,0,0,.85); padding:7px 11px; box-sizing:border-box; } /* Dove :has() non c'è, la piastra resta comunque sotto i loghi: cambia solo che non sa distinguere il caso — raro — della scheda senza logo. */ @supports not selector(:has(img)){ .company-logo-link, .fc-logo{ background:#fff; border:1px solid rgba(20,18,42,.12); border-radius:12px; padding:7px 11px; box-sizing:border-box; } } /* ---------- AZIENDE IN HOME: fascia loghi + schede in evidenza ---------- Prima c'era un carosello: una scatola stretta con dentro sedici aziende in fila, illeggibili tre alla volta. Ora la larghezza è quella della pagina, le schede in evidenza sono sei e la fascia dei loghi racconta il resto. */ .logo-band{ position:relative; overflow:hidden; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); padding:18px 0; margin-bottom:56px; } /* sfumature ai bordi: i loghi entrano ed escono senza tagli netti */ .logo-band::before, .logo-band::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; } .logo-band::before{left:0; background:linear-gradient(90deg, var(--surface), transparent);} .logo-band::after{right:0; background:linear-gradient(270deg, var(--surface), transparent);} .logo-band-track{ display:flex; align-items:center; gap:20px; width:max-content; animation:bandScroll 52s linear infinite; } .logo-band:hover .logo-band-track, .logo-band:focus-within .logo-band-track, .logo-band.paused .logo-band-track{animation-play-state:paused;} @keyframes bandScroll{ to{ transform:translateX(-50%); } } /* Prima le piastre erano a misura del logo: un marchio piccolo finiva in una piastra minuscola, uno largo in una gigante, e la fascia sembrava sbilenca. Ora ogni logo vive in una scheda della stessa dimensione — come sulla fascia di riferimento — centrato con margine generoso: la fila resta ordinata a prescindere dalla forma del marchio. La scala al passaggio resta l'unico moto. */ .logo-band-item{ flex:none; display:flex; align-items:center; justify-content:center; width:160px; height:90px; padding:16px 22px; border-radius:18px; transition:transform .2s ease, box-shadow .2s ease; } .logo-band-item:hover{transform:scale(1.06);} .logo-band-item img{max-height:100%; max-width:100%; width:auto; object-fit:contain;} .logo-band-pause{ position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:3; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); color:var(--ink-mid); cursor:pointer; transition:border-color .15s ease, color .15s ease; } .logo-band-pause:hover{border-color:var(--violet); color:var(--violet-dark);} .logo-band-pause svg{width:12px; height:12px;} .showcase-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px;} .showcase-head h3{font-size:1.45rem; letter-spacing:-.03em;} .showcase-head p{color:var(--ink-soft); font-size:.95rem; font-weight:600;} /* La nota sull'ordine personalizzato: va sotto, a tutta larghezza, e non deve competere con il conteggio delle aziende. */ .showcase-note{ flex-basis:100%; font-size:.88rem; font-weight:500; color:var(--ink-soft); max-width:62ch; margin-top:-6px; } .showcase-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;} /* Sotto i 900px le schede tornano in fila orizzontale, grandi come piacevano, ma «si incastrano pulite»: ogni scheda è larga esattamente quanto lo schermo (flex-basis 100%), così quando lo scorrimento si ferma se ne vede una sola, intera, mai un pezzo di quella accanto né una posizione a metà. - scroll-snap-type:x mandatory + scroll-snap-align:start: al rilascio la scheda si aggancia sempre a inizio schermo. - scroll-snap-stop:always: uno swipe = una scheda, non ne salta. La barra di scorrimento resta nascosta. */ @media(max-width:900px){ .showcase-grid{ display:flex; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .showcase-grid::-webkit-scrollbar{ display:none; } .showcase-grid .fc-card{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; } /* Qui le card si raggiungono scorrendo di lato, non scorrendo la pagina in verticale: l'osservatore che decide "questa è a schermo, falla comparire" non si accorge che sono nascoste dallo scorrimento orizzontale, quindi le fa comparire (in sequenza, con ritardo) anche mentre sono ancora fuori vista. Chi scorre in fretta le raggiunge a metà animazione: sembrano instabili, "sotto e sopra", finché non si assestano da sole. Qui quella comparsa non aggiunge nulla — la card la vedi comunque una alla volta — quindi la si toglie e si mostrano già pronte. */ .showcase-grid .fc-card.reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* Selettori discendenti: le schede sono anche .reveal, e ".reveal.visible" più avanti nel foglio azzererebbe la transform del passaggio del mouse. */ .showcase-grid .fc-card{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:stretch; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 30px; box-shadow:var(--shadow-sm); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .75s; } .showcase-grid .fc-card:hover{transform:translateY(-5px); border-color:var(--violet); box-shadow:var(--shadow-md);} /* Piastra uniforme come nella fascia scorrevole: stessa dimensione per ogni scheda e logo centrato, non più una piastra a misura del marchio appoggiata a sinistra (prima 120–200px, e la fila sembrava sbilenca). I marchi molto larghi — Walter Tosto è 6:1 — scendono un po' di corpo, ma in cambio le schede sono tutte uguali e ordinate, come i loghi che scorrono in alto. */ .fc-logo{ width:160px; height:84px; display:flex; align-items:center; justify-content:center; } .fc-logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; opacity:0; transition:opacity .35s ease; } .fc-logo img.loaded{opacity:1;} /* Colonna: il richiamo finale si appoggia in basso, così le due schede affiancate chiudono alla stessa altezza qualunque sia la descrizione. */ .fc-body{display:flex; flex-direction:column; min-width:0;} .fc-name{display:block; font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.03em; color:var(--violet);} .fc-meta{display:block; font-size:.88rem; font-weight:700; color:var(--ink); margin-top:6px;} .fc-meta span{color:var(--ink-soft); font-weight:600;} .fc-desc{ display:-webkit-box; font-size:.95rem; color:var(--ink-soft); margin-top:10px; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Una riga sola, sempre. Con l'a-capo libero le pastiglie degli ambiti scendevano su due righe — spesso una sola pastiglia orfana in fondo — e la scheda cresceva in altezza senza dire niente di più. Ora sono al massimo due (vedi MAX_ETICHETTE in home.js), non vanno a capo e, se lo spazio è poco, si accorciano con i puntini. */ .fc-tags{display:flex; flex-wrap:nowrap; gap:7px; margin-top:12px; min-width:0;} .fc-tag{ font-size:.75rem; font-weight:700; padding:5px 11px; border-radius:99px; background:var(--violet-pale); color:var(--violet-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; } .fc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px; font-weight:700; font-size:.93rem; color:var(--ink-soft); transition:color .18s ease, gap .18s ease; } .showcase-grid .fc-card:hover .fc-cta{color:var(--violet-dark); gap:11px;} @media(max-width:520px){ .showcase-grid .fc-card{grid-template-columns:1fr; gap:16px; padding:22px 20px;} .fc-logo{width:132px; height:66px; justify-self:start;} } .showcase-foot{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:38px; text-align:center; } /* ---------- AZIENDE / CORE (card e ricerca della directory) ---------- */ .search-row{display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:6px 6px 6px 18px; flex:1; min-width:0; transition:border-color .16s, box-shadow .16s;} .search-row:focus-within{border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-pale);} .search-row > svg{width:19px; height:19px; color:var(--ink-soft); flex-shrink:0;} .search-row input{flex:1; min-width:0; border:none; background:transparent; font-family:inherit; font-size:1rem; padding:12px 6px; outline:none; color:var(--ink);} .search-clear{ display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border:none; background:none; border-radius:10px; color:var(--ink-soft); cursor:pointer; } .search-clear svg{width:16px; height:16px;} .search-clear:hover{color:var(--ink); background:rgba(246,244,255,.08);} .chip{ padding:9px 17px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg); font-size:0.88rem; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:all .14s ease; } .chip:hover{border-color:var(--violet); color:var(--violet-dark);} .chip.active{background:var(--violet); color:var(--ink-fixed); border-color:var(--violet);} .results-count{text-align:center; color:var(--ink-soft); font-size:0.92rem; font-weight:600; margin:30px 0 22px;} /* Colonne a larghezza minima invece di un numero fisso: la griglia si adatta da sola alla larghezza disponibile. Con le preferenze passate in alto qui c'è tutta la pagina, quindi le colonne possono respirare: tre schede comode invece di quattro strette. */ /* min(): sotto i 368px di larghezza utile una colonna da 320px sforerebbe il contenitore e la pagina scorrerebbe di lato */ .company-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px,100%),1fr)); gap:18px;} .company-card{ border:1px solid var(--line); border-radius:18px; padding:22px; background:var(--surface); display:flex; flex-direction:column; gap:0; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .company-card:hover{transform:translateY(-4px); border-color:var(--violet); box-shadow:var(--shadow-md);} /* Una sola griglia per la testata: da tablet in su il logo sta sopra il nome (percentuale in alto a destra), sul telefono le stesse celle si affiancano. */ .company-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; margin-bottom:14px; } .company-logo-wrap{grid-row:1; grid-column:1; display:flex; align-items:center; height:60px;} .company-head .tag.match{grid-row:1; grid-column:2; justify-self:end;} .company-id{grid-row:2; grid-column:1/-1; min-width:0;} /* Piastra uniforme e logo centrato, come nella fascia scorrevole e nelle schede in evidenza: prima era a misura del marchio, allineata a sinistra, e ogni scheda ne aveva una diversa. Larghezza fissa così la griglia resta ordinata. */ .company-logo-link{display:flex; align-items:center; justify-content:center; width:150px; height:100%; max-width:100%; transition:opacity .15s ease;} .company-logo-link:hover{opacity:.75;} .company-mark{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:10px; border:1.5px solid; background:var(--bg); font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; } .company-logo-img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; opacity:0; transition:opacity .35s ease; } .company-logo-img.loaded{opacity:1;} .company-body{flex:1;} .company-name{font-family:var(--font-display); font-weight:700; font-size:1.18rem; margin-bottom:6px; letter-spacing:-.03em; color:var(--violet);} .company-meta{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:.86rem; color:var(--ink); font-weight:700;} .company-city{color:var(--ink-soft); font-weight:600;} /* tre righe di descrizione a ogni misura: affiancate, le schede sarebbero alte una diversa dall'altra e la griglia si sfilaccerebbe */ .company-desc{ font-size:.94rem; color:var(--ink-soft); margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .company-interests{ font-size:.82rem; color:var(--ink-mid); font-weight:600; padding-top:12px; border-top:1px solid var(--line-soft); } /* Il «perché» della percentuale, dentro la scheda: una riga sola, sempre nello stesso posto, così la si trova senza cercarla. */ .company-why{ font-size:.8rem; line-height:1.5; color:var(--ink-mid); background:var(--violet-pale); border:1px solid var(--line-soft); border-radius:12px; padding:8px 11px; margin-bottom:14px; } .company-why b{color:var(--ink); font-weight:700;} .company-foot{display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; margin-bottom:2px;} .tag-territory{ font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:8px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); } /* L'etichetta delle aziende convenzionate in elenco: stesso verde della pill nella scheda, così la card e la scheda raccontano lo stesso stato. */ .tag-partner{ font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:8px; background:rgba(0,217,168,.14); border:1px solid rgba(0,217,168,.35); color:var(--mint); } /* verde scurito da #00806A a #00755F: sotto i 12px in grassetto il contrasto precedente si fermava a 4.38:1, sotto la soglia WCAG di 4.5:1 */ .tag.match{background:#E2F7F1; color:#00755F; white-space:nowrap;} /* Le stesse fasce dell'affinità anche sull'etichetta in elenco, così la card e la scheda raccontano lo stesso colore. Sfondi chiari con testo scurito per restare sopra 4.5:1 (WCAG) anche sotto i 12px in grassetto. */ .tag.match.aff-liv-bassa{background:#FCE6D9; color:#A33800;} .tag.match.aff-liv-media{background:#FBEFCC; color:#845700;} .tag.match.aff-liv-alta{background:#E2F7F1; color:#00755F;} /* I numeri su tirocini e assunzioni, quando l'azienda li ha dichiarati: è il dato che più di ogni altro dice se da qui si entra davvero. */ .tag-hiring{ font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:8px; background:rgba(0,217,168,.14); border:1px solid rgba(0,217,168,.35); color:var(--mint); } .company-cta{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); font-weight:700; font-size:.94rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; transition:color .18s ease, gap .18s ease; } .company-card:hover .company-cta{color:var(--violet-dark); gap:11px;} .no-results{grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--ink-soft); font-weight:600;} .soon{grid-column:1/-1;} .soon-head{text-align:center; max-width:560px; margin:0 auto 32px;} .soon-head h3{font-size:1.5rem; margin-bottom:12px;} .soon-head p{color:var(--ink-soft); font-size:1.02rem;} .soon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:34px;} @media(max-width:820px){ .soon-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ .soon-grid{grid-template-columns:1fr;} } .soon-tile{ border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--bg); display:flex; align-items:center; gap:14px; transition:transform .18s, border-color .18s; } .soon-tile:hover{transform:translateY(-3px); border-color:var(--violet);} .soon-emoji{ width:44px; height:44px; border-radius:13px; flex-shrink:0; font-size:1.15rem; display:flex; align-items:center; justify-content:center; background:var(--violet-pale); } .soon-tile b{display:block; font-family:var(--font-display); font-size:1rem; font-weight:700;} .soon-tile span{font-size:.83rem; color:var(--ink-soft); font-weight:600;} .soon-cta{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; padding:26px 30px; border-radius:18px; background:linear-gradient(140deg, var(--violet-pale), rgba(232,91,156,.13)); border:1px solid var(--line); } .soon-cta p{font-family:var(--font-display); font-weight:700; font-size:1.12rem; max-width:44ch;} .soon-cta small{display:block; font-family:var(--font-body); font-weight:500; font-size:.93rem; color:var(--ink-soft); margin-top:6px;} @media(max-width:620px){ .soon-cta .btn{width:100%;} } /* ---------- COME FUNZIONA ---------- */ .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;} @media(max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .steps{grid-template-columns:1fr;} } .step{ border-radius:var(--radius-lg); padding:28px 26px 26px; position:relative; overflow:hidden; min-height:400px; display:flex; flex-direction:column; color:#fff; isolation:isolate; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; } .step::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.55; background:radial-gradient(circle at 80% 90%, rgba(255,255,255,.5), transparent 55%); } .step:hover{transform:translateY(-8px); box-shadow:0 28px 50px -24px rgba(20,18,42,.42);} .step-1{background:linear-gradient(150deg,#7E6BFF,#B08BFF 40%,#6FD8C5 100%);} .step-2{background:linear-gradient(150deg,#F2884E,#E85B9C 45%,#8B6BFF 100%);} .step-3{background:linear-gradient(150deg,#4FC3E8,#6C8CFF 45%,#F0B554 100%);} .step-4{background:linear-gradient(150deg,#C08BFF,#7E6BFF 50%,#F49CC4 100%);} .step-num{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.04em; color:rgba(255,255,255,.85); margin-bottom:10px; } .step h3{font-size:1.5rem; color:#fff; margin-bottom:0; letter-spacing:-.03em;} .step p{color:rgba(255,255,255,.92); font-size:0.97rem; margin-top:auto;} .step-art{ flex:1; display:flex; align-items:center; justify-content:center; padding:22px 0; transition:transform .5s cubic-bezier(.2,.7,.3,1); } .step:hover .step-art{transform:translateY(-6px) scale(1.04);} .step-art svg{width:100%; max-width:180px; height:auto;} .step-art path, .step-art polygon, .step-art line{ fill:none; stroke:rgba(255,255,255,.92); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } /* ---------- EVENTI / INNEXT ---------- Il blocco era una colonna sola: marchi, titolo grande, paragrafo lungo, tre schede alte e poi l'agenda. Sommati facevano una sezione da scorrere due volte. Ora l'apertura è su due colonne (marchi e titolo a sinistra, il racconto a destra) e le tre schede hanno l'icona di fianco al titolo invece che sopra. */ .events{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:88px 0;} .lockup{ display:inline-flex; align-items:center; gap:22px; padding:16px 28px; border-radius:18px; background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-md); font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--ink); margin-bottom:24px; } /* La «×» fra i due marchi è l'unico segno chiaro in mezzo a un blocco in «display»: la prende dal carattere del testo, che il 400 ce l'ha davvero (di Sora carichiamo solo i due pesi grossi che servono ai titoli). */ .lockup .x{font-family:var(--font-body); font-weight:400; opacity:.45; font-size:1.5rem;} .eureka-logo{display:block; flex-shrink:0;} /* Il marchio Innext è blu e verde scuro: sul fondo notte del lockup l'occhio ci arrivava a fatica. Sta anche lui sulla piastra chiara, come i loghi delle aziende, mentre la firma Eureka resta chiara sul fondo scuro. */ .innext-logo{ height:58px; width:auto; display:block; background:#fff; border:1px solid rgba(20,18,42,.12); border-radius:10px; padding:6px 9px; box-sizing:border-box; } @media(max-width:520px){ .innext-logo{height:38px; padding:4px 6px;} /* qui la misura più grande resta solo da tablet in su: la larghezza/altezza sono attributi sull'svg, non solo CSS, quindi vanno rimessi giù esplicitamente */ .eureka-logo{width:118px; height:34px;} } /* apertura su due colonne: a sinistra i marchi e il titolo, a destra il racconto. Titolo e paragrafo partono dalla stessa riga (align:start), così l'occhio legge «heading + testo di supporto» invece di due blocchi appoggiati in fondo. */ .events .sec-head{max-width:none; display:grid; gap:16px 56px; margin-bottom:40px; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:start;} .events .sec-head .lockup{grid-column:1; grid-row:1; margin-bottom:0;} .events .sec-head h2{grid-column:1; grid-row:2; margin-top:0; font-size:clamp(2rem, 3.5vw, 2.9rem);} .events .sec-head p{grid-column:2; grid-row:2; margin-top:0; max-width:52ch;} @media(max-width:880px){ .events .sec-head{grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:26px;} .events .sec-head .lockup, .events .sec-head h2, .events .sec-head p{grid-column:1; grid-row:auto;} } .event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;} /* Le tre schede sono corte: su tablet e telefoni larghi stanno in due colonne senza diventare tre blocchi da scorrere. */ @media(max-width:880px){ .event-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .event-grid{grid-template-columns:1fr;} } /* icona di fianco, non sopra: la stessa scheda in un terzo di altezza in meno */ .event-card{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px; align-items:start; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; transition:transform .18s, box-shadow .18s; } .event-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);} .event-icon{grid-column:1; grid-row:1 / span 2; font-size:1.5rem; line-height:1.1; margin:0;} .event-card h3{grid-column:2; font-size:1.02rem; margin-bottom:2px;} .event-card p{grid-column:2; color:var(--ink-soft); font-size:0.92rem;} .events-cta{margin-top:34px;} /* ---------- AGENDA PROSSIMI EVENTI ---------- */ .agenda{margin-top:48px;} .agenda-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px;} .agenda-head h3{font-size:clamp(1.4rem, 2.6vw, 1.85rem);} .agenda-head p{color:var(--ink-soft); margin-top:10px; font-size:1.02rem; max-width:52ch;} @media(max-width:600px){ .agenda-head .btn{width:100%;} } .agenda-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px;} .agenda-list{display:flex; flex-direction:column; gap:14px;} .ev{ display:grid; grid-template-columns:96px 1fr auto; gap:26px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; transition:border-color .16s, box-shadow .16s, transform .16s; } .ev:hover{border-color:var(--violet); box-shadow:var(--shadow-md); transform:translateY(-2px);} .ev-date{ text-align:center; border-right:1px solid var(--line); padding-right:22px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; } .ev-day{font-family:var(--font-display); font-weight:800; font-size:2.3rem; line-height:1; color:var(--violet-dark);} .ev-month{font-size:0.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;} .ev-body{min-width:0;} .ev-title{font-family:var(--font-display); font-weight:700; font-size:1.18rem; margin-bottom:8px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;} .ev-demo{ font-size:0.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#FFF1D6; color:#8A5A00; padding:4px 9px; border-radius:6px; } .ev-speaker{font-size:0.98rem; font-weight:700; color:var(--ink-mid); margin-bottom:10px;} .ev-speaker span{font-weight:500; color:var(--ink-soft);} .ev-meta{display:flex; flex-direction:column; gap:6px; font-size:0.93rem; color:var(--ink-soft);} .ev-meta div{display:flex; align-items:flex-start; gap:8px;} .ev-venue b{color:var(--ink-mid); font-weight:700;} .ev-desc{font-size:0.95rem; color:var(--ink-soft); margin-top:12px;} .ev-action{flex-shrink:0;} @media(max-width:820px){ .ev{grid-template-columns:1fr; gap:16px; padding:22px;} .ev-date{ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:14px; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:10px; text-align:left; } .ev-day{font-size:1.9rem;} .ev-month{margin-top:0;} .ev-action{width:100%;} .ev-action .btn{width:100%;} } .agenda-foot{display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin-top:28px;} /* ---------- PER LE AZIENDE ---------- Erano due schede alte: 38px di imbottitura, icona a 1.8rem su una riga sua e 28px di stacco prima del bottone. A parità di contenuto il blocco pesava più delle sezioni intorno. Ora l'icona è a fianco del titolo (meno altezza), l'imbottitura e gli stacchi sono più stretti e la sezione respira meno in alto e in basso, così torna in proporzione col resto della pagina. */ #per-aziende{padding:80px 0;} #per-aziende .sec-head{margin-bottom:38px;} .biz-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;} @media(max-width:820px){ .biz-grid{grid-template-columns:1fr;} } .biz-card{ border-radius:var(--radius-lg); padding:28px 26px; display:flex; flex-direction:column; } .biz-card.solid{background:linear-gradient(150deg, var(--violet) 0%, #FF9142 50%, var(--pink) 125%); color:var(--ink-fixed);} .biz-card.solid h3{color:var(--ink-fixed);} .biz-card.solid p{color:rgba(12,10,30,.82);} .biz-card.solid .btn{background:#fff; color:var(--ink-fixed); box-shadow:none;} .biz-card.solid .btn:hover{background:rgba(255,255,255,.9);} .biz-card.plain{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);} /* Icona e titolo sulla stessa riga: toglie una riga di altezza per scheda. */ .biz-card h3{ font-size:1.2rem; margin-bottom:10px; display:flex; align-items:center; gap:12px; } .biz-icon{font-size:1.4rem; line-height:1; flex:none;} .biz-card p{color:var(--ink-soft); font-size:.98rem; margin-bottom:22px;} .biz-card .btn{align-self:flex-start; margin-top:auto;} @media(max-width:520px){ .biz-card .btn{width:100%;} } .biz-note{ text-align:center; max-width:60ch; margin:22px auto 0; color:var(--ink-soft); font-size:.96rem; line-height:1.6; } @media(max-width:760px){ #per-aziende{padding:48px 0;} #per-aziende .sec-head{margin-bottom:26px;} .biz-card{padding:24px 22px;} .biz-card p{margin-bottom:18px;} } /* ---------- MODULO AZIENDE IN TRE PASSAGGI (/per-le-aziende) ---------- Prima era un blocco in fondo alla home: sei campi, un menù a tendina e un testo lungo, tutto incolonnato sotto le due schede. Ora è una pagina sua, con il contesto a sinistra e un passaggio per volta a destra, così la colonna resta corta e si vede sempre dove si è arrivati. */ .wiz-wrap{display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:start;} .wiz-side h2{font-size:1.5rem;} .wiz-side-list{list-style:none; counter-reset:passo; margin-top:20px; display:grid; gap:16px;} .wiz-side-list li{ counter-increment:passo; position:relative; padding-left:42px; color:var(--ink-soft); font-size:.98rem; line-height:1.6; } .wiz-side-list li::before{ content:counter(passo); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--violet-pale); color:var(--violet-dark); font-weight:800; font-size:.85rem; } .wiz-side-list b{color:var(--ink); display:block;} .wiz-side-note{margin-top:26px; font-size:.92rem; color:var(--ink-soft); line-height:1.6;} .wiz-side-note a{color:var(--violet-dark); font-weight:700;} .wiz{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow-sm); } .wiz-bar{list-style:none; display:flex; gap:10px; margin-bottom:24px;} .wiz-bar li{ flex:1; display:flex; align-items:center; gap:8px; padding-top:12px; border-top:3px solid var(--line); font-size:.82rem; font-weight:700; color:var(--ink-soft); transition:border-color .2s ease, color .2s ease; } .wiz-bar li span{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--line); color:var(--ink-soft); font-size:.75rem; } .wiz-bar li.is-ora{border-top-color:var(--violet); color:var(--ink);} .wiz-bar li.is-ora span{background:var(--violet); color:#fff;} .wiz-bar li.is-fatta{border-top-color:var(--violet-dark); color:var(--ink-mid);} .wiz-bar li.is-fatta span{background:var(--violet-dark); color:#fff;} .wiz-form{max-width:none; margin-top:0; gap:18px;} .wiz-step{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;} .wiz-legend{ padding:0; font-size:1.3rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); text-transform:none; margin-bottom:4px; } /* Senza JavaScript i tre fieldset restano in fila e servono a separarli. */ .wiz:not(.is-js) .wiz-step + .wiz-step{border-top:1px solid var(--line); padding-top:22px;} .wiz-due{display:grid; grid-template-columns:1fr 1fr; gap:16px;} /* Il menù a tendina «di cosa si tratta» chiedeva un clic per scoprire cosa c'era dentro: le opzioni sono quattro, tanto vale mostrarle. */ .wiz-scelte{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .wiz-scelta{position:relative; cursor:pointer; text-transform:none; letter-spacing:0; font-size:1rem;} .wiz-scelta input{position:absolute; opacity:0; width:0; height:0; margin:0;} .wiz-scelta span{ display:block; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--bg); transition:border-color .15s ease, background .15s ease; } .wiz-scelta b{display:block; font-size:.95rem; color:var(--ink);} .wiz-scelta small{display:block; margin-top:3px; font-size:.83rem; color:var(--ink-soft); font-weight:500;} .wiz-scelta:hover span{border-color:var(--violet-dark);} .wiz-scelta input:checked + span{border-color:var(--violet); background:var(--violet-pale);} .wiz-scelta input:focus-visible + span{outline:2px solid var(--violet); outline-offset:2px;} .wiz-riepilogo{display:grid; gap:2px;} .wiz-riepilogo > div{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); } .wiz-riepilogo dt{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);} .wiz-riepilogo dd{color:var(--ink); font-size:.98rem; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere;} .wiz-riepilogo-modifica{display:block !important; border:0 !important; padding-top:12px !important;} .linkish{ background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:.92rem; color:var(--violet-dark); cursor:pointer; text-decoration:underline; text-underline-offset:3px; } .wiz-nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;} .wiz-nav .btn-primary{margin-left:auto;} .wiz-fatto{text-align:center; padding:24px 8px 12px;} .wiz-fatto-segno{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--violet-pale); color:var(--violet-dark); } .wiz-fatto-segno svg{width:28px; height:28px;} .wiz-fatto-segno svg path{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:disegnaSpunta .5s ease forwards .15s; } @media (prefers-reduced-motion: reduce){ .wiz-fatto-segno svg path{animation:none; stroke-dashoffset:0;} } .wiz-fatto p{color:var(--ink-soft); margin:12px auto 0; max-width:46ch; line-height:1.6;} .wiz-fatto-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px;} @media(max-width:900px){ .wiz-wrap{grid-template-columns:1fr; gap:32px;} } @media(max-width:600px){ .wiz{padding:22px 20px; border-radius:20px;} .wiz-due, .wiz-scelte{grid-template-columns:1fr;} .wiz-bar li{font-size:0; gap:0; padding-top:10px;} .wiz-bar li span{font-size:.75rem; margin:0 auto;} .wiz-form textarea{min-height:110px;} .wiz-riepilogo > div{grid-template-columns:1fr; gap:4px;} .wiz-nav{flex-direction:column-reverse; align-items:stretch;} .wiz-nav .btn{width:100%; margin-left:0;} } /* ---------- CTA FINALE + FOOTER (sezione unica, due colonne) ---------- */ /* L'invito finale è una fascia orizzontale: testo a sinistra, pulsante a destra, con un filo che la stacca dalle colonne di link. Prima era una colonna alta impilata sopra il resto del piè di pagina. */ .final-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px 48px; flex-wrap:wrap; padding-bottom:38px; margin-bottom:38px; border-bottom:1px solid rgba(255,255,255,.14); text-align:left; } .final-lead{max-width:620px;} .final-act{display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex-shrink:0;} .final-inner h2{ color:#fff; font-size:clamp(1.7rem, 2.6vw, 2.2rem); line-height:1.1; text-transform:uppercase; letter-spacing:-.03em; font-weight:800; margin-top:14px; } .final-inner p{color:rgba(255,255,255,.68); font-size:1.02rem; margin-top:12px;} .final-inner .pill{background:rgba(255,255,255,.12); color:#fff;} /* Le aziende convenzionate: una pill verde le distingue dalle schede informative. */ .pill.pill-partner{background:rgba(0,217,168,.16); color:var(--mint);} .signup{display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin-top:26px; align-items:flex-start;} .signup-field{display:flex; flex-direction:column; gap:6px; min-width:270px; flex:1;} .signup input{ background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.22); color:#fff; padding:15px 20px; border-radius:12px; font-family:inherit; font-size:1rem; width:100%; } .signup input.invalid{border-color:#FF6B6B; box-shadow:0 0 0 3px rgba(255,107,107,.18);} .signup input::placeholder{color:rgba(255,255,255,.48);} .signup select{ background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px; border:1.5px solid rgba(255,255,255,.22); color:#fff; padding:15px 44px 15px 20px; border-radius:12px; font-family:inherit; font-size:1rem; width:100%; appearance:none; -webkit-appearance:none; cursor:pointer; } .signup select option{color:#14122A;} .signup select optgroup{color:#14122A; font-weight:700; font-style:normal;} /* Il blocco «allega il profilo» sta su una riga sua, prima del pulsante: la riga dei campi è già affollata e questa è una scelta, non un campo. */ .signup-profile{flex-basis:100%;} .signup-profile .consent{margin-top:4px;} .signup-profile b{color:#fff; font-weight:700;} .field-error{ font-size:.82rem; font-weight:600; color:#FFB4B4; text-align:left; padding-left:4px; min-height:1.2em; display:none; } .field-error.visible{display:block;} .final-alt{margin-top:22px; font-size:0.95rem;} .final-alt a{color:#fff; opacity:.75; text-decoration:underline; text-underline-offset:4px;} .final-alt a:hover{opacity:1;} footer{background:var(--ink-fixed); color:#fff; padding:56px 0 32px; margin-top:64px;} .foot-brand{text-align:left;} .foot-logo{font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:#fff; display:flex; align-items:center; gap:9px; margin-bottom:14px;} .foot-about{color:rgba(255,255,255,.6); font-size:0.94rem;} .foot-meta{margin-top:22px; font-size:0.85rem; color:rgba(255,255,255,.45);} @media(max-width:820px){ /* La fascia dell'invito finale passa a colonna: testo sopra, pulsante sotto a tutta larghezza. */ .final-act{width:100%;} .final-act .btn{width:100%; text-align:center;} .foot-about{margin:0; max-width:52ch;} } /* ---------- SEGNO DI SPUNTA SUI PULSANTI DI INVIO ---------- */ .btn-check{display:inline-flex; align-items:center; gap:8px;} .btn-check svg{width:18px; height:18px; flex-shrink:0; overflow:visible;} .btn-check svg path{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:disegnaSpunta .4s ease forwards .05s; } @keyframes disegnaSpunta{ to{ stroke-dashoffset:0; } } @media (prefers-reduced-motion: reduce){ .btn-check svg path{animation:none; stroke-dashoffset:0;} } /* ---------- TRANSIZIONE TRA PAGINE ---------- */ /* Senza questo, cliccare da una pagina all'altra dava un salto secco (la vecchia sparisce, la nuova compare di colpo). Con questa unica regola il browser dissolve la pagina uscente in quella entrante da solo — nessun JavaScript, e dove non è ancora supportata (poche versioni vecchie di browser) semplicemente non succede nulla: resta il salto di prima, non si rompe niente. */ @view-transition{ navigation:auto; } @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; animation-timing-function:ease; } } /* ---------- SCROLL REVEAL ---------- */ .reveal{opacity:0; transform:translateY(38px); transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);} .reveal.visible{opacity:1; transform:none;} .reveal-up{transform:translateY(56px);} .reveal-left{transform:translateX(-42px);} .reveal-right{transform:translateX(42px);} .reveal-scale{transform:scale(.94) translateY(24px);} /* rivelazione del titolo riga per riga */ .line-mask{display:block; overflow:hidden; padding:.08em 0 .14em; margin-bottom:-.1em;} .line-mask > span{ display:block; transform:translateY(115%); transition:transform .9s cubic-bezier(.16,.8,.24,1); } .visible .line-mask > span{transform:none;} .visible .line-mask:nth-child(2) > span{transition-delay:.09s;} .visible .line-mask:nth-child(3) > span{transition-delay:.18s;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .orb{animation:none;} .bg-orbs{transition:none;} .logo-band-track{animation:none;} *{transition-duration:.01ms !important;} .reveal{opacity:1 !important; transform:none !important;} .line-mask > span{transform:none !important;} .mobile-menu.open, .mobile-menu.open > .wrap > a{animation:none;} } /* ---------- MOBILE: pagina più compatta sotto tablet ---------- */ @media(max-width:760px){ section{padding:56px 0;} .sec-head{margin-bottom:32px;} .sec-head p{margin-top:12px;} /* Hero: sul telefono la prima schermata deve arrivare al pulsante senza scorrere. Margini, interlinea e spazi tra i blocchi si stringono. */ .hero{padding:22px 0 44px;} .hero-stack{gap:34px;} /* Corpi e gerarchia dei testi: tutti insieme in fondo al foglio, sotto «scala tipografica del telefono». Qui restano solo spazi e ingombri. */ .hero h1{margin:14px 0; font-size:clamp(2.75rem, 9vw, 3.6rem);} .hero p.lede{max-width:38ch;} .hero-cta{margin-top:24px; gap:10px;} /* Sul telefono il pannello si stringe: anello un filo più piccolo, righe più compatte. La testa resta a due colonne (anello + nome), che è la gerarchia che si legge meglio anche stretti. */ .hero-match{padding:18px; gap:12px;} .hm-ask{font-size:1.05rem;} .hm-chip{font-size:.78rem; padding:7px 12px;} /* Nel profilo le pastiglie sono il comando principale: restano alte almeno 40px, la misura sotto la quale il pollice inizia a sbagliare bersaglio. */ .hero-match.is-profile{padding:18px; gap:11px;} .hero-match.is-profile .hm-chips{gap:8px;} .hero-match.is-profile .hm-chip{font-size:.82rem; padding:11px 14px;} .hp-avatar{width:38px; height:38px; font-size:1.05rem;} .hero-match.is-profile .hm-ring{width:74px; height:74px;} .hero-match.is-profile .hm-ring-num{font-size:1.16rem;} .hero-match.is-profile .hm-top{padding:14px; gap:12px;} .hp-cta{padding:14px 20px; font-size:.98rem;} .hm-top{padding:14px; gap:13px;} .hm-ring{width:80px; height:80px;} .hm-ring::before{inset:6px;} .hm-ring-num{font-size:1.24rem;} .hm-top-name{font-size:1.08rem;} .hm-row{padding:9px 10px; gap:10px;} .hm-row-logo{width:46px; height:29px;} /* Aziende: fascia loghi più bassa e schede in evidenza più compatte. Le schede della fascia restano uniformi, solo rimpicciolite. */ .logo-band{padding:14px 0; margin-bottom:34px;} .logo-band-track{gap:12px;} .logo-band-item{width:118px; height:66px; padding:11px 15px; border-radius:14px;} .logo-band::before, .logo-band::after{width:44px;} .showcase-head{margin-bottom:16px;} .showcase-grid{gap:14px;} .showcase-foot{margin-top:28px; gap:16px;} .showcase-foot .btn{width:100%;} .agenda{margin-top:30px;} .agenda-head{margin-bottom:18px;} .events{padding:56px 0;} .event-card{padding:16px 16px;} .event-icon{font-size:1.35rem;} /* Come funziona: card molto più compatte, illustrazione ridotta */ .step{min-height:0; padding:18px 20px 20px;} .step-num{font-size:1.5rem; margin-bottom:4px;} .step p{margin-top:10px;} .step-art{padding:4px 0;} .step-art svg{max-width:64px;} .event-card{padding:18px 16px;} .innext .wrap{padding:48px 22px;} /* Per le aziende: card più basse, icona e testi ridotti */ .biz-card{padding:22px 20px;} .biz-icon{font-size:1.4rem; margin-bottom:8px;} .biz-card h3{margin-bottom:8px;} .biz-card p{margin-bottom:18px;} footer{padding:40px 0 24px; margin-top:44px;} .final-inner{padding-bottom:26px; margin-bottom:26px;} /* Iscrizione: campo, pulsante e consenso uno per riga. In fila il pulsante finiva accanto al campo con 40px di larghezza utile. */ .signup{gap:12px;} .signup-field{flex:1 0 100%; min-width:0; width:100%;} .signup .btn{width:100%;} .consent{width:100%; margin-top:2px;} .lockup{padding:12px 18px; gap:14px; font-size:1.05rem; margin-bottom:18px;} .lockup .x{font-size:1.25rem;} /* Eventi: meno spazio tra i blocchi interni della card */ .ev{padding:16px 16px;} .ev-title{margin-bottom:5px;} .ev-speaker{margin-bottom:6px;} .ev-meta{gap:3px;} .ev-desc{margin-top:8px;} .steps{gap:14px;} .event-grid{gap:14px;} .biz-grid{gap:14px;} .agenda-list{gap:10px;} /* Spazio per la barra CTA fissa, ma solo sulle pagine che la hanno davvero: prima era su tutti i e in fondo a directory, privacy, chi siamo e schede azienda restava una fascia vuota sotto il piè di pagina. env(safe-area-inset-bottom) copre la barra gesti degli iPhone recenti. */ body.con-barra-cta{padding-bottom:calc(80px + env(safe-area-inset-bottom));} /* Bersagli di tocco più generosi: sotto i 44px sono scomodi da colpire col dito */ .chip{padding:12px 18px; min-height:44px; display:inline-flex; align-items:center;} .fopt{min-height:44px; padding:10px 15px;} .logo-band-pause{width:44px; height:44px;} .back-link{padding:10px 0; display:inline-flex;} .company-cta{padding-top:14px; min-height:24px;} .link-arrow{padding:10px 0;} .foot-col a{padding:10px 0;} .foot-bottom{gap:10px;} .foot-bottom a{display:inline-block; padding:6px 0;} .btn-ghost{padding:11px 4px;} } /* ---------- BARRA CTA FISSA (solo mobile) ---------- */ .mobile-cta-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:90; align-items:center; justify-content:space-between; gap:14px; background:rgba(20,18,42,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); transform:translateY(0); transition:transform .3s ease; } .mobile-cta-bar.hide{transform:translateY(100%);} /* min-width:0 e flex:1 al posto di max-width:56%: la frase usa lo spazio che avanza e il pulsante non si stringe fino a spezzare la parola. */ .mobile-cta-bar span{ flex:1; min-width:0; font-size:.84rem; font-weight:700; color:var(--ink-mid); line-height:1.3; } .mobile-cta-bar .btn{flex:none;} @media(max-width:760px){ .mobile-cta-bar{display:flex;} } @media(max-width:360px){ .mobile-cta-bar{padding-left:14px; padding-right:14px; gap:10px;} .mobile-cta-bar span{font-size:.8rem;} } /* ================================================================ BLOCCHI AGGIUNTI: pagine di testo, schede azienda, questionario. Il resto del foglio è il CSS originale della home, ora condiviso da tutte le pagine invece di essere duplicato in ogni file. ================================================================ */ /* ---------- badge percentuale nelle card ---------- */ .tag{font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:8px;} /* ---------- DIRECTORY: intestazione ---------- */ .directory-hero{padding:64px 0 12px;} .directory-hero .pill{margin-bottom:16px;} .directory-hero h1{font-size:clamp(2rem, 4.4vw, 3rem); line-height:1.05;} .directory-hero p{color:var(--ink-soft); font-size:1.1rem; max-width:62ch; margin-top:16px;} .back-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.92rem; color:var(--ink-soft); margin-bottom:22px;} .back-link:hover{color:var(--violet-dark);} @media(max-width:760px){ .directory-hero{padding:32px 0 4px;} .back-link{padding:10px 0; display:inline-flex;} } /* ---------- DIRECTORY: preferenze in alto + elenco ---------- Le preferenze erano una colonna fissa di 290px a sinistra: si portava via un quarto della pagina, aveva una barra di scorrimento tutta sua e lasciava alle schede due colonne strette. Adesso sono una fascia larga quanto la pagina, con i tre gruppi affiancati, e sotto le aziende prendono tutta la larghezza. Sotto i 900px la fascia resta il pannello che sale dal basso, richiamato dal pulsante «Preferenze» accanto alla ricerca. */ .directory-body{padding:22px 0 96px;} .dir-layout{ display:grid; align-items:start; gap:0; grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "prefs" "results"; } /* Fondo dietro i comandi: le schede che scorrono sotto la barra vanno mascherate, ma un fondo pieno var(--bg) copriva il bagliore ambientale e diventava un rettangolo scuro netto — la sua sfumatura inferiore sbordava sulla scritta del conteggio e il suo bordo destro tagliava il pulsante «Preferenze». Come per la testata del sito, un fondo semitrasparente con sfocatura lascia trasparire il bagliore e sfoca le schede che passano sotto, senza rettangolo né sbordature. */ .dir-toolbar{ grid-area:toolbar; position:-webkit-sticky; position:sticky; top:var(--stick-top, 78px); z-index:40; display:flex; align-items:center; gap:10px; padding:12px 0 14px; background:rgba(20,18,42,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .prefs-toggle{ display:inline-flex; align-items:center; gap:9px; flex:none; padding:11px 16px; min-height:50px; border-radius:14px; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); color:var(--ink); font-family:inherit; font-weight:700; font-size:.95rem; transition:border-color .16s ease, color .16s ease; } .prefs-toggle svg{width:19px; height:19px;} .prefs-toggle:hover{border-color:var(--violet); color:var(--violet-dark);} .prefs-badge{ min-width:22px; padding:2px 7px; border-radius:99px; background:var(--violet); color:var(--ink-fixed); font-size:.76rem; font-weight:700; text-align:center; } /* pannello preferenze: fascia orizzontale sopra i risultati */ .dir-prefs{ grid-area:prefs; margin-bottom:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px 18px; box-shadow:var(--shadow-sm); } .prefs-head{display:flex; align-items:flex-start; gap:12px;} /* Maniglia del foglio: solo sul telefono, dove il pannello è una tenda che sale dal basso. Da tablet in su il pannello è un riquadro nella pagina e non serve. */ .prefs-grab{display:none;} .prefs-head h2{font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.02em;} .prefs-head p{color:var(--ink-soft); font-size:.83rem; line-height:1.45; margin-top:6px;} /* Conteggio vivo nell'intestazione: quante aziende restano con le scelte fatte. Su desktop sta a destra del titolo; sul telefono lo nasconde la regola più in basso, perché là il conteggio è già sul pulsante «Vedi i risultati». */ .prefs-live{ margin-left:auto; align-self:center; flex:none; white-space:nowrap; font-family:var(--font-display); font-weight:800; font-size:.9rem; color:var(--violet-dark); background:var(--violet-pale); padding:6px 13px; border-radius:99px; border:1px solid rgba(255,106,34,.2); } .prefs-live:empty{display:none;} .prefs-close{ display:none; align-items:center; justify-content:center; flex:none; width:40px; height:40px; margin:-6px -4px 0 0; border:none; background:rgba(246,244,255,.08); border-radius:12px; color:var(--ink-mid); cursor:pointer; } .prefs-close svg{width:17px; height:17px;} /* L'accordion: una colonna di sezioni impilate, ognuna un riquadro chiuso finché non la si apre. Niente più fascia a più colonne: le tre scelte hanno lo stesso peso e si legge una cosa per volta. */ .prefs-groups{ display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); } .fgroup{ min-width:0; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--bg); } .fgroup.is-open{border-color:var(--line-soft); background:var(--surface);} .fgroup-head{margin:0;} /* La riga-titolo è il comando che apre e chiude la sezione: nome a sinistra, il conteggio delle scelte accanto, la freccia in fondo. È larga quanto la sezione così tutto il riquadro è un bersaglio di tocco comodo sul telefono. */ .fgroup-toggle{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; min-height:56px; cursor:pointer; border:0; background:none; text-align:left; border-radius:14px; font-family:var(--font-display); font-weight:700; font-size:.94rem; color:var(--ink); } .fgroup-toggle:hover{color:var(--violet-dark);} .fgroup-toggle:focus-visible{outline:2.5px solid var(--violet); outline-offset:-2px;} .fgroup-name{min-width:0; overflow-wrap:anywhere;} .fgroup-chevron{ width:20px; height:20px; margin-left:auto; flex:none; color:var(--ink-soft); transition:transform .2s ease, color .2s ease; } .fgroup.is-open .fgroup-chevron{transform:rotate(180deg); color:var(--violet-dark);} .fgroup-count{ flex:none; font-family:var(--font-body); font-weight:700; font-size:.74rem; color:var(--violet-dark); background:var(--violet-pale); padding:4px 9px; border-radius:99px; } /* Il corpo della sezione: compare solo quando la sezione è aperta. */ .fgroup-body{padding:2px 16px 16px;} .fgroup-body[hidden]{display:none;} /* «Azzera questa sezione»: appare solo quando in quel gruppo c'è qualcosa da togliere, e sta in fondo al corpo per non rubare l'occhio. */ .fgroup-clear{ display:block; margin-top:12px; padding:6px 2px; border:0; background:none; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.78rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; } .fgroup-clear:hover{color:var(--violet-dark);} /* Nel gruppo delle zone si sceglie a due livelli: prima la provincia, poi il comune. Queste etichette dicono quale dei due si sta guardando; compaiono solo quando le province da distinguere sono più di una. */ .fsub{margin-bottom:14px;} .fsub-label{ display:block; margin-bottom:8px; font-family:var(--font-body); font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); } /* Ricerca dentro il gruppo: con un centinaio di zone è l'unico modo sensato per arrivare alla propria: si scrivono due lettere invece di scorrere sei righe. */ .fsearch{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:0 12px; background:var(--bg); border:1.5px solid var(--line); border-radius:12px; transition:border-color .14s ease; } .fsearch:focus-within{border-color:var(--violet);} .fsearch svg{width:15px; height:15px; flex:none; color:var(--ink-soft);} .fsearch input{ flex:1; min-width:0; min-height:40px; padding:9px 0; border:0; background:none; outline:none; color:var(--ink); font-family:inherit; font-size:.88rem; font-weight:600; } .fsearch input::placeholder{color:var(--ink-soft); font-weight:500;} .fsearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.5);} .fnone{color:var(--ink-soft); font-size:.83rem; line-height:1.5; padding:2px 2px 4px;} .fmore{ margin-top:10px; padding:6px 2px; min-height:36px; border:0; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.83rem; color:var(--violet-dark); text-decoration:underline; text-underline-offset:3px; } .fmore:hover{filter:brightness(1.12);} /* Elenco aperto: scorre dentro il suo riquadro. Senza questo limite un gruppo da cento voci spingerebbe gli altri due — e il pulsante dei risultati — molto sotto il bordo dello schermo. */ .fgroup.is-tutte .fopts{ max-height:min(300px, 42vh); overflow-y:auto; overscroll-behavior:contain; padding:2px 6px 2px 2px; margin:-2px -2px 0; } /* Bersagli di tocco per i comandi del pannello. Stanno qui e non con gli altri ritocchi da telefono più in alto nel foglio: le regole di base di questi comandi arrivano dopo, e lassù verrebbero sovrascritte. */ @media(max-width:760px){ .fsearch input{min-height:46px;} .fmore, .fgroup-clear{min-height:44px;} } /* Le opzioni erano righe alte una sotto l'altra: tre gruppi da dieci voci facevano una colonna interminabile. Come pastiglie stanno sulla stessa riga e si leggono a colpo d'occhio. */ .fopts{display:flex; flex-wrap:wrap; gap:8px;} .fopt{ position:relative; display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:8px 14px; min-height:40px; border-radius:99px; border:1.5px solid var(--line); background:var(--bg); font-size:.88rem; font-weight:700; color:var(--ink-mid); transition:background .14s ease, border-color .14s ease, color .14s ease; } .fopt:hover{border-color:var(--violet); color:var(--ink);} .fopt.checked{background:var(--violet-pale); border-color:var(--violet); color:var(--violet-dark);} /* segno di spunta al posto della casella: dentro una pastiglia stretta la casella pesava più dell'etichetta */ .fopt.checked::before{content:"✓"; font-size:.82rem; font-weight:700; line-height:1;} .fopt > span{min-width:0; overflow-wrap:anywhere;} /* Il conteggio è una piccola pastiglia dentro la voce, non un numero appeso di lato: si legge come un dato a sé e resta coerente con gli altri conteggi del pannello (titoli di gruppo, conteggio vivo). */ .fopt em{ font-style:normal; font-weight:700; font-size:.72rem; line-height:1; padding:3px 7px; border-radius:99px; color:var(--ink-soft); background:rgba(246,244,255,.07); } .fopt.checked em{color:var(--violet-dark); background:rgba(255,106,34,.16);} /* Voci da una sola azienda: presenti ma smorzate, così non contendono l'occhio a quelle che spostano davvero i risultati. Tornano piene al passaggio del dito. */ .fopt.is-thin{opacity:.5;} .fopt.is-thin:hover{opacity:1;} /* La casella resta nel documento — serve a tastiera e lettori di schermo — ma è lo sfondo della pastiglia a raccontare lo stato. */ .fopt input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .fopt:focus-within{outline:2.5px solid var(--violet); outline-offset:2px; border-radius:99px;} /* casella disegnata a mano: quella di sistema non si intona al tema scuro */ .prefs-switch input{ appearance:none; -webkit-appearance:none; flex:none; margin:0; cursor:pointer; width:21px; height:21px; border-radius:7px; border:1.5px solid rgba(246,244,255,.34); background:rgba(246,244,255,.06); display:grid; place-content:center; transition:background .14s ease, border-color .14s ease; } .prefs-switch input::before{ content:""; width:11px; height:11px; background:var(--ink-fixed); transform:scale(0); transition:transform .16s cubic-bezier(.3,1.5,.5,1); clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .prefs-switch input:checked{background:var(--violet); border-color:var(--violet);} .prefs-switch input:checked::before{transform:scale(1);} .prefs-switch input:focus-visible{outline:2px solid var(--violet); outline-offset:3px;} .prefs-switch{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; margin-top:16px; padding:13px 14px; border-radius:13px; background:var(--bg); border:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--ink-mid); line-height:1.4; } .prefs-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;} .prefs-apply{display:none;} .prefs-note{color:var(--ink-soft); font-size:.77rem; line-height:1.5; margin-top:14px;} .prefs-backdrop{position:fixed; inset:0; z-index:120; background:rgba(8,6,20,.62);} /* risultati */ .dir-results{grid-area:results; min-width:0;} .dir-results .results-count{text-align:left; margin:0 0 18px;} .active-filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px;} .active-filters:empty{display:none;} .af-pill{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:8px 13px; min-height:38px; border-radius:99px; background:var(--violet-pale); border:1px solid rgba(255,106,34,.34); color:var(--violet-dark); font-family:inherit; font-size:.84rem; font-weight:700; transition:background .14s ease; } .af-pill svg{width:13px; height:13px; flex:none;} .af-pill:hover{background:rgba(255,106,34,.26);} .af-clear{ background:none; border:none; cursor:pointer; font-family:inherit; color:var(--ink-soft); font-size:.84rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; padding:8px 6px; min-height:38px; } .af-clear:hover{color:var(--violet-dark);} .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* display:flex del foglio batte il display:none che il browser applica all'attributo hidden: qui lo ripristiniamo per gli elementi che lo usano. */ .search-clear[hidden], .prefs-switch[hidden], .active-filters[hidden], .prefs-badge[hidden], .fsearch[hidden], .fmore[hidden], .fgroup-clear[hidden], .fsub-label[hidden]{display:none;} /* Da tablet in su il pannello non è più una fascia larga quanto la pagina: è una scheda centrata e stretta, così l'occhio non deve rincorrere tre colonne da un bordo all'altro. Titolo e spiegazione in alto, l'accordion al centro, l'interruttore e i pulsanti in fondo — la stessa lettura verticale del telefono. */ @media(min-width:901px){ .dir-prefs{max-width:620px; margin-left:auto; margin-right:auto;} .prefs-head > div{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;} .prefs-head p{max-width:72ch;} .prefs-foot{justify-content:flex-end;} } /* Da tablet in su il pannello non era più un foglio che sale dal basso, ma restava comunque sempre aperto: la pagina si apriva con "Affinità in tempo reale" e "Le tue preferenze" già entrambi spiegati, troppa roba tutta insieme. Resta chiuso finché non lo chiedi dal pulsante "Preferenze", come sul telefono. Uso :not(.open) invece di ripetere .dir-prefs da solo: due classi pesano più di una, quindi questa regola vince sempre sulla precedente, a prescindere da dove sta scritta nel file — niente più sorprese di ordine. */ @media(min-width:901px){ .dir-prefs:not(.open){display:none;} .prefs-backdrop{display:none !important;} } /* ---------- DIRECTORY: telefono e tablet ---------- */ @media(max-width:900px){ .dir-layout{grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "results";} .prefs-toggle{display:inline-flex;} .prefs-live{display:none;} .dir-toolbar{top:var(--stick-top, 74px); padding:10px 0 12px;} .prefs-groups{gap:10px; margin-top:12px;} /* le preferenze diventano un foglio che sale dal basso */ .dir-prefs{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:130; margin-bottom:0; overflow-y:auto; overscroll-behavior:contain; max-width:none; max-height:86vh; border-radius:24px 24px 0 0; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -18px 50px -18px rgba(0,0,0,.72); transform:translateY(101%); visibility:hidden; transition:transform .3s cubic-bezier(.2,.75,.3,1), visibility .3s; } .dir-prefs.open{transform:translateY(0); visibility:visible;} .prefs-close{display:flex;} /* Maniglia di trascinamento in cima al foglio e intestazione appiccicata: la maniglia dichiara che il foglio si abbassa (e lo trascina, via directory.js), la testata resta in vista mentre le pastiglie scorrono sotto. */ .prefs-grab{ display:block; width:40px; height:5px; margin:2px auto 12px; flex:none; border-radius:99px; background:var(--line); cursor:grab; touch-action:none; } .prefs-head{ position:sticky; top:0; z-index:3; background:var(--surface); padding-bottom:12px; margin-bottom:2px; } .prefs-apply{display:inline-flex;} .prefs-foot{position:sticky; bottom:0; padding-bottom:2px; background:var(--surface);} } @supports (max-height:1dvh){ @media(max-width:900px){ .dir-prefs{max-height:86dvh;} } } /* con il pannello aperto la pagina sotto non scorre — solo sul foglio mobile: da desktop il pannello è un riquadro nella pagina, non una tenda sopra tutto. */ @media(max-width:900px){ html.prefs-open, html.prefs-open body{overflow:hidden;} } @media(max-width:620px){ .directory-body{padding:14px 0 80px;} .search-row{padding:4px 4px 4px 14px;} .search-row input{font-size:.98rem; padding:11px 4px;} .prefs-toggle{padding:11px 13px;} /* Schede compatte: logo, nome e affinità su una riga sola, descrizione a tre righe. Prima ogni scheda occupava quasi tutto lo schermo e scorrere l'elenco sul telefono era interminabile. */ .company-card{padding:16px 16px 14px; border-radius:16px;} .company-head{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:12px; } .company-logo-wrap{height:46px;} /* Sul telefono la testata è una riga sola (logo · nome · affinità): la piastra resta uniforme ma stretta, così il nome ha spazio accanto. */ .company-logo-link{width:92px;} .company-logo-link:has(img){padding:5px 8px; border-radius:10px;} .company-id{grid-row:1; grid-column:2;} .company-head .tag.match{grid-row:1; grid-column:3; align-self:center;} .company-name{font-size:1.06rem; margin-bottom:3px;} .company-meta{font-size:.82rem; gap:0 8px;} .company-desc{font-size:.9rem; margin-bottom:12px;} .company-interests{font-size:.78rem; padding-top:10px;} .company-foot{margin-top:12px;} .company-cta{margin-top:14px; padding-top:12px; font-size:.9rem;} .tag-long{display:none;} .af-pill{font-size:.8rem; padding:7px 11px; min-height:36px;} } /* sotto i 430px la ricerca ha bisogno di tutta la riga: del pulsante restano l'icona e il numero di preferenze attive, l'etichetta resta per i lettori di schermo (nascosta, non rimossa). */ @media(max-width:430px){ .prefs-toggle{position:relative; padding:11px 12px;} .prefs-toggle > span:not(.prefs-badge){ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } } /* ---------- FOOTER A COLONNE (tutte le pagine) ---------- */ .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px 40px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.14); } @media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px 34px;} } /* Sotto i 520px le tre colonne di link restano a coppie e la colonna del marchio (sempre la prima) prende tutta la riga sopra: una lista unica di una dozzina di voci sarebbe stata una schermata da scorrere. */ @media(max-width:520px){ .foot-grid{grid-template-columns:1fr 1fr; gap:24px 28px;} .foot-grid > .foot-col:first-child{grid-column:1 / -1;} } @media(max-width:360px){ .foot-grid{grid-template-columns:1fr;} } .foot-col h4{color:#fff; font-size:0.82rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; font-weight:700;} .foot-col a{display:block; color:rgba(255,255,255,.72); font-size:0.95rem; padding:6px 0; transition:color .15s;} .foot-col a:hover{color:#fff;} .foot-bottom{padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:0.88rem; color:rgba(255,255,255,.62);} .foot-bottom a{color:rgba(255,255,255,.78); text-decoration:underline; text-underline-offset:3px;} .foot-bottom a:hover{color:#fff;} @media(max-width:760px){ .foot-grid{padding-bottom:26px; gap:26px 28px;} } /* ---------- elementi condivisi da preferenze e schede ---------- */ .btn-ghost{ background:none; border:none; color:var(--ink-mid); font-weight:700; font-size:.93rem; cursor:pointer; font-family:inherit; padding:8px 4px; text-decoration:underline; text-underline-offset:3px; } .btn-ghost:hover{color:var(--violet-dark);} /* ---------- SCHEDA AZIENDA (pagina dedicata) ---------- */ .detail-hero{padding:56px 0 0;} .detail-top{display:flex; align-items:center; gap:22px; flex-wrap:wrap;} .detail-logo{ width:132px; height:88px; background:#fff; border:1px solid rgba(20,18,42,.12); border-radius:16px; flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:14px; box-shadow:var(--shadow-sm); } .detail-logo img{max-width:100%; max-height:100%; object-fit:contain;} .detail-hero h1{font-size:clamp(2rem, 4.4vw, 3rem); margin-top:14px;} .detail-sub{color:var(--ink-soft); font-weight:700; margin-top:8px;} /* Briciole di navigazione: Aziende › Settore › nome azienda. Sostituiscono il vecchio «← Tutte le aziende» dando anche il salto al settore. */ .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--ink-soft); margin-bottom:22px;} .crumbs a{color:var(--ink-soft);} .crumbs a:hover{color:var(--violet-dark);} .crumbs [aria-current="page"]{color:var(--ink-mid);} .crumb-sep{opacity:.55;} /* Affinità personale in cima alla scheda: la riempie assets/site.js dal profilo salvato sul dispositivo. Verde quando l'azienda supera la soglia «in linea», neutra sotto; una variante sobria per l'invito quando manca ancora il profilo. */ .detail-affinita{ margin-top:26px; padding:20px 22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .detail-affinita[hidden]{display:none;} /* Il riquadro prende un accento coerente con la fascia dell'affinità: neutro sotto la soglia (bassa), un velo ambra da lì in su (media), verde quando è alta. Così il colore accompagna il numero invece di accendersi di colpo a 50. */ .detail-affinita.aff-liv-media{ border-color:rgba(255,201,61,.45); background:linear-gradient(150deg, rgba(255,201,61,.10), var(--surface) 62%); } .detail-affinita.aff-liv-alta{ border-color:rgba(0,217,168,.5); background:linear-gradient(150deg, rgba(0,217,168,.10), var(--surface) 62%); } .aff-invito{margin:0; font-size:.98rem; color:var(--ink-soft); line-height:1.55;} .aff-invito b{color:var(--ink);} .aff-invito a, .aff-note a{color:var(--violet-dark); font-weight:700; text-decoration:underline;} .aff-top{display:flex; align-items:center; gap:18px;} .aff-score{display:inline-flex; align-items:baseline; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--violet);} .aff-num{font-size:2.6rem; font-variant-numeric:tabular-nums;} .aff-pct{font-size:1.2rem; margin-left:2px;} /* Arancio → ambra → verde: la percentuale cambia colore con la fascia (bassa è il colore di default qui sopra), e il verde resta riservato all'affinità alta (dal 70%). */ .aff-liv-media .aff-score{color:var(--pink);} .aff-liv-alta .aff-score{color:var(--mint);} .aff-testo{display:flex; flex-direction:column; gap:3px;} .aff-label{font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--ink);} .aff-stato{font-size:.9rem; color:var(--ink-soft);} .aff-why{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;} .aff-why li{ font-size:.85rem; font-weight:600; color:var(--ink-mid); background:var(--bg); border:1px solid var(--line-soft); border-radius:999px; padding:6px 12px; } .aff-note{margin:16px 0 0; font-size:.82rem; color:var(--ink-soft); line-height:1.5;} .detail-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start; margin-top:44px;} @media(max-width:860px){ .detail-grid{grid-template-columns:1fr; gap:28px;} } .detail-body p{color:var(--ink-mid); font-size:1.08rem;} .detail-body h2{font-size:1.35rem; margin:34px 0 14px;} .detail-side{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); } /* Scheda laterale della pagina azienda: le righe settore/sede/attività. (Le classi .m-rows/.m-row vivevano nell'hero, ora sostituito dal carosello, quindi lo stile base resta qui, dove serve ancora.) */ .detail-side .m-rows{border-top:1px solid var(--line-soft); padding-top:6px;} .detail-side .m-row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:.9rem; border-bottom:1px solid var(--line-soft); } .detail-side .m-row:last-of-type{border-bottom:none;} .detail-side .m-row span:first-child{color:var(--ink-soft); font-weight:600;} .detail-side .m-row span:last-child{font-weight:700; text-align:right;} .detail-side .m-row a{color:var(--violet-dark); text-decoration:none;} .detail-side .m-row a:hover{text-decoration:underline;} .detail-side .btn{width:100%; margin-top:18px;} .detail-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;} .detail-note{ margin-top:18px; font-size:.86rem; color:var(--ink-soft); line-height:1.5; border-top:1px solid var(--line-soft); padding-top:14px; } .detail-updated{margin-top:10px; font-size:.78rem; color:var(--ink-soft);} /* Da due colonne in su la scheda laterale segue lo scorrimento: il bottone «Lavora con noi» resta a portata anche nelle schede lunghe. */ @media(min-width:861px){ .detail-side{position:sticky; top:calc(var(--headerH) + 18px);} } .detail-hint{font-size:.95rem; color:var(--ink-soft); margin-top:12px;} .fact-list{ margin:16px 0 4px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); } .fact-list .fact{ display:flex; justify-content:space-between; gap:20px; padding:13px 18px; border-bottom:1px solid var(--line-soft); font-size:1rem; } .fact-list .fact:last-child{border-bottom:none;} .fact-list .fact > span:first-child{color:var(--ink-soft); font-weight:600; flex-shrink:0;} .fact-list .fact > span:last-child{color:var(--ink); font-weight:700; text-align:right;} /* ---------- storia dell'azienda (scheda azienda) ---------- */ /* L'anno di fondazione era una riga di tabella come le altre: qui è il dato che si vede per primo, con gli anni di attività accanto per dargli una misura. */ .storia-box{ margin:16px 0 4px; padding:22px 24px; border-radius:16px; background:linear-gradient(150deg, rgba(255,106,34,.10), rgba(255,201,61,.05)); border:1px solid var(--line); } .storia-anno{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;} .storia-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem, 5vw, 3.4rem); line-height:1; color:var(--violet); letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .storia-etichetta{ color:var(--ink-soft); font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; } .storia-testo{margin:16px 0 0; color:var(--ink-mid); font-size:1.02rem; line-height:1.6;} @media(max-width:600px){ .storia-box{padding:18px 18px;} .storia-anno{gap:10px;} .storia-etichetta{font-size:.82rem;} } /* ---------- assunzioni e tirocini (scheda azienda) ---------- */ /* Numeri grandi e etichetta sotto: sono pochi dati e devono leggersi in un colpo d'occhio, perché sono quelli su cui si decide se candidarsi. */ .hire-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin:16px 0 4px; } .hire-tile{ display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm); } .hire-num{font-family:var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--mint);} .hire-label{font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.3;} .hire-note{font-size:.78rem; color:var(--ink-soft);} .hire-open{ margin-top:12px; font-size:.95rem; font-weight:700; color:var(--ink-mid); } /* Quando i numeri non ci sono lo spazio resta, e dice perché è vuoto: una mancanza dichiarata è un'informazione, un dato stimato sarebbe un danno. */ .hire-empty{ margin:16px 0 4px; padding:20px 22px; background:var(--surface); border:1px dashed var(--line); border-radius:16px; display:grid; gap:10px; } .hire-empty p{font-size:.98rem; color:var(--ink-soft); line-height:1.6;} .hire-empty b{color:var(--ink);} .hire-invito{border-top:1px solid var(--line-soft); padding-top:12px;} .hire-invito a{color:var(--violet-dark); font-weight:700; text-decoration:underline;} .detail-steps{list-style:none; counter-reset:step; margin:16px 0 0; padding:0; display:grid; gap:14px;} .detail-steps li{ counter-increment:step; position:relative; padding:16px 18px 16px 58px; background:var(--surface); border:1px solid var(--line); border-radius:14px; color:var(--ink-mid); font-size:1rem; line-height:1.55; box-shadow:var(--shadow-sm); } .detail-steps li::before{ content:counter(step); position:absolute; left:16px; top:15px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--violet-pale); color:var(--violet-dark); font-family:var(--font-display); font-weight:800; font-size:.98rem; } .detail-steps li b{color:var(--ink); font-weight:700;} .related{margin-top:64px;} .related h2{font-size:1.5rem; margin-bottom:20px;} .related-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;} /* ---------- PAGINE DI TESTO (privacy, chi siamo) ---------- */ .page-hero{padding:60px 0 0;} .page-hero h1{font-size:clamp(2rem, 4.4vw, 3rem); line-height:1.05; margin-top:16px;} .page-hero p.lede{color:var(--ink-soft); font-size:1.12rem; max-width:62ch; margin-top:16px;} .prose{max-width:70ch; padding-top:40px;} .prose h2{font-size:1.5rem; margin:38px 0 12px;} .prose h3{font-size:1.12rem; margin:26px 0 8px;} .prose p{color:var(--ink-mid); margin-bottom:14px;} .prose ul{list-style:disc; padding-left:22px; margin-bottom:16px; color:var(--ink-mid);} .prose li{margin-bottom:8px;} .prose a{color:var(--violet-dark); font-weight:700; text-decoration:underline; text-underline-offset:3px;} .prose .updated{color:var(--ink-soft); font-size:.9rem; font-weight:600;} /* ---------- CONSENSO PRIVACY NEI FORM ---------- La casella di sistema si allineava male al testo su più righe e cambiava forma da un browser all'altro. Qui è una casella disegnata da noi, dentro un riquadro dedicato: quadrato e testo restano allineati alla prima riga. */ .consent{ display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; margin-top:16px; padding:14px 16px; border:1.5px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.05); font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.8); text-align:left; cursor:pointer; transition:border-color .18s ease, background .18s ease; } .consent:hover{border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.08);} /* padding:0 è indispensabile: senza, .consent eredita il padding di «.signup input» / «.contact-form input» (15-20px), e con min-width:auto quel padding gonfia la casella fino a ~42×32px, che sfora la colonna da 22px e finisce sopra il testo «Ho letto la…», facendolo sembrare tagliato. Azzerato, la casella torna il quadrato 22×22 previsto. */ .consent input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; padding:0; flex:none; border:1.5px solid rgba(255,255,255,.42); border-radius:7px; background:rgba(255,255,255,.08); cursor:pointer; display:grid; place-content:center; transition:background .16s ease, border-color .16s ease; } .consent input::before{ content:""; width:11px; height:11px; background:var(--ink-fixed); transform:scale(0); transition:transform .16s cubic-bezier(.3,1.5,.5,1); clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .consent input:checked{background:var(--violet); border-color:var(--violet);} .consent input:checked::before{transform:scale(1);} .consent input:hover{border-color:var(--violet-dark);} .consent a{color:#fff; text-decoration:underline; text-underline-offset:3px;} /* Stato di errore: il messaggio del form parla del consenso, il riquadro lo mostra. */ .consent.invalid{border-color:#FF6B6B; background:rgba(255,107,107,.10);} .consent.invalid input{border-color:#FF9C9C;} .signup .consent{flex-basis:100%; margin-top:10px;} /* ---------- FORM CONTATTI ---------- */ .contact-form{display:flex; flex-direction:column; gap:14px; max-width:520px; margin-top:26px;} .contact-form label{font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);} .label-opt{font-weight:600; text-transform:none; letter-spacing:0; opacity:.7;} .contact-form input, .contact-form textarea, .contact-form select{ width:100%; background:var(--bg); border:1.5px solid var(--line); color:var(--ink); padding:13px 16px; border-radius:12px; font-family:inherit; font-size:1rem; margin-top:6px; } .contact-form textarea{min-height:130px; resize:vertical;} .contact-form select{appearance:none; cursor:pointer;} .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{border-color:var(--violet); outline:none;} .contact-form .consent{ color:var(--ink-mid); background:var(--bg); border-color:var(--line); } .contact-form .consent:hover{border-color:var(--violet); background:var(--bg);} .contact-form .consent a{color:var(--violet-dark);} .contact-form .consent input{border-color:var(--line); background:var(--surface);} .contact-form .consent input:checked{background:var(--violet); border-color:var(--violet);} .form-status{font-weight:700; font-size:.95rem; min-height:1.4em;} .form-status.ok{color:var(--mint);} .form-status.err{color:#FF9C9C;} /* ---------- 404 ---------- */ .notfound{text-align:center; padding:110px 0 90px;} .notfound h1{font-size:clamp(2.4rem, 6vw, 4rem); margin-top:18px;} .notfound p{color:var(--ink-soft); font-size:1.1rem; margin:18px auto 30px; max-width:52ch;} .notfound .hero-cta{justify-content:center;} /* ---------- AZIENDE SIMILI (in fondo alla scheda) ---------- Scheda ridotta: qui servono link veri e leggibili dai motori di ricerca, non la card completa del carosello. */ .related-card{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); transition:border-color .15s ease, transform .15s ease; } .related-card:hover{border-color:var(--violet); transform:translateY(-3px);} .related-card b{display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--ink);} .related-card span{display:block; color:var(--ink-soft); font-size:.9rem; margin-top:6px;} .related-card em{display:block; font-style:normal; color:var(--violet-dark); font-weight:700; font-size:.88rem; margin-top:12px;} /* ================================================================ RESA SU TELEFONO Questo blocco sta in fondo di proposito: diverse regole qui sotto annullano un effetto definito prima, e a parità di peso vince l'ultima dichiarazione del foglio. ================================================================ */ /* ---------- il tocco non è un passaggio del mouse ---------- Su un telefono lo stato :hover scatta al tocco e ci RESTA fino al tocco successivo da un'altra parte: la scheda toccata rimane sollevata, la bolla ingrandita (e larga oltre il bordo della pagina), la fascia dei loghi bloccata a metà corsa. Dove l'effetto è solo decorativo qui viene azzerato: l'unico comando che ferma i loghi resta il pulsante di pausa. */ @media (hover:none){ .btn-primary:hover{background:var(--violet); transform:none;} .btn-outline:hover{border-color:var(--line); color:var(--ink); transform:none;} .biz-card.solid .btn:hover{background:#fff;} .btn-ghost:hover{color:var(--ink-mid);} .navlinks a:hover{color:var(--ink-mid); transform:none;} .link-arrow:hover{gap:7px;} .back-link:hover{color:var(--ink-soft);} .final-alt a:hover{opacity:.75;} .questions .q-bubble:hover{ transform:none; border-color:var(--line); color:var(--ink-mid); background:var(--bg); box-shadow:none; } .questions .q-bubble:hover::before{opacity:0; transform:scaleY(.3);} .showcase-grid .fc-card:hover{transform:none; border-color:var(--line); box-shadow:var(--shadow-sm);} .showcase-grid .fc-card:hover .fc-cta{color:var(--ink-soft); gap:6px;} .company-card:hover{transform:none; border-color:var(--line); box-shadow:none;} .company-card:hover .company-cta{color:var(--ink-soft); gap:6px;} .company-logo-link:hover{opacity:1;} .related-card:hover{transform:none; border-color:var(--line);} .event-card:hover{transform:none; box-shadow:none;} .soon-tile:hover{transform:none; border-color:var(--line);} .ev:hover{transform:none; border-color:var(--line); box-shadow:none;} .step:hover{transform:none; box-shadow:none;} .step:hover .step-art{transform:none;} /* La fascia dei loghi si fermava al tocco di un logo e non riprendeva più. La classe .paused del pulsante ha peso maggiore e continua a funzionare. */ .logo-band:hover .logo-band-track, .logo-band:focus-within .logo-band-track{animation-play-state:running;} .logo-band-item:hover{transform:none;} .logo-band-pause:hover{border-color:var(--line); color:var(--ink-mid);} .chip:hover{border-color:var(--line); color:var(--ink-soft);} .chip.active:hover{border-color:var(--violet); color:var(--ink-fixed);} .prefs-toggle:hover{border-color:var(--line); color:var(--ink);} .fopt:hover{border-color:var(--line); color:var(--ink-mid);} .fopt.checked:hover{border-color:var(--violet); color:var(--violet-dark);} .af-pill:hover{background:var(--violet-pale);} .af-clear:hover{color:var(--ink-soft);} .fmore:hover{filter:none;} .fgroup-clear:hover{color:var(--ink-soft);} .search-clear:hover{color:var(--ink-soft); background:none;} .foot-col a:hover{color:rgba(255,255,255,.72);} .foot-bottom a:hover{color:rgba(255,255,255,.78);} .consent:hover{border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05);} .consent input:hover{border-color:rgba(255,255,255,.42);} .contact-form .consent:hover{border-color:var(--line);} } /* Riscontro al tocco: sul telefono :hover è neutralizzato (sopra), quindi premendo un pulsante o una scheda non succederebbe nulla finché non si rilascia e parte il collegamento. Un lieve rientro alla pressione (:active) restituisce al dito la conferma immediata del tocco. Solo transform, così resta sul compositor e non ridisegna nulla. */ @media (hover:none){ .btn:active{transform:scale(.965);} .company-card:active, .fc-card:active, .biz-card:active, .event-card:active, .related-card:active, .soon-tile:active, .ev:active, .step:active{transform:scale(.99);} .q-bubble:active, .chip:active, .fopt:active, .logo-band-pause:active{transform:scale(.97);} .mobile-cta-bar .btn:active{transform:scale(.94);} } /* Riquadro azzurro di sistema al tocco: sostituito da un lampo nei colori del sito, così i riquadri arrotondati non si accendono di uno spigolo blu. */ a, button, summary, label, input, [tabindex]{-webkit-tap-highlight-color:rgba(255,106,34,.18);} /* ---------- sfondo fermo sui telefoni piccoli ---------- Le sfere stanno su un livello fisso a schermo pieno: animarle mentre si scorre costa un ridisegno per fotogramma ed è la causa principale dello scorrimento a scatti sui telefoni di fascia media. Restano visibili, ferme nella posizione di partenza. La parallasse è disattivata da site.js. */ @media(max-width:600px){ .orb{animation:none;} } /* ================================================================ SCALA TIPOGRAFICA DEL TELEFONO Le misure erano cresciute un blocco alla volta e sullo stesso schermo convivevano titoli di sezione da 2 e da 2.3rem, titoli di scheda da 1.15, 1.2, 1.4 e 1.5rem e sei corpi di testo diversi, da .88 a 1.15rem. Basta questo perché la pagina sembri composta con caratteri differenti da un blocco all'altro, anche se le famiglie sono sempre le stesse due. Qui i corpi sono sei, uno per ruolo, e ogni blocco pesca da questi: i titoli e le frasi chiave si distinguono per gerarchia, non per caso. Sta in fondo al foglio di proposito: la seconda metà del CSS (directory, schede azienda, pagine di testo) è scritta dopo il blocco mobile più in alto, e da lassù quei titoli non si riuscirebbero a governare. */ @media(max-width:760px){ :root{ --fs-h1:2.5rem; /* titolo della pagina */ --fs-h2:2.05rem; /* titolo di sezione */ --fs-h3:1.24rem; /* titolo di scheda */ --fs-lead:1.03rem; /* frasi chiave: sommari, risposte, inviti */ --fs-body:.95rem; /* testo corrente */ --fs-small:.87rem; /* didascalie e metadati */ } /* Il corpo di base entra nella scala: i 17px fissi erano fuori misura rispetto ai rem di tutto il resto, così il testo senza una regola sua (le pagine di testo, le etichette dei moduli, i link del piè di pagina) finiva per essere il più grande della pagina dopo i titoli. */ body{font-size:var(--fs-lead);} /* Interlinea e crenatura di partenza (1.02-1.04, -3.5%) sono tarate su titoli da 40-60px: a 30 le righe si toccano e le lettere si impastano. */ h1,h2,h3,h4{line-height:1.12; letter-spacing:-.028em;} /* Il titolo della home resta il più grande e l'unico in 800: è lui a dare la scala a tutto il resto della pagina. Ha una sua misura, staccata da --fs-h1 (che governa i titoli delle altre pagine): con la sola --fs-h1 finiva a un soffio dai titoli di sezione (--fs-h2) e non si imponeva più. La clamp lo tiene nettamente sopra e non lo fa rimpicciolire sui telefoni piccoli, dove --fs-h1 invece cala. */ .hero h1{font-size:clamp(2.6rem, 9vw, 3.3rem); font-weight:800; letter-spacing:-.02em; line-height:1.06;} /* Le altre pagine si aprono un gradino sotto la home: lì si è già entrati. */ .directory-hero h1, .page-hero h1, .detail-hero h1{font-size:calc(var(--fs-h1) * .84); line-height:1.1;} .sec-head h2, .problem h2, .events .sec-head h2{font-size:var(--fs-h2); line-height:1.1; margin-top:14px;} /* L'invito finale è in maiuscolo: a parità di corpo ingombra e pesa di più, quindi sta un gradino sotto agli altri titoli di sezione. */ .final-inner h2{font-size:calc(var(--fs-h2) * .88); line-height:1.14;} .showcase-head h3, .soon-head h3, .agenda-head h3, .step h3, .biz-card h3, .fc-name, .company-name, .related h2, .detail-body h2, .prose h2{ font-size:var(--fs-h3); line-height:1.25; } /* Titoli di riga: stanno dentro elenchi fitti, quindi scendono al corpo delle frasi chiave invece che a quello dei titoli di scheda. */ .event-card h3, .ev-title, .related-card b, .soon-tile b{font-size:var(--fs-lead); line-height:1.3;} /* Frasi chiave: il sommario di sezione, la risposta del blocco «problema», le domande, l'invito finale. Un gradino sopra il testo corrente, perché sono loro a reggere il messaggio quando si scorre in fretta. */ .hero p.lede, .page-hero p.lede, .sec-head p, .problem .answer, .questions .q-bubble, .final-inner p, .directory-hero p{ font-size:var(--fs-lead); line-height:1.55; } /* Un mezzo grado di peso in più al posto del corpo più grande: si notano senza rubare la scena ai titoli (il 500 è caricato, non è finto). */ .hero p.lede, .page-hero p.lede, .sec-head p, .final-inner p, .directory-hero p{font-weight:500;} /* Testo corrente delle schede: prima .88, .92, .93 e .95 a seconda del blocco — differenze che si vedono e non dicono niente. */ .step p, .biz-card p, .fc-desc, .showcase-head p, .ev-desc, .foot-about, .soon-cta small{font-size:var(--fs-body);} /* Didascalie e metadati: l'ultimo gradino, sempre lo stesso ovunque. */ .fc-meta, .ev-meta, .ev-speaker, .foot-meta, .final-alt, .back-link{font-size:var(--fs-small);} } /* ---------- telefoni stretti ---------- Sotto i 420px un titolo di sezione da 2.05rem arriva a tre righe prima del testo: la scala scende di un gradino tutta insieme, così i rapporti fra titoli, frasi chiave e testo restano quelli. */ @media(max-width:420px){ :root{ --fs-h1:2.15rem; --fs-h2:1.85rem; --fs-h3:1.18rem; --fs-lead:1rem; --fs-body:.93rem; --fs-small:.85rem; } .notfound h1{font-size:2.1rem;} } /* ---------- una colonna sola: schede a riga invece che a colonna ---------- Sotto i 560px «Come funziona» e «Eventi» passano a una colonna: se le schede restano impaginate in verticale (illustrazione al centro, testo sotto) quattro passi diventano quattro schermate da scorrere. Qui il disegno passa nell'angolo e l'icona va a fianco del titolo: stessa informazione, metà dell'altezza. */ @media(max-width:560px){ .step{padding:20px 20px 18px;} .step-art{ position:absolute; top:14px; right:14px; flex:none; padding:0; opacity:.55; pointer-events:none; } .step-art svg{max-width:58px;} .step h3{padding-right:66px;} .step p{margin-top:10px;} .event-card{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start; padding:16px 18px; } .event-icon{grid-row:span 2; margin-bottom:0; line-height:1.2;} .event-card h3{align-self:center;} } /* ---------- telefono in orizzontale ---------- Con meno di 520px di altezza l'hero da solo copriva più di una schermata e la barra fissa in fondo si mangiava un quinto di quel poco che restava. */ @media(max-height:520px) and (orientation:landscape){ section{padding:44px 0;} .hero{padding:20px 0 32px;} .hero-stack{gap:28px;} .hero h1{margin:10px 0 14px;} .hero-cta{margin-top:18px;} footer{padding-top:48px; margin-top:40px;} .mobile-cta-bar{display:none;} body.con-barra-cta{padding-bottom:0;} } /* ---------- telefoni molto stretti ---------- Sotto i 360px (iPhone SE, Galaxy A0x) 24px di margine per lato tolgono un sesto della riga di testo. */ @media(max-width:360px){ .wrap{padding:0 18px;} :root{--fs-h1:1.95rem; --fs-h2:1.72rem;} .btn{padding:14px 20px; font-size:.96rem;} .pill{font-size:.74rem; padding:6px 12px;} .trust{font-size:.79rem;} .step h3{font-size:1.1rem; padding-right:60px;} .step-art svg{max-width:50px;} } /* ---------- TEMA CHIARO ---------- Il sito nasce «notte». Chi ha il sistema operativo in modalità chiara riceve invece questa versione, che ribalta soltanto le variabili di colore: fondo chiaro, testo scuro, bordi scuri e traslucidi. Tutto ciò che è costruito sulle variabili (la maggior parte del foglio) si adatta da solo. Restano di proposito dov'erano i pochi elementi con un fondo proprio — il piè di pagina notte, le tessere colorate dei passi, le piastre bianche sotto i loghi — perché il loro testo è già pensato per quel fondo. L'accento (--violet, in realtà arancio) non cambia; --violet-dark diventa più scuro perché serva da colore-link leggibile sul chiaro, e --ink-fixed resta scuro perché è il testo sopra gli accenti. */ @media (prefers-color-scheme: light){ :root{ --bg:#F4F3FA; --surface:#FFFFFF; --ink:#171531; --ink-mid:#403A63; --ink-soft:#63607D; --violet-dark:#C2410C; --line:rgba(20,18,42,0.14); --line-soft:rgba(20,18,42,0.08); --shadow-sm:0 2px 10px -2px rgba(20,18,42,.12); --shadow-md:0 16px 38px -18px rgba(20,18,42,.22); --shadow-lg:0 32px 64px -28px rgba(20,18,42,.30); } /* La barra in alto ha un fondo proprio (traslucido): va riportata sul chiaro, altrimenti resterebbe una striscia notte sopra una pagina chiara. */ header{background:rgba(244,243,250,.82);} /* Le sfere ambientali restano, ma un filo più tenui: su fondo chiaro non devono ridurre il contrasto del testo che ci passa sopra. */ .bg-orbs{opacity:.55;} } /* ---------- ALTO CONTRASTO ---------- Chi chiede più contrasto al sistema (prefers-contrast: more) riceve bordi pieni e testo secondario portato al massimo, così le sezioni si distinguono anche senza affidarsi alle sfumature. Vale in entrambi i temi: i valori usano le variabili già ribaltate qui sopra. */ @media (prefers-contrast: more){ :root{ --ink-soft:var(--ink-mid); --line:currentColor; --line-soft:currentColor; } .btn-outline, .m-tag, .hm-chip{border-width:2px;} a{text-underline-offset:2px;} } /* In modalità a colori forzati (Windows High Contrast e simili) il browser sostituisce i colori con quelli di sistema: qui si tolgono solo le decorazioni che in quel contesto diventano rumore o spariscono del tutto. */ @media (forced-colors: active){ .bg-orbs{display:none;} .btn{border:1px solid currentColor;} } /* ---------- area studente (/area-studente) ---------- */ /* Riusa il più possibile i mattoni esistenti (.signup, .consent, .btn, .pill): qui stanno solo il guscio a due colonne del cruscotto, i chip dei temi e il riquadro del CV. Stessi colori e raggi del resto del sito, dalle variabili. */ .area-caricamento{color:var(--ink-soft); padding:20px 0;} .area-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; margin-top:8px;} .area-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); } .area-box h2{font-size:1.5rem;} .area-box h3{font-size:1.2rem;} .area-sub{color:var(--ink-soft); margin-top:6px; font-size:.96rem; line-height:1.55;} .area-side{background:transparent;} .area-avviso{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:.94rem; background:var(--violet-pale); color:var(--violet-dark); border:1px solid rgba(255,106,34,.3); } .area-testata{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;} .area-testata h2{font-size:1.6rem;} .area-stato{ margin:6px 0 16px; padding:11px 15px; border-radius:12px; font-size:.94rem; background:rgba(0,217,168,.14); color:var(--mint); border:1px solid rgba(0,217,168,.3); } .area-stato-errore{background:rgba(255,107,107,.14); color:#FF8A8A; border-color:rgba(255,107,107,.32);} .area-esito{text-align:center; max-width:520px; margin:8px auto;} .area-esito .msg-icon{font-size:48px; line-height:1; margin-bottom:8px;} .campo-etichetta{display:block; margin:18px 0 10px; font-weight:700; color:var(--ink);} .tema-chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px;} .tema-chip{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:9px 14px; border-radius:999px; font-weight:600; font-size:.92rem; background:var(--surface); color:var(--ink-mid); border:1.5px solid var(--line); transition:border-color .15s, color .15s, background .15s; } .tema-chip:hover{border-color:var(--violet); color:var(--violet-dark);} .tema-chip[aria-pressed=true]{background:var(--violet-pale); color:var(--violet-dark); border-color:var(--violet);} .cv-vuoto{ display:flex; align-items:center; gap:16px; cursor:pointer; padding:22px; border-radius:16px; border:2px dashed var(--line); color:var(--ink-mid); line-height:1.5; transition:border-color .15s, background .15s; } .cv-vuoto:hover{border-color:var(--violet); background:var(--violet-pale);} .cv-vuoto b{color:var(--ink);} .cv-icona{font-size:30px; line-height:1;} .cv-caricato{border:1px solid var(--line); border-radius:16px; padding:18px;} .cv-riga{display:flex; align-items:center; gap:14px;} .cv-info{display:flex; flex-direction:column; gap:3px;} .cv-info b{color:var(--ink); word-break:break-word;} .cv-meta{color:var(--ink-soft); font-size:.9rem; line-height:1.5;} .cv-summary{margin-top:12px; color:var(--ink-mid); font-style:italic; font-size:.92rem; line-height:1.6;} .cv-azioni{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;} .cv-sostituisci{cursor:pointer;} .link-inline{ background:none; border:none; padding:0; cursor:pointer; font:inherit; color:var(--violet-dark); font-weight:700; text-decoration:underline; } @media (max-width:780px){ .area-grid{grid-template-columns:1fr;} }