/* ========================================================================== UniversityBox 2027 — ubx.css (UNICO foglio di stile del sito) v1.2 · 13/10/2026 (modale riusabile .modal per la richiesta deck) · v1.1 · 05/10/2026 (QA: blocchi accodati dagli agenti fusi nelle sezioni) · nessuna dipendenza esterna · Poppins locale INDICE (ogni componente ha UNA sola definizione base; varianti e media query stanno subito sotto. Consolidato dal QA del 05/10/2026) 01 Font @font-face Poppins (assets/fonts/) 02 Token :root --o (arancio) --ink (navy) --cream --surface … 03 Reset e base body, img, focus visibile, .skip-link, .sr-only 04 Tipografia .display .h1 .h2 .h3 .h4 .lead .eyebrow (+ --light --plain) .hl (pill sulla parola chiave) .kicker .muted .note 05 Layout .wrap .wrap--narrow .sec (+ --dark --ink --cream --surface --orange --tight) .sec-head (+ --center --split) .grid .g-2 .g-3 .g-4 .split (+ --rev) .stack .panel (+ --dark --orange --cream) 06 Bottoni .btn --primary --dark --ghost --light --link --sm --lg --block .btn-row ghost su fondo scuro: .sec--dark/.sec--ink/.hero/.panel--dark/.cta-band/.site-footer 07 Pill e tag .pill (+ --orange --dark --light --outline --cream) .tag .chips .num .sticker 08 Header .site-header (+ [data-overlay] trasparente su hero scuro, .is-scrolled) .logo .nav .nav__item .nav__btn .nav__link .megamenu (+ --sm) .mm-group .mm-link .mm-feature .burger .drawer .drawer__group 09 Hero .hero (+ --video --photo --page) .hero__media .hero__inner .hero__paths .path .hero__foot .video-toggle .hero-stats .float-ui (+ --phones) · piattaforma: .pf-hero-fams 10 Breadcrumb .breadcrumb (+ --light) 11 Card .sol-card .case-card (+ --dark; 3 KPI-slot .kpis .kpi) .info-card .seg-card .media-card media & engage: .pf-ch (scheda circuito/evento) .pf-chs .pf-ch-nav .price-card (+ --hot --dark; __per __price--text __price--stack) .cta-card .report-card (+ __cover--type .is-ink) .partner-card .logo-wall piattaforma: .pf-mock-grid .pf-profile .pf-intent .pf-svc .pf-shot .pf-browser .pf-wl .pf-areas .pf-area .pf-chat .pf-steps 12 Numeri .stats (+ --4 --fit --sm) .stat .stat__v [data-count] .stat__pre .stat__l .stat-note .goal 13 Marquee loghi .marquee [data-marquee] (+ --dark) .logos 14 Tab .tabs [data-tabs] .tabs__list .tabs__tab .tabs__panel (+ .tabs--seg selettore per bisogno) .seg-panel .mini-sol .lever (pannello leva: foto + testo + prezzo) .mini-steps · piattaforma: .pf-panel .pf-cloud .pf-pass .pf-specs .pf-photos 15 Accordion FAQ .faq details.acc 16 Timeline .timeline .tl-step (+ .is-key) .progress-bar .phase-chart .phases .ebc [data-wheel] (cerchio a fasi) .funnel .stair 17 Griglia foto .photo-grid (bento) .ph (+ .ph--wide .ph--tall .ph--contain) [data-lightbox] 18 Video/lightbox .vthumb (+ --tall --plain) .lightbox (creato da JS) .g-reels (video verticali) e modale .modal .modal__box .modal__close .modal__head .modal__title .modal__alert .modal__foot .modal__done .consent (finestra modale riusabile creata da JS; oggi: richiesta deck [data-deck-request], 13/10/2026) 19 Filtri .filters [data-filter] .filter-group .filter-chip .filter-count .filter-empty 20 Form .field .input .select .textarea .choice (radio/checkbox a card) .msf [data-msf] (form multi-step) 21 Calcolatore .estimator [data-calc] .estimator__out .estimator__range .estimator__group .chip-check piattaforma: .pf-funnel [data-club] .pf-aud-* [data-audience] 22 Tabelle .compare [data-compare] .matrix .quads .flow (+ --light) .factsheet .kpi-band .kpi-big .rail (A/B) .vs-table .rate .app-mock .tick-list .pf-rates .pf-day 22c CTA .cta-band .cross (link incrociati: nome + descrizione) 22d Dato del mese .datum .bars 22e Mockup .mock .hbars .ab .pred .dkpis .legend .vs .pairs .prod-card .obs-card .theme-list education funnel: .edu-wa (chat WhatsApp) .edu-leads .edu-st .edu-soon 22f Flussi/listini .fork (bivio) .sflow .sf-step .ptable .calc-field .estimator__legend 23 Footer .site-footer .noscript-nav 24 Reveal [data-reveal] (.is-in) 25 Motion ridotto prefers-reduced-motion · .qa (URL con #qa: niente animazioni d'ingresso) 26 Case a.pill (canali cliccabili) .case-quote .media-card--case REGOLE - Colori solo via token. Arancio pieno (--o) per superfici e accenti; testo arancio piccolo su bianco = --o-ink (AA). - Bottone primario: arancio con testo navy (contrasto AA). Pill dei titoli: --o-deep con testo bianco (testo grande, ≥3:1). - Ogni immagine: width/height o aspect-ratio + loading="lazy" (tranne hero) + alt. - Un componente nuovo va nella sua sezione numerata e nell'indice, MAI in coda al file; nomi di classe con prefisso di pagina (es. .pf-) se non sono riusabili. ========================================================================== */ /* 01 · FONT ---------------------------------------------------------------- */ @font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.e6ad980ea4e0.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-Italic.3eb9a5b2cdfe.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.66ed9fb2c0f2.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.56aa60fc58e8.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-Bold.baecd311fb89.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-ExtraBold.1d6e38d666ff.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("../fonts/Poppins-Black.64e3d160cc73.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap} /* 02 · TOKEN --------------------------------------------------------------- */ :root{ /* brand */ --o:#FF7A00; /* arancio UBX: superfici, accenti, bottone primario */ --o-deep:#EB6A00; /* pill dei titoli (testo bianco grande) */ --o-ink:#B34A00; /* testo arancio piccolo su fondo chiaro (AA) */ --o-soft:#FFE2C6; --cream:#FFF1E3; --ink:#1E293B; /* navy: titoli, blocchi scuri */ --ink-2:#141B2A; /* fondo più scuro (hero, footer) */ --text:#434A5D; /* testo corrente */ --text-2:#5D657B; /* testo secondario */ --line:#E4EAF2; --line-2:#CCD4DE; --surface:#F5F6FA; --white:#FFFFFF; --on-dark:rgba(255,255,255,.86); --on-dark-2:rgba(255,255,255,.64); /* tipografia */ --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --fs-display:clamp(46px,8.4vw,124px); --fs-h1:clamp(40px,6.2vw,88px); --fs-h2:clamp(30px,4.4vw,60px); --fs-h3:clamp(20px,1.9vw,26px); --fs-lead:clamp(17px,1.45vw,21px); /* spazi e forme */ --wrap:1280px; --gutter:clamp(20px,4vw,48px); --sec:clamp(72px,9vw,136px); --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px; --shadow-1:0 1px 2px rgba(20,27,42,.06),0 4px 14px rgba(20,27,42,.06); --shadow-2:0 2px 6px rgba(20,27,42,.06),0 22px 48px rgba(20,27,42,.14); --ease:cubic-bezier(.2,.7,.2,1); --header-h:72px; } /* 03 · RESET E BASE -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;background:var(--white);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility} img,video,svg{display:block;max-width:100%} img{height:auto} h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0} ul[class],ol[class]{list-style:none;padding:0} a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} table{border-collapse:collapse;width:100%} ::selection{background:var(--o);color:var(--ink-2)} :focus-visible{outline:3px solid var(--o);outline-offset:3px;border-radius:6px} .sec--dark :focus-visible,.sec--ink :focus-visible,.hero :focus-visible,.site-footer :focus-visible,.panel--dark :focus-visible{outline-color:#FFB066} .skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:700;text-decoration:none} .skip-link:focus{top:12px} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} [hidden]{display:none!important} /* 04 · TIPOGRAFIA ---------------------------------------------------------- */ .display,.h1,.h2{font-weight:900;text-transform:uppercase;color:var(--ink);letter-spacing:-.028em;text-wrap:balance} .display{font-size:var(--fs-display);line-height:.92} .h1{font-size:var(--fs-h1);line-height:.95} .h2{font-size:var(--fs-h2);line-height:1} .h3{font-size:var(--fs-h3);font-weight:800;line-height:1.15;color:var(--ink);letter-spacing:-.01em} .h4{font-size:18px;font-weight:700;line-height:1.3;color:var(--ink)} .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text);max-width:62ch} .lead strong{color:var(--ink);font-weight:600} .muted{color:var(--text-2)} .note{font-size:13.5px;line-height:1.55;color:var(--text-2)} .kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} /* parola chiave in pill arancio, leggermente ruotata (firma dei deck UBX) */ .hl{display:inline-block;background:var(--o-deep);color:#fff;padding:.12em .2em .04em;margin:0 -.02em;border-radius:var(--r-pill);transform:rotate(-2deg);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.06} .hl--ink{background:var(--ink)} .nowrap{white-space:nowrap} /* eyebrow = pill di beneficio sopra il titolo */ .eyebrow{width:fit-content;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--line-2);border-radius:var(--r-pill);padding:6px 14px 6px 10px;background:var(--white)} .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--o);flex:none} .eyebrow--light{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .eyebrow--plain{border:0;padding:0;background:none} .prose p+p{margin-top:1em} .prose a{color:var(--o-ink);font-weight:600} /* 05 · LAYOUT -------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:920px} .sec{padding-block:var(--sec);position:relative} .sec--tight{padding-block:calc(var(--sec)*.6)} .sec--flush-top{padding-top:0} .sec--surface{background:var(--surface)} .sec--cream{background:var(--cream)} .sec--orange{background:var(--o);color:var(--ink-2)} .sec--dark,.sec--ink{color:var(--on-dark)} .sec--dark{background:var(--ink-2)} .sec--ink{background:var(--ink)} .sec--dark :is(.display,.h1,.h2,.h3,.h4),.sec--ink :is(.display,.h1,.h2,.h3,.h4),.panel--dark :is(.display,.h1,.h2,.h3,.h4){color:#fff} .sec--dark .lead,.sec--ink .lead,.panel--dark .lead{color:var(--on-dark)} .sec--dark .note,.sec--ink .note,.panel--dark .note{color:var(--on-dark-2)} .sec--dark .kicker,.sec--ink .kicker,.panel--dark .kicker{color:#FFB066} .sec--orange :is(.h1,.h2,.h3){color:var(--ink-2)} .sec--orange .lead{color:var(--ink-2)} .sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:900px} .sec-head--center{text-align:center;margin-inline:auto;justify-items:center} .sec-head--center .lead{margin-inline:auto} .sec-head--center .eyebrow{justify-self:center} .sec-head--split{max-width:none;grid-template-columns:1fr;align-items:end} @media (min-width:960px){.sec-head--split{grid-template-columns:1.25fr 1fr;gap:48px}} .grid{display:grid;gap:clamp(14px,1.6vw,22px)} @media (min-width:640px){.g-2,.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1024px){.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}} .split{display:grid;gap:clamp(28px,5vw,72px);align-items:center} @media (min-width:960px){.split{grid-template-columns:1fr 1fr}.split--rev>:first-child{order:2}.split--wide{grid-template-columns:1.15fr .85fr}} .stack>*+*{margin-top:var(--stack,16px)} .panel{border-radius:var(--r-xl);padding:clamp(28px,5vw,72px);position:relative;overflow:hidden} .panel--dark{background:var(--ink-2);color:var(--on-dark)} .panel--orange{background:var(--o);color:var(--ink-2)} .panel--cream{background:var(--cream)} .panel--cream ul,.panel--dark ul{font-size:15.5px;line-height:1.55} .center{text-align:center} .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}.mt-5{margin-top:56px} @media (max-width:639px){.hide-sm{display:none!important}} @media (min-width:640px){.show-sm{display:none!important}} /* 06 · BOTTONI ------------------------------------------------------------- */ .btn{--bh:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 24px;border-radius:var(--r-pill);border:2px solid transparent;font-weight:800;font-size:15.5px;line-height:1.1;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,color .18s,border-color .18s;cursor:pointer;text-align:center} .btn svg{width:18px;height:18px;flex:none;transition:transform .18s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--o);color:var(--ink-2)} .btn--primary:hover{background:#FF8A1F;box-shadow:0 10px 26px rgba(255,122,0,.35)} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#2B3850;box-shadow:0 10px 26px rgba(20,27,42,.25)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--ink)} .btn--light{background:#fff;color:var(--ink)} .btn--light:hover{box-shadow:0 10px 26px rgba(0,0,0,.2)} .sec--dark .btn--ghost,.sec--ink .btn--ghost,.hero .btn--ghost,.panel--dark .btn--ghost,.cta-band .btn--ghost,.site-footer .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)} .sec--dark .btn--ghost:hover,.sec--ink .btn--ghost:hover,.hero .btn--ghost:hover,.panel--dark .btn--ghost:hover,.cta-band .btn--ghost:hover,.site-footer .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)} .btn--link{--bh:auto;padding:0;border:0;border-radius:0;color:var(--o-ink);font-weight:800;background:none} .btn--link:hover{text-decoration:underline} .sec--dark .btn--link,.sec--ink .btn--link,.panel--dark .btn--link{color:#FFB066} .btn--sm{--bh:42px;padding:0 18px;font-size:14px} .btn--lg{--bh:60px;padding:0 30px;font-size:16.5px} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} @media (max-width:600px){.btn{max-width:100%;white-space:normal;padding-top:12px;padding-bottom:12px;overflow-wrap:anywhere}.btn--link{padding-top:0;padding-bottom:0}} /* 07 · PILL, TAG, STICKER -------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;font-weight:700;line-height:1.2;background:var(--surface);color:var(--ink);white-space:nowrap} .pill--orange{background:var(--o);color:var(--ink-2)} .pill--dark{background:var(--ink);color:#fff} .pill--light{background:rgba(255,255,255,.14);color:#fff} .pill--outline{background:transparent;border:1.5px solid var(--line-2)} .pill--cream{background:var(--cream);color:var(--o-ink)} .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o-ink)} .chips{display:flex;flex-wrap:wrap;gap:8px} .num{align-self:flex-start;justify-self:start;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:var(--r-pill);background:var(--o);color:var(--ink-2);font-weight:900;font-size:14px} /* sticker: firma visiva giocosa (badge ruotato) */ .sticker{display:grid;place-items:center;text-align:center;width:132px;height:132px;border-radius:50%;background:var(--o);color:var(--ink-2);font-weight:900;font-size:15px;line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;transform:rotate(10deg);box-shadow:0 14px 40px rgba(0,0,0,.28);padding:18px} .sticker small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-top:4px} .sticker--cream{background:var(--cream)} /* 08 · HEADER, MEGA-MENU, DRAWER ------------------------------------------ */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s,box-shadow .25s,color .25s} .site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(20,27,42,.06)} .site-header__bar{display:flex;align-items:center;gap:20px;height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.01em;flex:none} .logo img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 1px var(--line)} .logo b{color:var(--o-ink);font-weight:800} /* Wordmark header monocromatico; il badge ufficiale mantiene i suoi colori. */ .site-header .logo{color:#000} .site-header .logo b{color:inherit} .nav{margin-left:auto;display:none} @media (min-width:1120px){.nav{display:block}} .nav__list{display:flex;align-items:center;gap:2px} .nav__btn,.nav__link{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 13px;border-radius:var(--r-pill);background:none;border:0;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color .15s} .nav__btn svg{width:12px;height:12px;transition:transform .2s} .nav__btn:hover,.nav__link:hover,.nav__item.is-open .nav__btn{background:var(--surface)} .nav__item.is-open .nav__btn svg{transform:rotate(180deg)} .nav__link[aria-current="page"],.nav__btn.is-current{box-shadow:inset 0 -2px 0 var(--o)} .site-header__actions{display:flex;align-items:center;gap:10px;margin-left:auto} @media (min-width:1120px){.site-header__actions{margin-left:8px}} .site-header__actions .btn{--bh:44px;padding:0 18px;font-size:14px} @media (max-width:420px){.site-header__actions .btn{display:none}} /* overlay: header trasparente sopra un hero scuro finché non si scorre */ .site-header[data-overlay]:not(.is-scrolled):not(.menu-open){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} .site-header[data-overlay]:not(.is-scrolled):not(.menu-open) :is(.logo,.nav__btn,.nav__link){color:#fff} .site-header[data-overlay]:not(.is-scrolled):not(.menu-open) .logo b{color:inherit} .site-header[data-overlay]:not(.is-scrolled):not(.menu-open) .logo img{box-shadow:none} .site-header[data-overlay]:not(.is-scrolled):not(.menu-open) :is(.nav__btn:hover,.nav__link:hover){background:rgba(255,255,255,.12)} .site-header[data-overlay]:not(.is-scrolled):not(.menu-open) .burger{color:#fff;border-color:rgba(255,255,255,.4)} body[data-header-overlay] main>:first-child{margin-top:calc(var(--header-h) * -1)} /* mega-menu */ .megamenu{position:absolute;left:0;right:0;top:100%;padding:10px var(--gutter) 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;pointer-events:none} .nav__item.is-open .megamenu{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto} .megamenu__panel{max-width:calc(var(--wrap) - 2*var(--gutter));margin-inline:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-2);border:1px solid var(--line);padding:26px;display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr)) 1.15fr;color:var(--text)} .megamenu--sm .megamenu__panel{max-width:760px;grid-template-columns:1fr 1fr;margin-left:auto;margin-right:max(0px,calc((100% - var(--wrap))/2 + 220px))} .mm-group__title{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink);margin-bottom:10px;padding-left:12px} .mm-link{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background-color .15s} .mm-link:hover,.mm-link:focus-visible{background:var(--surface)} .mm-link[aria-current="page"]{background:var(--cream)} .mm-link__icon{flex:0 0 40px;width:40px;height:40px;margin:0;border-radius:12px;background:var(--cream);color:var(--o-ink);display:grid;place-items:center} .mm-link__icon svg{display:block;width:20px;height:20px;flex:none} .mm-link__copy{display:flex;flex-direction:column;gap:4px;min-width:0} .mm-link__copy b{display:block;font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)} .mm-link__desc{display:block;font-size:13px;line-height:1.45;color:var(--text-2);margin:0} .mm-feature{border-radius:20px;overflow:hidden;position:relative;min-height:220px;background:var(--ink-2);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;text-decoration:none} .mm-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .mm-feature>*:not(img){position:relative} .mm-feature small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .mm-feature b{font-size:18px;line-height:1.2;margin-top:4px} .mm-feature span{font-size:13px;color:var(--on-dark);margin-top:6px} /* burger e drawer mobile */ .burger{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);flex:none} .burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .25s var(--ease),opacity .2s} .burger span::before,.burger span::after{content:"";position:absolute;left:0} .burger span::before{top:-6px}.burger span::after{top:6px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} @media (min-width:1120px){.burger{display:none}} .drawer{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:#fff;overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) 40px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s} .drawer.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s} .drawer__group{border-bottom:1px solid var(--line)} .drawer__toggle{display:flex;width:100%;justify-content:space-between;align-items:center;padding:18px 0;background:none;border:0;font-size:21px;font-weight:800;color:var(--ink);text-align:left} .drawer__toggle svg{width:16px;height:16px;transition:transform .2s} .drawer__toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .drawer__panel{padding:0 0 16px} .drawer__panel .mm-group__title{padding-left:0;margin:12px 0 4px} .drawer__panel .mm-link{padding:10px 0} .drawer__link{display:block;padding:18px 0;font-size:21px;font-weight:800;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .drawer__cta{display:grid;gap:10px;margin-top:24px} .drawer__contact{margin-top:24px;font-size:14px;color:var(--text-2)} body.no-scroll{overflow:hidden} /* 09 · HERO ---------------------------------------------------------------- */ .hero{position:relative;color:#fff;background:var(--ink-2);overflow:hidden;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-1} .hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .js .hero__media video{opacity:0;transition:opacity 1.2s var(--ease)} .js .hero__media video.is-playing{opacity:1} .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,27,42,.62) 0%,rgba(20,27,42,.28) 34%,rgba(20,27,42,.55) 62%,rgba(20,27,42,.96) 100%)} .hero--video,.hero--photo{min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 56px)} .hero__inner{position:relative;padding-bottom:clamp(28px,4vw,48px)} .hero .display,.hero .h1{color:#fff;max-width:13ch} .hero .lead{color:var(--on-dark);margin-top:22px;max-width:58ch} .hero .eyebrow{margin-bottom:22px} .hero__paths{display:grid;gap:12px;margin-top:34px;max-width:760px} @media (min-width:700px){.hero__paths{grid-template-columns:1.1fr 1fr}} .path{display:flex;align-items:center;gap:16px;padding:16px 18px 16px 22px;border-radius:22px;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,background-color .2s;min-height:76px} .path:hover{transform:translateY(-2px)} .path__tx{flex:1;min-width:0} .path small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .path b{display:block;font-size:18px;font-weight:800;line-height:1.2;margin-top:2px} .path span{display:block;font-size:13px;opacity:.8;margin-top:2px} .path__go{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(20,27,42,.12)} .path__go svg{width:18px;height:18px} .path--primary{background:var(--o);color:var(--ink-2)} .path--primary:hover{box-shadow:0 14px 34px rgba(255,122,0,.4)} .path--glass{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .path--glass .path__go{background:rgba(255,255,255,.14)} .path--glass:hover{background:rgba(255,255,255,.16)} .hero__foot{position:relative;border-top:1px solid rgba(255,255,255,.18);padding-block:20px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px} .hero-stats{display:flex;flex-wrap:wrap;gap:10px 36px;font-size:14px;color:var(--on-dark)} .hero-stats b{color:#fff;font-weight:900;font-size:22px;margin-right:6px;letter-spacing:-.02em} .video-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.35);background:rgba(20,27,42,.35);color:#fff;font-size:13px;font-weight:700} .video-toggle svg{width:16px;height:16px} .video-toggle:hover{border-color:#fff} .hero__sticker{position:absolute;right:var(--gutter);top:calc(var(--header-h) + 40px);display:none} @media (min-width:1024px){.hero__sticker{display:grid}} /* hero di pagina interna (soluzione, case): foto + testo, più basso */ .hero--page{padding-top:calc(var(--header-h) + clamp(40px,6vw,96px));padding-bottom:clamp(48px,6vw,88px);min-height:min(88svh,820px);display:flex;flex-direction:column;justify-content:flex-end} .hero--page .h1{max-width:15ch} .hero__grid{display:grid;gap:32px;align-items:end} @media (min-width:1024px){.hero__grid{grid-template-columns:1.35fr .65fr}} /* UI fluttuante sopra la foto (adv, card in app) */ .float-ui{position:relative;height:100%;min-height:340px;display:none} @media (min-width:1024px){.float-ui{display:block}} .float-ui img{position:absolute;border-radius:18px;box-shadow:0 26px 60px rgba(0,0,0,.45);background:#fff} .float-ui .f1{width:200px;right:150px;bottom:30px;transform:rotate(-6deg)} .float-ui .f2{width:200px;right:0;bottom:120px;transform:rotate(5deg)} .float-ui .lbl{position:absolute;right:40px;bottom:0;background:#fff;color:var(--ink);font-weight:800;font-size:13px;border-radius:var(--r-pill);padding:8px 14px;box-shadow:var(--shadow-2)} /* piattaforma — hero di pagina con piede (stat + pausa video), telefoni senza cornice, famiglie in hero (piattaforma/*.html) */ .hero--page .hero__foot{margin-top:clamp(28px,4vw,44px);padding-bottom:0} .float-ui--phones img{background:none;box-shadow:none;border-radius:0;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))} .float-ui--phones .f1{width:190px;right:210px;bottom:24px;transform:rotate(-6deg)} .float-ui--phones .f2{width:280px;right:-24px;bottom:30px;transform:rotate(3deg)} .pf-hero-fams{display:none;gap:10px;align-content:end} @media (min-width:1024px){.pf-hero-fams{display:grid}} .pf-hero-fams a{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-decoration:none;transition:background-color .2s,transform .2s var(--ease)} .pf-hero-fams a:hover{background:rgba(255,255,255,.18);transform:translateX(-4px)} .pf-hero-fams em{font-style:normal;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--o);color:var(--ink-2);font-weight:900;font-size:13px} .pf-hero-fams b{display:block;font-size:16px;font-weight:800;line-height:1.2} .pf-hero-fams small{display:block;font-size:12.5px;color:var(--on-dark-2);line-height:1.35} /* 10 · BREADCRUMB ---------------------------------------------------------- */ .breadcrumb{font-size:13px;font-weight:600;margin-bottom:22px} .breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0} .breadcrumb li{display:inline-flex;align-items:center;gap:6px;color:var(--on-dark-2)} .breadcrumb li+li::before{content:"/";opacity:.6} .breadcrumb a{color:#fff;text-decoration:none} .breadcrumb a:hover{text-decoration:underline} .breadcrumb [aria-current]{color:#fff} .breadcrumb--light li{color:var(--text-2)} .breadcrumb--light a,.breadcrumb--light [aria-current]{color:var(--ink)} /* 11 · CARD ---------------------------------------------------------------- */ .card-img{position:relative;overflow:hidden;background:var(--surface)} .card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} /* card soluzione */ .sol-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--shadow-1);transition:transform .25s var(--ease),box-shadow .25s} .sol-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)} .sol-card:hover .card-img img{transform:scale(1.05)} .sol-card .card-img{aspect-ratio:16/11} .sol-card__n{position:absolute;left:14px;top:14px;z-index:1} .sol-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1} .sol-card__name{font-size:22px;font-weight:900;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;line-height:1.05} .sol-card__name small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--o-ink);margin-bottom:4px} .sol-card p{font-size:15px;line-height:1.5} .sol-card__entry{font-size:13px;color:var(--text);background:var(--surface);border-radius:12px;padding:8px 12px;margin-top:4px} .sol-card__entry b{color:var(--ink)} .sol-card__go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--o-ink)} .sol-card__go svg{width:16px;height:16px;transition:transform .2s} .sol-card:hover .sol-card__go svg{transform:translateX(4px)} /* card case: foto + tag + titolo + 3 KPI-slot (reach · ingaggio · risultato) */ .case-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--text);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s} .case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent} .case-card:hover .card-img img{transform:scale(1.05)} .case-card .card-img{aspect-ratio:4/3} .case-card__tags{position:absolute;left:12px;top:12px;right:12px;z-index:1;display:flex;flex-wrap:wrap;gap:6px} .case-card__tags .pill{background:rgba(255,255,255,.94);font-size:11.5px;padding:4px 10px} .case-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .case-card__brand{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink)} .case-card__title{font-size:19px;font-weight:800;line-height:1.22;color:var(--ink);letter-spacing:-.01em} /* KPI-slot: una riga per slot (etichetta · valore · unità). Dato non pubblico → .is-empty «su richiesta» */ .kpis{display:grid;margin-top:auto;padding-top:10px} .kpi{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:baseline;gap:2px 10px;padding:8px 0;border-top:1px solid var(--line);min-width:0} .kpi small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink)} .kpi b{font-size:17px;font-weight:900;line-height:1.2;color:var(--ink);letter-spacing:-.02em} .kpi b span{display:block;font-size:12.5px;font-weight:500;color:var(--text-2);letter-spacing:0;margin:1px 0 0;line-height:1.3} .kpi.is-empty b{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0;font-style:italic} .case-card--dark{background:var(--ink);border-color:transparent;color:var(--on-dark)} .case-card--dark .case-card__title{color:#fff} .case-card--dark .kpi{border-top-color:rgba(255,255,255,.12)} .case-card--dark .kpi b{color:#fff} .case-card--dark .kpi b span{color:var(--on-dark-2)} /* info-card generica (problema, ragioni, step) */ .info-card{background:#fff;border-radius:var(--r);padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px} .info-card p{font-size:15.5px;line-height:1.55} .info-card--surface{background:var(--surface);border-color:transparent} .info-card--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--on-dark)} .info-card--dark .h3,.info-card--dark .h4{color:#fff} .info-card--orange{background:var(--o);border-color:transparent;color:var(--ink-2)} .info-card--orange .h3{color:var(--ink-2)} /* card segmento (contatti, selettore) */ .seg-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s} .seg-card:hover{border-color:var(--o);transform:translateY(-4px);box-shadow:var(--shadow-2)} .seg-card__icon{width:48px;height:48px;border-radius:14px;background:var(--cream);color:var(--o-ink);display:grid;place-items:center} .seg-card__icon svg{width:24px;height:24px} .seg-card b{font-size:19px;font-weight:800;color:var(--ink);line-height:1.2} .seg-card p{font-size:14.5px;line-height:1.5} .seg-card .btn--link{margin-top:auto;font-size:14px} /* foto con etichetta (circuiti, verbi) */ .media-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;text-decoration:none} .media-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)} .media-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,27,42,0) 20%,rgba(20,27,42,.6) 55%,rgba(20,27,42,.94) 100%)} a.media-card:hover>img{transform:scale(1.05)} .media-card__body{padding:22px 24px 24px} .media-card__body small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .media-card__body b{display:block;font-size:20px;font-weight:800;line-height:1.2;margin-top:4px} .media-card__body p{font-size:14.5px;color:var(--on-dark);margin-top:6px;line-height:1.5} .media-card__n{position:absolute;left:18px;top:18px} /* card prezzo */ .price-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);position:relative} .price-card .card-img{aspect-ratio:16/9} .price-card__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .price-card__lvl{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .price-card__price{font-size:clamp(30px,3vw,40px);font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1} .price-card__price small{font-size:14px;font-weight:600;color:var(--text-2);letter-spacing:0} .price-card ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px;font-size:14.5px} .price-card li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .price-card li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B34A00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat} .price-card .btn{margin-top:auto} .price-card--hot{border-color:var(--o);box-shadow:0 18px 44px rgba(255,122,0,.2)} .price-card--hot::before{content:attr(data-badge);position:absolute;right:14px;top:14px;z-index:2;background:var(--o);color:var(--ink-2);font-size:11.5px;font-weight:800;border-radius:var(--r-pill);padding:5px 12px} .price-card--dark{background:var(--ink);border-color:transparent;color:var(--on-dark)} .price-card--dark .price-card__price{color:#fff} .price-card--dark .price-card__lvl{color:#FFB066} .price-card--dark li::before{background-color:rgba(255,255,255,.12)} /* card CTA (ultima della griglia) */ .cta-card{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:28px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-dark);text-decoration:none;min-height:280px;transition:transform .25s var(--ease)} .cta-card:hover{transform:translateY(-6px)} .cta-card b{font-size:26px;font-weight:900;text-transform:uppercase;line-height:1.05;color:#fff} .cta-card .btn{align-self:flex-start} /* segmenti/insight — card report (copertina foto o tipografica), card partner, muro loghi statico (aggiunto 05/10/2026) */ .report-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s} .report-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .report-card__cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2);color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px 22px} .report-card__cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .report-card__cover--type::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(155deg,rgba(235,106,0,.94) 0%,rgba(235,106,0,.72) 38%,rgba(20,27,42,.92) 100%)} .report-card__cover--type.is-ink::after{background:linear-gradient(155deg,rgba(30,41,59,.95) 0%,rgba(30,41,59,.75) 45%,rgba(235,106,0,.85) 100%)} .report-card__cover small{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86)} .report-card__cover b{font-size:clamp(26px,2.6vw,36px);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.02em} .report-card__cover .report-card__logo{position:absolute;left:20px;top:18px;width:40px;height:40px;border-radius:50%} .report-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1} .report-card__body p{font-size:15px;line-height:1.55} .report-card__body .btn{margin-top:auto} .partner-card{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)} .partner-card__role{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .partner-card__name{font-size:clamp(22px,2.1vw,30px);font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1.05} .partner-card p{font-size:15px;line-height:1.55} .logo-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media (min-width:768px){.logo-wall{grid-template-columns:repeat(5,minmax(0,1fr))}} @media (min-width:1100px){.logo-wall{grid-template-columns:repeat(6,minmax(0,1fr))}} .logo-wall>div{background:#fff;display:grid;place-items:center;padding:16px 10px;min-height:92px} .logo-wall img{max-height:38px;max-width:min(118px,100%);width:auto;height:auto;object-fit:contain;filter:brightness(0);opacity:.66} .logo-wall img.is-tall{max-height:54px} /* ambassador/content: riga sotto il prezzo (unità, forchetta, «su preventivo») */ .price-card__per{font-size:13.5px;font-weight:600;color:var(--text-2);line-height:1.35;margin-top:-4px} .price-card--dark .price-card__per{color:var(--on-dark-2)} .price-card__price--text{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em} .price-card__price--stack small{display:block;margin-top:6px} /* piattaforma — mockup e card di piattaforma/community.html e media.html (aggiunto 05/10/2026) .pf-mock-grid · .pf-profile (profilo di esempio) · .pf-intent (scheda intenzioni) · .pf-svc (servizio dell'app) .pf-shot (screenshot con didascalia) · .pf-browser + .pf-wl (white label) · .pf-areas/.pf-area (7 aree sulla base) .pf-chat (community chiusa del brand) · .pf-steps (passaggi del percorso) */ .pf-mock-grid{display:grid;gap:clamp(18px,2vw,26px);align-items:start} @media (min-width:1024px){.pf-mock-grid{grid-template-columns:1.05fr 1fr .9fr}} .pf-profile,.pf-intent{position:relative;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-1);padding:22px} .pf-tagx{position:absolute;right:16px;top:-12px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 12px} .pf-intent .pf-tagx{background:var(--o);color:var(--ink-2)} .pf-profile__head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)} .pf-avatar{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--o);color:var(--ink-2);font-weight:900} .pf-profile__head b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.2} .pf-profile__head small{display:block;font-size:12.5px;color:var(--text-2)} .pf-check{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;color:#1B6B3A;background:#E3F5EA;border-radius:var(--r-pill);padding:5px 10px} .pf-rows{display:grid;margin:6px 0 0} .pf-rows>div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline} .pf-rows>div:last-child{border-bottom:0} .pf-rows dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink)} .pf-rows dd{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4} .pf-rows dd .pill{margin:0 4px 4px 0} .pf-rows .is-key dd{background:var(--cream);border-radius:10px;padding:6px 10px;margin-left:-10px} .pf-intent{background:var(--ink-2);border-color:transparent;color:var(--on-dark)} .pf-intent__k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .pf-intent__t{display:block;font-size:22px;font-weight:900;text-transform:uppercase;color:#fff;line-height:1.05;margin-top:6px} .pf-intent__q{margin-top:18px} .pf-intent__q>span{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:8px} .pf-opts{display:flex;flex-wrap:wrap;gap:6px} .pf-opts i{font-style:normal;font-size:13px;font-weight:600;border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:5px 12px;color:var(--on-dark)} .pf-opts i.is-on{background:var(--o);border-color:var(--o);color:var(--ink-2)} .pf-intent__ok{margin-top:18px;font-size:13.5px;font-weight:600;color:#fff;display:flex;gap:8px;align-items:center} .pf-intent__ok::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--o);color:var(--ink-2);font-weight:900;font-size:12px;flex:none} .pf-intent__btn{display:block;margin-top:16px;text-align:center;background:#fff;color:var(--ink);font-weight:800;border-radius:var(--r-pill);padding:12px} /* servizio dell'app */ .pf-svc{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)} .pf-svc__i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--cream);color:var(--o-ink)} .pf-svc__i svg{width:22px;height:22px} .pf-svc b{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.25} .pf-svc p{font-size:14px;line-height:1.5;margin-top:2px} /* screenshot con didascalia */ .pf-shot{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);margin:0} .pf-shot__img{position:relative;aspect-ratio:4/5;background:var(--cream);overflow:hidden} .pf-shot__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px} .pf-shot__img--cover img{object-fit:cover;padding:0} .pf-shot figcaption{padding:16px 18px 18px;font-size:14px;line-height:1.5} .pf-shot figcaption b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink);margin-bottom:4px} @media (max-width:639px){.pf-shots{grid-template-columns:1fr 1fr}.pf-shots .pf-shot__img{aspect-ratio:3/4}.pf-shots .pf-shot figcaption{padding:12px;font-size:12.5px}} /* white label: finestra browser + telefono concept */ .pf-wl-stage{position:relative;padding-bottom:clamp(60px,8vw,110px)} .pf-browser{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow-2);border:1px solid var(--line);margin:0} .pf-browser__bar{display:flex;gap:6px;align-items:center;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)} .pf-browser__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)} .pf-browser__bar span{margin-left:10px;font-size:12px;font-weight:600;color:var(--text-2)} .pf-browser figcaption{padding:12px 16px;font-size:13px;font-weight:700;color:var(--ink);border-top:1px solid var(--line)} .pf-wl{position:absolute;right:0;bottom:0;width:min(44%,220px);background:var(--ink-2);color:#fff;border-radius:30px;padding:18px 14px 14px;box-shadow:0 26px 60px rgba(20,27,42,.35);border:6px solid #0B101A;transform:rotate(3deg)} .pf-wl small{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .pf-wl b{display:block;font-size:17px;font-weight:900;text-transform:uppercase;line-height:1;margin-top:4px} .pf-wl__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .pf-wl__tiles span{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700} .pf-wl__tiles span:first-child{background:var(--o);color:var(--ink-2)} .pf-wl__by{display:block;text-align:center;font-size:10px;color:var(--on-dark-2);margin-top:12px} @media (max-width:639px){.pf-wl-stage{padding-bottom:150px}.pf-wl-stage .pf-browser figcaption{padding-right:150px}.pf-wl{width:140px;padding:12px 10px 10px;border-width:4px;border-radius:22px}.pf-wl b{font-size:13px}.pf-wl__tiles{gap:6px;margin-top:10px}.pf-wl__tiles span{font-size:10px;border-radius:10px}} /* le 7 aree sulla base comune */ .pf-areas{display:grid;gap:10px} .pf-area{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:18px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s} .pf-area:hover{border-color:var(--o);transform:translateX(4px);box-shadow:var(--shadow-1)} .pf-area__n{grid-row:span 2;font-size:28px;font-weight:900;letter-spacing:-.04em;color:var(--o-ink);line-height:1} .pf-area__name{font-size:19px;font-weight:900;text-transform:uppercase;color:var(--ink);line-height:1.1} .pf-area__name span{display:block;font-size:14px;font-weight:500;text-transform:none;color:var(--text);margin-top:4px;line-height:1.45} .pf-area .chips{grid-column:2/4} .pf-area .chips .pill{font-size:12px} .pf-area__go{grid-column:3;grid-row:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--o-ink)} .pf-area__go svg{width:18px;height:18px} @media (min-width:1024px){.pf-area{grid-template-columns:56px minmax(0,1.1fr) minmax(0,1fr) 42px}.pf-area__n{grid-row:auto}.pf-area .chips{grid-column:3}.pf-area__go{grid-column:4;grid-row:auto}} .pf-areas__base{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:20px 22px;border-radius:var(--r);background:var(--ink);color:var(--on-dark)} .pf-areas__base b{font-size:19px;font-weight:900;text-transform:uppercase;color:#fff} .pf-areas__base em{font-style:normal;background:var(--o);color:var(--ink-2);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 12px} /* community chiusa del brand (mockup) */ .pf-chat{position:relative;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-1);padding:20px;display:grid;gap:12px} .pf-chat__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pf-chat__head b{font-size:16px;font-weight:800;color:var(--ink)} .pf-chat__head .pill{font-size:11px;padding:3px 9px} .pf-chat__msg{background:var(--surface);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14px;line-height:1.5} .pf-chat__msg small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o-ink);margin-bottom:2px} .pf-chat__bar{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink)} .pf-chat__bar i{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden} .pf-chat__bar i::after{content:"";display:block;height:100%;width:var(--w,60%);background:var(--o);border-radius:inherit} .pf-chat__cta{background:var(--ink);color:#fff;border-radius:16px;padding:14px;font-size:14px;line-height:1.45} .pf-chat__cta b{display:block;color:#FFB066;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px} /* passaggi del percorso (club per momento) */ .pf-steps{display:grid;gap:10px} .pf-steps>div{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);font-weight:800;color:var(--ink);font-size:17px} .pf-steps>div:nth-child(2){margin-left:clamp(0px,4vw,48px)} .pf-steps>div:nth-child(3){margin-left:clamp(0px,8vw,96px);background:var(--ink);color:#fff;border-color:transparent} .pf-steps i{font-style:normal;color:var(--o-ink);font-weight:900} .pf-steps>div:nth-child(3) i{color:var(--o)} .pf-steps small{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-2)} .pf-steps>div:nth-child(3) small{color:var(--on-dark-2)} /* piattaforma/media · scheda circuito o evento (.pf-ch, riga foto + specifiche, alternata) e indice a pill (.pf-ch-nav) · 22/10/2026 */ .pf-ch-nav{display:flex;flex-wrap:wrap;gap:8px} .pf-ch-nav a{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:8px 14px;font-size:13.5px;font-weight:700;line-height:1.2;background:#fff;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,background-color .2s} .pf-ch-nav a:hover{border-color:var(--o);background:var(--cream)} .pf-ch-nav i{font-style:normal;font-size:11.5px;font-weight:900;color:var(--o-ink)} .pf-chs{display:grid;gap:clamp(18px,2.2vw,28px)} .pf-ch{display:grid;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;scroll-margin-top:96px} .pf-ch__img{aspect-ratio:4/3;min-height:240px} .pf-ch__n{position:absolute;left:18px;top:18px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--o);color:var(--ink-2);font-weight:900;font-size:14px} .pf-ch__tag{position:absolute;right:18px;top:18px;border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:800;background:var(--ink-2);color:#fff} .pf-ch__img--type{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(22px,3vw,40px);background:var(--ink-2);color:#fff} .pf-ch__img--type small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .pf-ch__img--type b{font-size:clamp(30px,3.6vw,52px);font-weight:900;line-height:1;text-transform:uppercase;text-wrap:balance} .pf-ch__img--type .pf-ch__sub{font-size:15px;font-weight:600;color:var(--on-dark)} .pf-ch__body{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,3vw,40px)} .pf-ch__claim{font-size:17px;line-height:1.55;color:var(--text)} .pf-ch__specs{display:grid;margin:0} .pf-ch__specs>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline} .pf-ch__specs dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink)} .pf-ch__specs dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)} .pf-ch__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px} @media (min-width:960px){.pf-ch{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.pf-ch__img{aspect-ratio:auto;min-height:100%}.pf-ch:nth-child(even) .pf-ch__img{order:2}} @media (max-width:520px){.pf-ch__specs>div{grid-template-columns:1fr;gap:2px}} /* 12 · NUMERI E CONTATORI -------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(16px,3vw,40px)} @media (min-width:960px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}} .stat{border-top:2px solid var(--line);padding-top:18px} .stat__v{display:block;font-size:clamp(38px,5.6vw,76px);font-weight:900;line-height:.95;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} @media (max-width:420px){.stat__v{white-space:normal}} .stat__v.is-o{color:var(--o-ink)} .stat__pre{display:inline-block;font-size:max(12px,.24em);font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1;margin-right:.35em;vertical-align:.25em;color:var(--o-ink)} .sec--dark .stat__pre,.sec--ink .stat__pre,.panel--dark .stat__pre{color:#FFB066} .stats--4 .stat__v{font-size:clamp(34px,4.2vw,60px)} .stats--fit .stat__v{font-size:clamp(34px,3.7vw,54px)} .stats--sm .stat__v{font-size:clamp(34px,4.4vw,60px)} .stat__l{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-top:10px;line-height:1.4} .sec--dark .stat,.sec--ink .stat,.panel--dark .stat{border-top-color:rgba(255,255,255,.16)} .sec--dark .stat__v,.sec--ink .stat__v,.panel--dark .stat__v{color:#fff} .sec--dark .stat__v.is-o,.sec--ink .stat__v.is-o,.panel--dark .stat__v.is-o{color:var(--o)} .sec--dark .stat__l,.sec--ink .stat__l,.panel--dark .stat__l{color:var(--on-dark-2)} .stat-note{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:14px} .goal{display:inline-flex;align-items:center;gap:12px;border-radius:var(--r-pill);background:rgba(255,122,0,.14);color:#fff;padding:8px 18px 8px 8px;font-weight:700;font-size:14.5px} .goal em{font-style:normal;background:var(--o);color:var(--ink-2);border-radius:var(--r-pill);padding:4px 12px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} /* 13 · MARQUEE LOGHI ------------------------------------------------------- */ .logos{padding-block:clamp(30px,4vw,48px);border-bottom:1px solid var(--line)} .logos__cap{text-align:center;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:22px} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee__track{--marquee-gap:clamp(40px,5vw,72px);display:flex;align-items:center;gap:var(--marquee-gap);width:max-content;animation:ubx-marquee var(--marquee-speed,70s) linear infinite} .marquee:hover .marquee__track,.marquee.is-paused .marquee__track{animation-play-state:paused} /* Local optical supports: complete marks, balanced ink area, no per-page size exceptions. */ .marquee img{height:72px;width:176px;max-width:none;flex:none;object-fit:contain;filter:brightness(0);opacity:.62;transition:opacity .2s} .marquee img:hover{opacity:1} .marquee--dark img{filter:brightness(0) invert(1);opacity:.78} .logos--dark{background:var(--ink-2);border-bottom:0} .logos--dark .logos__cap{color:var(--on-dark-2)} /* 2N items have 2N−1 gaps: include the missing half-gap at the repeat seam. */ @keyframes ubx-marquee{to{transform:translateX(calc(-50% - var(--marquee-gap)/2))}} /* 14 · TAB ----------------------------------------------------------------- */ .tabs__list{display:flex;gap:8px;flex-wrap:wrap} .tabs__tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:#fff;font-weight:700;font-size:15px;color:var(--ink);transition:background-color .18s,border-color .18s,color .18s} .tabs__tab:hover{border-color:var(--ink)} .tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .tabs__panel{margin-top:28px} .tabs__panel:focus-visible{outline-offset:8px} .js .tabs__panel.is-entering{animation:ubx-fade .35s var(--ease)} @keyframes ubx-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* selettore per bisogno («Sono un…») */ .tabs--seg .tabs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media (min-width:960px){.tabs--seg .tabs__list{grid-template-columns:repeat(4,minmax(0,1fr))}} .tabs--seg .tabs__tab{min-height:84px;border-radius:22px;padding:14px 18px;flex-direction:row;justify-content:flex-start;text-align:left;font-size:15px;line-height:1.25;background:#fff;border-color:var(--line)} .tabs--seg .tabs__tab small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)} .tabs--seg .tabs__tab b{display:block;font-size:17px;font-weight:800} .tabs--seg .tabs__tab .seg-ico{flex:none;width:42px;height:42px;border-radius:13px;background:var(--cream);color:var(--o-ink);display:grid;place-items:center} .tabs--seg .tabs__tab .seg-ico svg{width:22px;height:22px} .tabs--seg .tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink)} .tabs--seg .tabs__tab[aria-selected="true"] small{color:var(--on-dark-2)} .tabs--seg .tabs__tab[aria-selected="true"] .seg-ico{background:var(--o);color:var(--ink-2)} @media (max-width:520px){.tabs--seg .tabs__tab{min-height:74px;padding:12px;gap:8px}.tabs--seg .tabs__tab .seg-ico{width:34px;height:34px}.tabs--seg .tabs__tab b{font-size:15px}} .seg-panel{display:grid;gap:clamp(20px,3vw,36px);background:#fff;border-radius:var(--r-xl);padding:clamp(22px,3.4vw,44px);box-shadow:var(--shadow-1)} @media (min-width:1024px){.seg-panel{grid-template-columns:.9fr 1.6fr;align-items:start}} .seg-panel__intro .h3{font-size:clamp(24px,2.4vw,32px);font-weight:900;text-transform:uppercase;line-height:1.05} .seg-panel__intro p{margin-top:12px} .seg-panel__sols{display:grid;gap:12px} @media (min-width:640px){.seg-panel__sols{grid-template-columns:repeat(3,minmax(0,1fr))}} .mini-sol{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface);text-decoration:none;color:var(--text);transition:transform .2s var(--ease),box-shadow .2s} .mini-sol:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .mini-sol .card-img{aspect-ratio:16/10} .mini-sol__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px} .mini-sol__b b{font-size:16px;font-weight:900;text-transform:uppercase;color:var(--ink)} .mini-sol__b span{font-size:13.5px;line-height:1.45} @media (max-width:639px){.mini-sol{flex-direction:row;align-items:stretch}.mini-sol .card-img{aspect-ratio:auto;width:112px;min-height:92px;flex:none}.mini-sol__b{justify-content:center}} /* ambassador/content: pannello leva dentro un tab (foto + testo + prezzo) */ .lever{display:grid;gap:clamp(18px,3vw,36px);background:#fff;border-radius:var(--r-xl);padding:clamp(12px,1.6vw,18px);box-shadow:var(--shadow-1)} @media (min-width:960px){.lever{grid-template-columns:.95fr 1.05fr;align-items:stretch}} .lever__media{position:relative;min-height:clamp(260px,34vw,460px);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin:0} .lever__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lever__media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(20,27,42,0),rgba(20,27,42,.7))} .lever__media figcaption{position:absolute;left:16px;bottom:14px;right:16px;z-index:1;font-size:12.5px;font-weight:700;color:#fff} .lever__media--contain{background:var(--cream)} .lever__media--contain img{object-fit:contain;padding:clamp(14px,2vw,26px)} .lever__media--contain::after{display:none} .lever__media--contain figcaption{color:var(--ink)} .lever__body{display:flex;flex-direction:column;gap:14px;padding:clamp(8px,1.6vw,22px) clamp(6px,1.4vw,18px)} .lever__body .h3{font-size:clamp(24px,2.4vw,32px);font-weight:900;text-transform:uppercase;line-height:1.05} .lever__list{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:15px} .lever__list li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .lever__list li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--o)} .lever__price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 18px;border-radius:var(--r);background:var(--cream)} .lever__price b{font-size:clamp(22px,2.2vw,28px);font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.1} .lever__price span{font-size:13.5px;font-weight:600;color:var(--text-2)} .mini-steps{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} .mini-steps>div{background:var(--surface);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.4} .mini-steps small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink)} .mini-steps b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:2px 0} .mini-steps>.is-key{background:var(--ink);color:var(--on-dark)} .mini-steps>.is-key b{color:#fff} .mini-steps>.is-key small{color:#FFB066} /* piattaforma — pannello dei tab «club» e delle «famiglie di circuiti» (.pf-panel: testo + visual) */ .pf-panel{display:grid;gap:clamp(22px,3vw,44px);background:#fff;border-radius:var(--r-xl);padding:clamp(22px,3.4vw,44px);box-shadow:var(--shadow-1)} @media (min-width:1024px){.pf-panel{grid-template-columns:1fr 1.05fr;align-items:center}.pf-panel--media{grid-template-columns:1.1fr .9fr;align-items:start}} .pf-panel .h3{font-size:clamp(24px,2.4vw,32px);font-weight:900;text-transform:uppercase;line-height:1.05} .pf-panel ul.pf-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:15.5px} .pf-panel ul.pf-list li{display:flex;gap:10px;line-height:1.5} .pf-panel ul.pf-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--o);margin-top:.6em} .pf-uses{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;font-size:13px;font-weight:700;color:var(--text-2)} .pf-uses a.pill{background:var(--cream);color:var(--o-ink)} .pf-uses a.pill:hover{background:var(--o);color:var(--ink-2)} .pf-cloud{display:flex;flex-wrap:wrap;gap:10px;align-content:center;padding:clamp(18px,3vw,36px);border-radius:var(--r-lg);background:var(--cream)} .pf-cloud span{background:#fff;border-radius:var(--r-pill);padding:10px 18px;font-weight:800;color:var(--ink);font-size:clamp(14px,1.4vw,18px);box-shadow:var(--shadow-1)} .pf-cloud span:nth-child(3n+1){background:var(--ink);color:#fff} .pf-cloud span:nth-child(4){background:var(--o);color:var(--ink-2)} .pf-cloud span.is-more{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2);color:var(--text-2)} .pf-pass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .pf-pass .media-card{min-height:260px} .pf-pass .media-card__body{padding:16px 16px 18px}.pf-pass .media-card__body b{font-size:17px;overflow-wrap:anywhere}.pf-pass .media-card__body p{font-size:13px} @media (max-width:639px){.pf-pass{grid-template-columns:1fr}.pf-pass .media-card{min-height:180px}} .pf-specs{display:grid;gap:18px} .pf-specs h4{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink);margin-bottom:8px} .pf-get{border-radius:var(--r);background:var(--cream);padding:16px 18px;font-size:15px;line-height:1.5;color:var(--ink)} .pf-get b{font-weight:800} .pf-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:clamp(130px,13vw,190px)} .pf-photos .ph:first-child{grid-column:span 2;grid-row:span 2} /* 15 · ACCORDION FAQ ------------------------------------------------------- */ .faq{max-width:900px} .acc{border-bottom:1px solid var(--line)} .acc:first-child{border-top:1px solid var(--line)} .acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(17px,1.5vw,19px);font-weight:700;color:var(--ink);line-height:1.35} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s var(--ease),background-color .2s} .acc[open] summary::after{transform:rotate(45deg);background-color:var(--o)} .acc summary:hover::after{background-color:var(--o-soft)} .acc__body{padding:0 56px 24px 0;color:var(--text);font-size:16px;line-height:1.65} .sec--dark .acc,.sec--ink .acc{border-color:rgba(255,255,255,.14)} .sec--dark .acc summary,.sec--ink .acc summary{color:#fff} .sec--dark .acc__body,.sec--ink .acc__body{color:var(--on-dark)} /* 16 · TIMELINE ------------------------------------------------------------ */ .timeline{display:grid;gap:12px;counter-reset:tl;position:relative} @media (min-width:900px){.timeline{grid-template-columns:repeat(var(--steps,4),minmax(0,1fr))}} .tl-step{position:relative;background:#fff;border-radius:var(--r);padding:24px 22px 22px;border:1px solid var(--line)} .tl-step__n{display:block;font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--o-ink)} .tl-step b{display:block;font-size:19px;font-weight:800;color:var(--ink);margin-top:12px} .tl-step p{font-size:14.5px;line-height:1.55;margin-top:6px} .tl-step.is-key{background:var(--o);border-color:transparent;color:var(--ink-2)} .tl-step.is-key .tl-step__n,.tl-step.is-key b{color:var(--ink-2)} .sec--dark .tl-step:not(.is-key),.sec--ink .tl-step:not(.is-key){color:var(--text)} @media (min-width:900px){.tl-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:42px;width:12px;height:2px;background:var(--line-2)}} .progress-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:22px} .progress-bar span{height:12px;border-radius:var(--r-pill);background:var(--o)} .progress-bar span:nth-child(1){opacity:.3}.progress-bar span:nth-child(2){opacity:.45}.progress-bar span:nth-child(3){opacity:.6}.progress-bar span:nth-child(4){opacity:.8} .progress-lbl{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:right;font-weight:900;font-size:clamp(13px,1.6vw,20px);color:var(--ink);margin-top:6px} /* grafico fasi (prima · durante · dopo) */ .phase-chart{background:#fff;border-radius:var(--r-lg);padding:clamp(14px,2vw,26px);border:1px solid var(--line)} .phase-chart svg{width:100%;height:auto} .phases{display:grid;gap:12px;margin-top:14px} @media (min-width:768px){.phases{grid-template-columns:repeat(3,1fr)}} .phase{border-radius:var(--r);padding:22px;background:#fff;border:1px solid var(--line)} .phase b{display:block;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--ink)} .phase ul{margin:10px 0 0;padding-left:18px;font-size:15px;line-height:1.6} .phase--key{background:var(--ink);border-color:transparent;color:var(--on-dark)} .phase--key b{color:var(--o)} /* career/education · cerchio interattivo a fasi [data-wheel] (Employer Branding Circle, soluzioni/career.html) .ebc (griglia cerchio + scheda) · .ebc__wheel (SVG con [data-wheel-item] .seg/.ctr) · .ebc__btns (chip generati da JS) · .ebc__card (scheda fase) */ .ebc{display:grid;gap:clamp(24px,4vw,56px);align-items:center} @media (min-width:960px){.ebc{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}} .ebc__wheel{width:100%;max-width:640px;margin-inline:auto} .ebc__wheel svg{width:100%;height:auto;overflow:visible} .ebc__wheel .seg,.ebc__wheel .ctr{cursor:pointer;outline:none;transition:opacity .25s,transform .3s var(--ease)} .ebc__wheel.has-on .seg:not(.is-on){opacity:.62} .ebc__wheel .seg.is-on{transform:scale(1.04)} .ebc__wheel .seg:focus-visible path{stroke:var(--o);stroke-width:12} .ebc__wheel .ctr.is-on .disc,.ebc__wheel .ctr:focus-visible .disc{stroke:var(--o);stroke-width:10} @media (max-width:640px){.ebc__wheel .lbl{display:none}.ebc__wheel .pnum{font-size:74px}} .ebc__btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px} .ebc__btns .filter-chip{min-height:38px;padding:0 13px;font-size:13px} .ebc__card{background:var(--ink-2);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);min-height:380px;display:flex;flex-direction:column;gap:16px} .ebc__kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .ebc__title{font-size:clamp(28px,3.2vw,42px);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.02em;color:#fff} .ebc__card dl{margin:0;display:grid;gap:6px} .ebc__card dt{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-top:8px} .ebc__card dd{margin:0;font-size:16px;line-height:1.55} .ebc__entry{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:var(--on-dark-2)} .ebc__entry b{color:#fff} /* career/education · imbuto a barre che si restringono (club Education) · .funnel > div[style="--w:80%"] .f1…f4 */ .funnel{display:grid;gap:10px;justify-items:center} .funnel>div{width:var(--w,100%);border-radius:18px;padding:16px 22px;text-align:center;background:var(--ink);color:#fff} .funnel small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8} .funnel b{display:block;font-size:clamp(15px,1.4vw,18px);font-weight:800;line-height:1.25;margin-top:2px} .funnel .f2{background:#FFC58F;color:var(--ink-2)}.funnel .f3{background:#FFA04A;color:var(--ink-2)}.funnel .f4{background:var(--o);color:var(--ink-2)} /* scalini (momento del percorso) */ .stair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;margin-top:14px} .stair>div{display:flex;flex-direction:column;justify-content:flex-end;background:var(--o);color:var(--ink-2);border-radius:14px 14px 6px 6px;padding:12px;font-size:13px;font-weight:600;line-height:1.3} .stair>div:last-child{background:var(--ink);color:#fff} .stair b{display:block;font-size:15px;font-weight:900} /* 17 · GRIGLIA FOTO -------------------------------------------------------- */ .photo-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,18vw,240px)} @media (min-width:900px){.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);margin:0} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .ph:hover img{transform:scale(1.04)} .ph--wide{grid-column:span 2} .ph--tall{grid-row:span 2} .ph figcaption{position:absolute;left:12px;bottom:12px;right:12px;font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)} .ph button,.ph a{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;padding:0;cursor:zoom-in} /* 18 · VIDEO THUMB E LIGHTBOX --------------------------------------------- */ .vthumb{position:relative;display:block;width:100%;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);color:#fff;text-align:left;aspect-ratio:16/9;isolation:isolate;cursor:pointer} .vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.8;transition:transform .6s var(--ease),opacity .3s} .vthumb::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,27,42,.05) 30%,rgba(20,27,42,.85))} .vthumb:hover img{transform:scale(1.04);opacity:.9} .vthumb__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--o);color:var(--ink-2);display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.35);transition:transform .2s var(--ease)} .vthumb:hover .vthumb__play{transform:scale(1.08)} .vthumb__play svg{width:28px;height:28px;margin-left:4px} .vthumb__cap{position:absolute;left:20px;right:20px;bottom:16px;font-weight:800;font-size:17px} .vthumb__cap small{display:block;font-size:12px;font-weight:600;opacity:.8} .vthumb--tall{aspect-ratio:9/14} .vthumb--plain{background:linear-gradient(135deg,var(--ink),var(--ink-2))} .vthumb--plain .vthumb__brand{position:absolute;left:24px;top:22px;font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:rgba(255,255,255,.14)} .lightbox{position:fixed;inset:0;z-index:300;background:rgba(10,14,22,.92);display:grid;place-items:center;padding:clamp(16px,4vw,56px);opacity:0;transition:opacity .2s} .lightbox.is-open{opacity:1} .lightbox__frame{width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)} .lightbox__frame.is-vertical{width:auto;height:min(86vh,900px);aspect-ratio:9/16} .lightbox__frame.is-image{background:transparent;aspect-ratio:auto;width:auto;max-width:min(1400px,100%);box-shadow:none} .lightbox__frame iframe,.lightbox__frame video{position:absolute;inset:0;width:100%;height:100%;border:0} .lightbox__frame img{max-height:86vh;width:auto;border-radius:var(--r)} .lightbox__close{position:absolute;right:clamp(12px,2vw,28px);top:clamp(12px,2vw,28px);width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center} .lightbox__close svg{width:20px;height:20px} .lightbox__note{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.6)} /* Finestra modale riusabile (creata da JS). Uso attuale: richiesta deck [data-deck-request] (ubx.js modulo C, decisione 13/10/2026). .modal (sfondo) > .modal__box[role=dialog] > .modal__close .modal__head .modal__body · .modal__done (messaggio finale) Dentro: .form-grid/.field/.input della sezione 20 · .consent (casella obbligatoria) · .modal__alert (riepilogo errori, aria-live) */ .modal{position:fixed;inset:0;z-index:320;background:rgba(10,14,22,.72);display:grid;place-items:center;padding:clamp(12px,3vw,40px);overflow-y:auto;opacity:0;transition:opacity .2s} .modal.is-open{opacity:1} .modal__box{position:relative;width:min(640px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--text);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.4);padding:clamp(22px,3.6vw,40px);transform:translateY(12px);transition:transform .25s var(--ease)} .modal.is-open .modal__box{transform:none} .modal__close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);display:grid;place-items:center} .modal__close:hover{background:var(--cream)} .modal__close svg{width:18px;height:18px} .modal__head{padding-right:48px;margin-bottom:20px} .modal__head .eyebrow{color:var(--o-ink)} .modal__title{font-size:clamp(22px,2.6vw,30px);font-weight:900;text-transform:uppercase;line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin:6px 0 8px} .modal__lead{font-size:15px;color:var(--text-2)} .modal .input[readonly]{background:var(--surface);border-style:dashed;color:var(--ink);font-weight:700} .modal .field{align-content:start} .modal .field__err,.modal .field>.field__err{margin:0;color:#B03020;font-size:13px;font-weight:600} .modal__alert{border-radius:14px;background:#FDECEA;color:#8E2414;font-size:14px;font-weight:600;padding:12px 14px} .modal__alert:empty{display:none} .modal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px} .modal__note{font-size:12.5px;color:var(--text-2);max-width:40ch} .modal__done{text-align:left} .modal__done .modal__title{outline:0} .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--text);cursor:pointer} .consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--o);cursor:pointer} .consent input[aria-invalid="true"]{outline:2px solid #C0392B;outline-offset:2px} .consent a{color:var(--o-ink);font-weight:700} @media (max-width:520px){.modal{place-items:end center;padding:0}.modal__box{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:94dvh}.modal__foot .btn{width:100%}} /* ambassador/content: griglia di video verticali, 2 colonne anche su mobile */ .g-reels{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:1024px){.g-reels{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:639px){.g-reels .vthumb__play{width:56px;height:56px;margin:-28px 0 0 -28px}.g-reels .vthumb__cap{left:12px;right:12px;bottom:10px;font-size:14px}} /* 19 · FILTRI -------------------------------------------------------------- */ .filters{display:grid;gap:16px;padding:20px;border-radius:var(--r-lg);background:var(--surface);margin-bottom:28px} @media (min-width:1024px){.filters{grid-template-columns:auto 1fr;align-items:center;column-gap:20px}} .filter-group__label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)} .filter-group__chips{display:flex;flex-wrap:wrap;gap:8px} .filter-chip{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:#fff;font-size:14px;font-weight:700;color:var(--ink);transition:all .15s} .filter-chip:hover{border-color:var(--ink)} .filter-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .filter-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px} .filter-count{font-size:14px;font-weight:600;color:var(--text-2)} .filter-count b{color:var(--ink)} .filter-empty{padding:48px 24px;text-align:center;border-radius:var(--r-lg);border:1.5px dashed var(--line-2)} .is-filtered-out{display:none!important} /* 20 · FORM E FORM MULTI-STEP --------------------------------------------- */ .field{display:grid;gap:7px} .field>span,.field legend,.fieldset-title{font-size:13px;font-weight:700;color:var(--ink)} .field>span em{font-style:normal;color:var(--o-ink)} .input,.select,.textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s} .textarea{min-height:120px;resize:vertical} .input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,122,0,.25)} .input[aria-invalid="true"]{border-color:#C0392B} .field__err{font-size:13px;color:#B03020;font-weight:600} .form-grid{display:grid;gap:16px} @media (min-width:700px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}} /* scelta a card (radio/checkbox) */ .choices{display:grid;gap:10px} @media (min-width:640px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choices--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .choice{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font-weight:600;color:var(--ink);line-height:1.3;transition:border-color .15s,background-color .15s} .choice:hover{border-color:var(--ink)} .choice input{position:absolute;opacity:0;width:1px;height:1px} .choice__mark{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);display:grid;place-items:center;transition:all .15s} .choice input[type="radio"]+.choice__mark{border-radius:50%} .choice__mark::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--ink-2);transform:scale(0);transition:transform .15s} .choice input[type="radio"]+.choice__mark::after{border-radius:50%} .choice:has(input:checked){border-color:var(--o);background:var(--cream)} .choice input:checked+.choice__mark{border-color:var(--o);background:var(--o)} .choice input:checked+.choice__mark::after{transform:scale(1)} .choice input:focus-visible+.choice__mark{outline:3px solid var(--o);outline-offset:3px} .choice small{display:block;font-weight:500;font-size:13px;color:var(--text-2)} .choice svg{width:22px;height:22px;color:var(--o-ink);flex:none} /* multi-step */ .msf{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:clamp(22px,3.4vw,44px);color:var(--text)} /* Il form occupa metà della split desktop: tre card comprimono le etichette. */ @media (min-width:640px){.msf .choices--3{grid-template-columns:repeat(2,minmax(0,1fr))}} .msf__head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .msf__count{font-size:13px;font-weight:700;color:var(--text-2)} .msf__bar{height:6px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden;margin:14px 0 28px} .msf__bar i{display:block;height:100%;width:20%;background:var(--o);border-radius:inherit;transition:width .35s var(--ease)} .msf__step{border:0;padding:0;margin:0;min-width:0} .msf__step legend{font-size:clamp(22px,2.4vw,30px);font-weight:900;text-transform:uppercase;color:var(--ink);line-height:1.1;letter-spacing:-.01em;margin-bottom:6px;padding:0} .msf__hint{font-size:15px;color:var(--text-2);margin-bottom:20px} .msf__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap} .msf__summary{background:var(--surface);border-radius:16px;padding:16px 18px;font-size:14px;line-height:1.6;white-space:pre-line;margin-top:18px} .msf__privacy{font-size:12.5px;color:var(--text-2);margin-top:14px} .js .msf__step:not(.is-active){display:none} .msf__step.is-active{animation:ubx-fade .35s var(--ease)} /* contenitori chiari dentro sezioni scure: ripristina i colori */ .msf .note,.sec--dark .msf .note{color:var(--text-2)} .sec--dark .msf .btn--ghost,.sec--ink .msf .btn--ghost{color:var(--ink);border-color:var(--line-2)} .sec--dark .msf .btn--ghost:hover,.sec--ink .msf .btn--ghost:hover{border-color:var(--ink);background:transparent} .sec--dark .msf :focus-visible,.sec--ink .msf :focus-visible{outline-color:var(--o)} /* 21 · CALCOLATORE / STIMATORE AUDIENCE ------------------------------------ */ .estimator{display:grid;gap:clamp(18px,2.5vw,32px);background:var(--ink-2);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(22px,3.4vw,44px)} .estimator>*{min-width:0} @media (min-width:1024px){.estimator{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}} .estimator__opts{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start} .chip-check{position:relative;display:inline-flex} .chip-check input{position:absolute;opacity:0;width:1px;height:1px} .chip-check span{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.22);font-size:14px;font-weight:600;color:#fff;cursor:pointer;transition:all .15s;user-select:none} .chip-check span:hover{border-color:#fff} .chip-check input:checked+span{background:var(--o);border-color:var(--o);color:var(--ink-2)} .chip-check input:focus-visible+span{outline:3px solid #FFB066;outline-offset:2px} .estimator__tools{display:flex;gap:16px;margin-top:14px} .estimator__tools button{background:none;border:0;color:#FFB066;font-weight:700;font-size:14px;padding:4px 0;text-decoration:underline;text-underline-offset:3px} .estimator__out{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px} .estimator__label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)} .estimator__big{font-size:clamp(34px,4vw,52px);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums} .estimator__row{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px} .estimator__row b{color:#fff;text-align:right} .estimator__warn{font-size:12.5px;line-height:1.5;color:var(--on-dark-2)} .estimator input[type="range"]{width:100%;accent-color:var(--o)} /* ambassador/content: slider con valore e gruppi di chip nel calcolatore */ .estimator__range{display:grid;gap:10px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)} .estimator__range:first-child{padding-top:0} .estimator__range label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:15px;color:#fff} .estimator__range output{font-size:26px;font-weight:900;color:var(--o);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .estimator__range small{display:flex;justify-content:space-between;font-size:12px;color:var(--on-dark-2)} .estimator__group+.estimator__group{margin-top:22px} .estimator__group .estimator__label{display:block;margin-bottom:12px} /* piattaforma — esploratore club [data-club] (cerchi concentrici «dal milione al tuo pubblico») e audience builder [data-audience] Stanno dentro un .estimator: le opzioni riusano .chip-check ed .estimator__group. Attributi in ubx.js (blocco «piattaforma»). */ .pf-funnel{width:min(100%,330px);aspect-ratio:1;margin:4px auto 8px} .pf-funnel__r{display:flex;flex-direction:column;align-items:center;border-radius:50%;text-align:center;padding-top:7%;transition:background-color .3s} .pf-funnel>.pf-funnel__r{width:100%;height:100%;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22)} .pf-funnel__r .pf-funnel__r{width:78%;aspect-ratio:1;margin-top:auto} .pf-funnel__r span{display:block;max-width:80%;font-size:12px;font-weight:700;line-height:1.25;color:var(--on-dark)} .pf-funnel__r span b{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)} .pf-funnel .r2{background:rgba(255,122,0,.16)} .pf-funnel .r3{background:rgba(255,122,0,.34)} .pf-funnel .r4{background:var(--o);justify-content:center;padding-top:0} .pf-funnel .r4 span,.pf-funnel .r4 span b{color:var(--ink-2)} .pf-funnel .is-any{opacity:.55} .pf-sentence{font-size:16px;line-height:1.45;color:#fff;font-weight:600} .pf-sentence b{color:var(--o)} .pf-areas-on{display:flex;flex-wrap:wrap;gap:6px} .pf-areas-on a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.18);font-size:13px;font-weight:700;color:var(--on-dark-2);text-decoration:none;transition:all .2s} .pf-areas-on a.is-on{background:var(--o);border-color:var(--o);color:var(--ink-2)} .pf-areas-on a:hover{border-color:#fff;color:#fff} .pf-areas-on a.is-on:hover{color:var(--ink-2)} /* audience builder: elenco atenei delle città scelte */ .pf-aud-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;max-height:340px;overflow:auto;padding-right:4px} .pf-aud-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14px} .pf-aud-list li.is-off{display:none} .pf-aud-list li b{display:block;color:#fff;font-weight:700;line-height:1.3} .pf-aud-list li small{display:block;font-size:11.5px;color:var(--on-dark-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase} .pf-aud-list li span{font-variant-numeric:tabular-nums;font-weight:800;color:#fff;text-align:right;min-width:56px} .pf-aud-list li span i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)} .pf-aud-empty{margin-top:16px;font-size:14px;color:var(--on-dark-2)} .pf-aud-bar{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;background:rgba(255,255,255,.1)} .pf-aud-bar i{display:block;height:100%;transition:width .35s var(--ease)} .pf-aud-bar i:first-child{background:var(--o);width:var(--a,0%)} .pf-aud-bar i:last-child{background:var(--cream);width:var(--t,0%)} .pf-aud-legend{display:flex;gap:16px;font-size:12px;color:var(--on-dark-2)} .pf-aud-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--o);margin-right:6px;vertical-align:-1px} .pf-aud-legend span+span::before{background:var(--cream)} /* 22 · TABELLE: CONFRONTO, MATRICE, SCHEDA DATI ---------------------------- */ .compare{border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-1)} .compare table{font-size:15px} .compare th,.compare td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45} .compare thead th{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);background:var(--surface)} .compare thead th.is-us{background:var(--ink);color:#fff} .compare tbody th{font-weight:800;color:var(--ink);width:22%} .compare td.is-them{color:var(--text-2)} .compare td.is-us{background:var(--cream);color:var(--ink);font-weight:600} .compare td span{display:flex;gap:10px;align-items:flex-start} .compare td span::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:center/11px no-repeat} .compare td.is-them span::before{background-color:var(--line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D657B' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")} .compare td.is-us span::before{background-color:var(--o);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B2A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .compare tbody tr:last-child :is(th,td){border-bottom:0} .compare__toggle{display:none} @media (max-width:719px){ .compare__toggle{display:flex;gap:6px;padding:10px;background:var(--surface)} .compare__toggle button{flex:1;min-height:44px;border-radius:var(--r-pill);border:0;background:transparent;font-weight:800;font-size:14px;color:var(--ink)} .compare__toggle button[aria-pressed="true"]{background:var(--ink);color:#fff} .compare thead{display:none} .compare tr{display:block;padding:14px 18px;border-bottom:1px solid var(--line)} .compare th,.compare td{display:block;padding:4px 0;border:0;width:auto!important;background:none!important} .compare tbody th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)} .compare[data-show="us"] td.is-them,.compare[data-show="them"] td.is-us{display:none} } /* matrice fasi × leve */ .matrix{display:grid;gap:8px} .matrix__row{display:grid;gap:8px;grid-template-columns:1fr} @media (min-width:900px){.matrix__row{grid-template-columns:150px repeat(3,minmax(0,1fr))}} .matrix__hd{display:none} @media (min-width:900px){.matrix__hd{display:grid}.matrix__hd>div{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-align:center;padding:4px}.matrix__hd>.is-key{color:var(--o-ink)}} .matrix__lev{display:flex;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;font-weight:900;text-transform:uppercase;font-size:15px} .matrix__lev.is-o{background:var(--o);color:var(--ink-2)} .matrix__cell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.45} .matrix__cell::before{content:attr(data-ph);display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o-ink);margin-bottom:4px} @media (min-width:900px){.matrix__cell::before{display:none}.matrix__cell.is-key{background:var(--cream);border-color:var(--o-soft)}} /* quattro leve attorno a un hub */ .quads{position:relative;display:grid;gap:12px} @media (min-width:768px){.quads{grid-template-columns:1fr 1fr}} .quad{position:relative;min-height:260px;border-radius:var(--r-lg);overflow:hidden;color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px} .quad>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .quad::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,27,42,.15),rgba(20,27,42,.9))} .quad small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .quad b{font-size:30px;font-weight:900;text-transform:uppercase;line-height:1;margin-top:4px} .quad p{font-size:14.5px;color:var(--on-dark);margin-top:8px;max-width:36ch} .quad--orange{background:linear-gradient(135deg,#FF8A1F,#E05F00);padding-right:50%} .quad--orange::after{background:linear-gradient(180deg,rgba(20,27,42,0) 40%,rgba(20,27,42,.55))} .quad--orange>img{object-fit:contain;object-position:100% 100%;top:24px;height:calc(100% - 24px);left:auto;right:0;width:48%} .quads__hub{display:none} @media (min-width:768px){.quads>.quad:nth-child(-n+2){padding-bottom:84px}} @media (min-width:768px){.quads__hub{display:grid;place-items:center;text-align:center;position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 0 0 10px rgba(255,255,255,.25),var(--shadow-2);font-weight:800;font-size:13px;line-height:1.1;text-transform:uppercase;z-index:2}.quads__hub em{display:block;font-style:normal;font-size:44px;font-weight:900;color:var(--o-ink);line-height:.9}} /* flusso a chip con frecce */ .flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .flow span{background:rgba(255,255,255,.1);color:#fff;border-radius:var(--r-pill);padding:8px 16px;font-weight:700;font-size:14px} .flow i{font-style:normal;color:var(--o);font-weight:900} /* scheda dati case (Cliente / Settore / Target / Soluzione…) */ .factsheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)} @media (min-width:900px){.factsheet{grid-template-columns:repeat(4,minmax(0,1fr))}} .factsheet>div{background:#fff;padding:18px 20px} .factsheet dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .factsheet dd{margin:6px 0 0;font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.35} /* KPI grandi nel case */ .kpi-band{display:grid;gap:12px} @media (min-width:768px){.kpi-band{grid-template-columns:repeat(3,minmax(0,1fr))}} .kpi-big{border-radius:var(--r-lg);padding:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)} .kpi-big small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .kpi-big b{display:block;font-size:clamp(40px,5vw,64px);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1;margin-top:12px} .kpi-big span{display:block;font-size:14.5px;color:var(--on-dark);margin-top:10px;line-height:1.45} .kpi-big.is-empty b{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;color:var(--on-dark)} /* career/education · .rail (badge linea A/B) · .vs-table (confronto a più colonne con ✓/✗) · .rate (tabella tariffe) · .app-mock (schermata app di esempio) */ .rail{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);width:fit-content} .rail b{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--o);color:var(--ink-2);font-size:16px;font-weight:900;letter-spacing:0} .rail--b b{background:var(--ink);color:#fff} .sec--dark .rail,.sec--ink .rail{color:#fff} .sec--dark .rail--b b,.sec--ink .rail--b b{background:#fff;color:var(--ink)} .vs-table{border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-1)} .vs-table table{font-size:15px;width:100%} .vs-table td:not(.is-us) .yes{background-color:var(--o-soft)} .vs-table th,.vs-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle} .vs-table thead th{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);background:var(--surface)} .vs-table thead th:first-child{text-align:left} .vs-table thead th.is-us{background:var(--ink);color:#fff} .vs-table tbody th{text-align:left;font-weight:700;color:var(--ink);line-height:1.35;width:40%} .vs-table tbody th small{display:block;font-weight:500;font-size:13px;color:var(--text-2);margin-top:2px} .vs-table td.is-us{background:var(--cream)} .vs-table tbody tr:last-child :is(th,td){border-bottom:0} .vs-table .yes,.vs-table .no{display:inline-block;width:26px;height:26px;border-radius:50%;background:center/13px no-repeat;vertical-align:middle} .vs-table .yes{background-color:var(--o);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B2A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .vs-table .no{background-color:var(--line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D657B' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")} @media (max-width:640px){.vs-table table{font-size:13.5px}.vs-table th,.vs-table td{padding:12px 6px}.vs-table tbody th{padding-left:14px}.vs-table thead th{font-size:9.5px;letter-spacing:.03em}.vs-table thead th:first-child{padding-left:14px}.vs-table .yes,.vs-table .no{width:22px;height:22px;background-size:11px}} .rate{width:100%;font-size:15px;margin-top:6px} .rate td{padding:12px 0;border-bottom:1px solid var(--line)} .rate td:last-child{text-align:right;font-weight:900;color:var(--ink);white-space:nowrap} .rate tr:last-child td{border-bottom:0} .app-wrap{position:relative;max-width:380px;margin-inline:auto;width:100%} .app-wrap .sticker{position:absolute;right:-18px;top:-34px;width:108px;height:108px;font-size:12.5px;z-index:2} @media (max-width:640px){.app-wrap .sticker{right:-4px;top:-40px;width:92px;height:92px;font-size:11px}} .app-mock{background:#fff;color:var(--text);border-radius:40px;padding:26px 22px 22px;border:9px solid #0B111C;box-shadow:0 30px 70px rgba(0,0,0,.45)} .app-mock__hd small{display:block;font-size:12px;font-weight:600;color:var(--text-2)} .app-mock__hd b{display:block;font-size:21px;font-weight:900;text-transform:uppercase;line-height:1.08;color:var(--ink);margin-top:2px} .app-mock__q{margin-top:18px} .app-mock__q>b{display:block;font-size:14px;font-weight:700;color:var(--ink)} .app-mock__opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .app-mock__opts span{border:1.5px solid var(--line-2);border-radius:var(--r-pill);padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink)} .app-mock__opts .is-sel{background:var(--o);border-color:var(--o);color:var(--ink-2)} .app-mock__inp{margin-top:8px;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--text-2)} .app-mock__cons{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);background:var(--cream);border-radius:12px;padding:10px 12px} .app-mock__cons i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--o);color:var(--ink-2);font-style:normal;font-weight:900;font-size:12px} .app-mock__cta{margin-top:16px;background:var(--ink);color:#fff;text-align:center;border-radius:var(--r-pill);padding:12px;font-weight:800;font-size:14px} /* career/education · elenco con spunta dentro le card (.sol-card, .info-card, .media-card) */ .tick-list{display:grid;gap:8px;font-size:14.5px;line-height:1.45;margin:2px 0 4px} .tick-list li{display:flex;gap:10px;align-items:flex-start} .tick-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B34A00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat} .tick-list b{color:var(--ink)} /* piattaforma — formati a righe (.pf-rates: formato · descrizione; dal 13/10/2026 senza prezzi) e giorno sul report fotografico (.pf-day) */ .pf-rates{background:#fff;border-radius:var(--r-lg);border:1.5px solid var(--line);overflow:hidden;display:flex;flex-direction:column} .pf-rates__head{padding:20px 22px 14px;border-bottom:1px solid var(--line)} .pf-rates__head small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .pf-rates__head b{display:block;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--ink);line-height:1.1;margin-top:4px} .pf-rates__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 22px;border-bottom:1px solid var(--line)} .pf-rates__row:last-of-type{border-bottom:0} .pf-rates__row b{font-size:15.5px;font-weight:800;color:var(--ink)} .pf-rates__row span{display:block;font-size:13px;color:var(--text-2);line-height:1.4} .pf-rates__row strong{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--ink);white-space:nowrap} .pf-rates__row strong small{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:0;margin-left:3px} .pf-rates__row.is-key{background:var(--cream)} .pf-rates__foot{margin-top:auto;padding:16px 22px 20px} .pf-day{position:absolute;left:12px;top:12px;z-index:1;background:#fff;color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 11px} /* 22c · CTA BAND E LINK INCROCIATI (.cta-band .cross) -------------------- */ .cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--ink-2);color:#fff;isolation:isolate;padding:clamp(36px,6vw,96px) clamp(24px,5vw,80px)} .cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(20,27,42,.96) 30%,rgba(20,27,42,.35))} .cta-band .h1,.cta-band .h2{color:#fff;max-width:16ch} .cta-band .lead{color:var(--on-dark);margin-top:18px} .cta-band .btn-row{margin-top:30px} .cross{display:grid;gap:12px} @media (min-width:768px){.cross{grid-template-columns:repeat(3,minmax(0,1fr))}} .cross a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:800;transition:border-color .2s,transform .2s var(--ease)} .cross a:hover{border-color:var(--o);transform:translateY(-3px)} .cross a>span{display:block;font-size:16px;font-weight:800;color:var(--ink)} .cross a>span>span{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-top:2px} .cross a svg{width:20px;height:20px;flex:none;color:var(--o-ink)} /* 22d · DATO DEL MESE (.datum .bars) ------------------------------------- */ .datum{display:grid;gap:clamp(20px,3vw,40px);align-items:center} @media (min-width:960px){.datum{grid-template-columns:1fr 1.1fr}} .datum__card{background:var(--ink-2);color:#fff;border-radius:var(--r-xl);padding:clamp(26px,3.5vw,48px);position:relative;overflow:hidden} .datum__v{font-size:clamp(84px,12vw,168px);font-weight:900;letter-spacing:-.06em;line-height:.85;color:var(--o)} .datum__q{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.3;margin-top:16px;max-width:24ch} .datum__src{font-size:12.5px;color:var(--on-dark-2);margin-top:18px;line-height:1.5} .bars{display:grid;gap:10px;margin-top:22px} .bars div{display:grid;grid-template-columns:110px 1fr 46px;gap:10px;align-items:center;font-size:13px;font-weight:600} .bars i{display:block;height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);position:relative;overflow:hidden} .bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--o);border-radius:inherit} /* 22e · research/marketplace — mockup «Esempio, dati non reali» (dashboard, test, chart) ------------- .mock (+ --flat) .mock__head .mock__title .mock__badge .mock__note · .hbars (barre su chiaro, .is-top) .ab .ab__v (+ .is-win) .pred · .dkpis .dkpi (em.up / em.down) · .legend · .vs .vs__side (+ --o) .vs__mid · .pairs .prod-card (prodotto numerato, + --hot) · .obs-card (osservatorio con logo) · .theme-list */ .mock{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:var(--shadow-2);min-width:0} .mock--flat{box-shadow:none;border:1px solid var(--line)} .mock__head{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:16px} .mock__title{font-weight:800;color:var(--ink);font-size:16px;line-height:1.3} .mock__title small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)} .mock__badge{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o-ink);background:var(--cream);border:1px solid var(--o-soft);border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap} .mock__note{font-size:12.5px;line-height:1.5;color:var(--text-2);margin-top:14px} .mock svg{width:100%;height:auto} .mock .tabs__tab{min-height:38px;padding:0 14px;font-size:13.5px} .mock .tabs__panel{margin-top:16px} .hbars{display:grid;gap:10px} .hbars>div{display:grid;grid-template-columns:minmax(92px,150px) 1fr 44px;gap:12px;align-items:center;font-size:14px;font-weight:600;color:var(--text)} .hbars i{display:block;height:14px;border-radius:var(--r-pill);background:var(--surface);position:relative;overflow:hidden} .hbars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--o-soft);border-radius:inherit} .hbars .is-top i::after{background:var(--o)} .hbars b{text-align:right;color:var(--ink);font-weight:800} .ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .ab__v{background:var(--surface);border:2px solid transparent;border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35} .ab__v small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px} .ab__v.is-win{border-color:var(--o);background:var(--cream)} .pred{margin-top:16px;background:var(--o);color:var(--ink-2);border-radius:14px;padding:12px 16px;font-weight:700;font-size:14.5px;line-height:1.4} .dkpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px} .dkpi{background:var(--surface);border-radius:14px;padding:12px 14px;min-width:0} .dkpi small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);line-height:1.3} .dkpi b{display:block;font-weight:900;font-size:clamp(20px,2.6vw,28px);color:var(--ink);line-height:1.15;margin-top:4px;letter-spacing:-.02em} .dkpi em{display:block;font-style:normal;font-size:12px;font-weight:700;line-height:1.3} .dkpi em.up{color:#0B7A3B}.dkpi em.down{color:#B03020} .legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;font-weight:600;color:var(--text-2);margin-top:6px} .legend i{display:inline-block;width:22px;height:4px;border-radius:4px;margin-right:6px;vertical-align:middle} .vs{display:grid;gap:14px;align-items:stretch} @media (min-width:900px){.vs{grid-template-columns:1fr 170px 1fr}} .vs__side{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);background:var(--ink);color:var(--on-dark)} .vs__side small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB066} .vs__side b{display:block;font-size:clamp(24px,2.8vw,34px);font-weight:900;text-transform:uppercase;line-height:1.02;color:#fff;margin-top:8px;letter-spacing:-.01em} .vs__side p{margin-top:10px;font-size:15px} .vs__side--o{background:var(--o);color:var(--ink-2)} .vs__side--o small,.vs__side--o b{color:var(--ink-2)} .vs__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;font-weight:800;color:var(--ink);font-size:14px;line-height:1.3;padding:8px} .vs__mid span{font-size:40px;color:var(--o-ink);line-height:1} .pairs{display:grid;gap:14px} .pairs>div{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:6px 16px;align-items:center} .pairs p{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3} .pairs i{display:block;height:12px;border-radius:var(--r-pill);width:var(--w);background:#9DB2CE} .pairs i+i{margin-top:5px;background:var(--o)} @media (max-width:480px){.pairs>div{grid-template-columns:1fr}} .prod-card{display:flex;flex-direction:column;gap:10px;border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);background:#fff;border:1px solid var(--o-soft);text-decoration:none;color:var(--text);transition:transform .25s var(--ease),box-shadow .25s} .prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)} .prod-card__n{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--o-ink)} .prod-card small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)} .prod-card p{font-size:15.5px;line-height:1.55} .prod-card__go{margin-top:auto;padding-top:8px;font-weight:800;font-size:14px;color:var(--o-ink)} .prod-card--hot{background:var(--ink);border-color:transparent;color:var(--on-dark)} .prod-card--hot .prod-card__n,.prod-card--hot .prod-card__go{color:var(--o)} .prod-card--hot .h3{color:#fff} .prod-card--hot small{color:var(--on-dark-2)} .obs-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)} .obs-card .card-img{aspect-ratio:16/10} .obs-card__logo{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-1)} .obs-card .obs-card__logo img{position:static;inset:auto;height:38px;width:auto;max-width:120px;object-fit:contain;transform:none} .obs-card .obs-card__logo img.is-white{filter:brightness(0);height:22px} .obs-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1} .obs-card__body p{font-size:15px;line-height:1.55} .obs-card__res{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)} .obs-card__res b{color:var(--ink)} .theme-list{display:grid;gap:8px;list-style:none;padding:0;margin:0} @media (min-width:560px){.theme-list{grid-template-columns:1fr 1fr}} .theme-list li{background:#fff;border-radius:12px;padding:10px 14px;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.35} .info-card--dark .theme-list li{background:rgba(255,255,255,.08);color:#fff} /* education funnel — soluzioni/education.html #dopo-il-contatto (05/10/2026): chat WhatsApp di qualificazione e dashboard «lead qualificati», mockup «Esempio» .edu-wa .edu-wa__hd .edu-wa__bd .edu-wa__m (+ --out, em = contatore domande) · .edu-leads (tabella dentro .mock) .edu-st (+ --ok --cm) · .edu-soon (pill «in attivazione») */ .edu-wa{position:relative;background:#ECE5DD;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);min-width:0} .edu-wa__hd{display:flex;align-items:center;gap:12px;background:#1F6F5C;color:#fff;padding:12px 18px} .edu-wa__hd img{width:36px;height:36px;border-radius:50%;background:#fff;padding:3px;flex:none} .edu-wa__hd b{display:block;font-size:15px;font-weight:800;line-height:1.25} .edu-wa__hd span{display:block;font-size:12px;font-weight:600;opacity:.85} .edu-wa__hd .mock__badge{margin-left:auto} .edu-wa__bd{display:flex;flex-direction:column;gap:8px;padding:16px} .edu-wa__m{max-width:84%;align-self:flex-start;background:#fff;border-radius:4px 14px 14px 14px;padding:8px 12px;font-size:14px;line-height:1.45;color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.08)} .edu-wa__m--out{align-self:flex-end;background:#D9FDD3;border-radius:14px 4px 14px 14px;font-weight:700} .edu-wa__m em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--o-ink);margin-top:2px} .edu-leads{width:100%;border-collapse:collapse;font-size:14px} .edu-leads th{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)} .edu-leads td{padding:10px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600} .edu-leads td:first-child{font-weight:800} @media (max-width:560px){.edu-leads th:nth-child(3),.edu-leads td:nth-child(3){display:none}} .edu-st{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:12px;font-weight:800;white-space:nowrap} .edu-st--ok{background:#C8EBE3;color:#135B23} .edu-st--cm{background:var(--cream);color:var(--o-ink)} .edu-soon{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);border:1.5px dashed var(--line-2);border-radius:var(--r-pill);padding:3px 9px} .sf-step.is-key .edu-soon{color:var(--ink-2);border-color:var(--ink-2)} /* 22f · research/marketplace — bivio, flussi a passi, tabella listino, campi del calcolatore --------- .fork .fork__root .fork__lines .fork__paths .fork__path (+ --o) .fork__goal · .sflow .sf-step (+ .is-key) (+ .sflow--dark) .ptable (listino a righe) · .calc-field (range con output) · .estimator__legend */ .fork{display:grid;justify-items:center;gap:0} .fork__root{background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:12px 26px;font-weight:800;font-size:15px;text-align:center} .fork__root small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFB066} .fork__lines{display:none;width:52%;height:60px} @media (min-width:900px){.fork__lines{display:block}} .fork__paths{display:grid;gap:14px;width:100%;margin-top:16px} @media (min-width:900px){.fork__paths{grid-template-columns:1fr 1fr;gap:22px;margin-top:0}} .fork__path{border-radius:var(--r-lg);padding:clamp(22px,2.8vw,36px);background:#fff;border:1.5px solid var(--line);display:flex;flex-direction:column;gap:12px} .fork__path small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .fork__path h3{font-size:clamp(22px,2.4vw,30px);font-weight:900;text-transform:uppercase;line-height:1.05;color:var(--ink);letter-spacing:-.01em} .fork__path ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px} .fork__path li{display:flex;gap:10px;line-height:1.45} .fork__path li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--o);margin-top:8px} .fork__path .btn{align-self:flex-start;margin-top:auto} .fork__path--o{background:var(--o);border-color:transparent;color:var(--ink-2)} .fork__path--o small,.fork__path--o h3{color:var(--ink-2)} .fork__path--o li::before{background:var(--ink-2)} .fork__goal{margin-top:18px;width:100%;text-align:center;background:var(--ink-2);color:#fff;border-radius:var(--r-lg);padding:18px 22px;font-weight:800;font-size:clamp(17px,1.6vw,20px)} .fork__goal span{color:var(--o)} .sflow{display:grid;gap:12px;counter-reset:sf} @media (min-width:900px){.sflow{grid-template-columns:repeat(var(--steps,4),minmax(0,1fr))}} .sf-step{position:relative;border-radius:var(--r);padding:20px;background:#fff;border:1px solid var(--line)} .sf-step small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink)} .sf-step b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.25;margin-top:6px} .sf-step p{font-size:14px;line-height:1.5;margin-top:6px} .sf-step.is-key{background:var(--o);border-color:transparent;color:var(--ink-2)} .sf-step.is-key small,.sf-step.is-key b{color:var(--ink-2)} @media (min-width:900px){.sf-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:2px;background:var(--o)}} .sflow--grid .sf-step::after{display:none!important} .sflow--dark .sf-step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--on-dark)} .sflow--dark .sf-step small{color:#FFB066} .sflow--dark .sf-step b{color:#fff} .sflow--dark .sf-step.is-key{background:var(--o);color:var(--ink-2)} .sflow--dark .sf-step.is-key small,.sflow--dark .sf-step.is-key b{color:var(--ink-2)} .ptable{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff} .ptable table{font-size:15px} .ptable th,.ptable td{padding:14px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45} .ptable thead th{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);background:var(--surface)} .ptable tbody th{font-weight:800;color:var(--ink);width:26%} .ptable td:last-child{font-weight:800;color:var(--ink);white-space:nowrap} .ptable tbody tr:last-child :is(th,td){border-bottom:0} @media (max-width:719px){.ptable thead{display:none}.ptable tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}.ptable th,.ptable td{display:block;padding:2px 0;border:0;width:auto!important}.ptable td:last-child{white-space:normal;color:var(--o-ink)}} .calc-field{display:grid;gap:6px;margin-top:20px} .calc-field:first-child{margin-top:0} .calc-field label,.calc-field>span{display:flex;justify-content:space-between;gap:12px;font-weight:700;color:#fff;font-size:15px} .calc-field output,.calc-field label b{color:var(--o);font-weight:900;font-variant-numeric:tabular-nums} .estimator__legend{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin:22px 0 10px} /* ambassador/content: flusso a chip su fondo chiaro (.flow--light) */ .flow--light span{background:#fff;color:var(--ink);border:1px solid var(--line)} .flow--light span:last-child{background:var(--ink);color:#fff;border-color:var(--ink)} .flow--light i{color:var(--o-ink)} /* 23 · FOOTER -------------------------------------------------------------- */ .site-footer{background:var(--ink-2);color:var(--on-dark-2);font-size:14.5px;padding-top:clamp(56px,7vw,96px)} .site-footer a{text-decoration:none} .site-footer a:not(.btn){color:var(--on-dark)} .site-footer a:not(.btn):hover{color:#fff;text-decoration:underline} .footer__top{display:grid;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)} @media (min-width:900px){.footer__top{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:32px}} .footer__brand .logo{color:#fff} .footer__brand .logo b{color:#FFB066} .footer__claim{font-size:22px;font-weight:900;text-transform:uppercase;color:#fff;line-height:1.05;margin-top:20px;letter-spacing:-.01em} .footer__claim .hl{font-size:inherit} .footer__contact{margin-top:20px;display:grid;gap:4px;line-height:1.55} .footer__col h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px} .footer__col ul{display:grid;gap:9px;list-style:none;padding:0;margin:0} .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px 32px;font-size:12.5px} .footer__social{display:flex;gap:10px} .footer__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2)} .footer__social svg{width:18px;height:18px} .footer__cta{display:grid;gap:18px;align-items:center;padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)} @media (min-width:900px){.footer__cta{grid-template-columns:1fr auto}} .footer__cta b{font-size:clamp(26px,3.4vw,44px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1;letter-spacing:-.02em} .noscript-nav{padding:12px var(--gutter);background:var(--surface);font-size:14px} .noscript-nav a{margin-right:14px;font-weight:700;color:var(--ink)} /* 24 · REVEAL -------------------------------------------------------------- */ .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0s)} .js [data-reveal].is-in{opacity:1;transform:none} .js [data-reveal="fade"]{transform:none} .js [data-reveal="scale"]{transform:scale(.96)} /* 25 · MOTION RIDOTTO ------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .js [data-reveal]{opacity:1;transform:none} .marquee{-webkit-mask-image:none;mask-image:none} .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:24px} .marquee__track [aria-hidden="true"]{display:none} } .qa [data-reveal]{transition:none!important} /* 26 · CASE · pagine case/.html (aggiunto 05/10/2026) ---------------- a.pill tag dei canali cliccabili verso soluzioni/ e piattaforma/ .case-quote citazione/insight del case (testo grande con filetto arancio) .ph--contain foto verticale o screenshot app: intera, su fondo crema .media-card--case card evento più alta, con velatura più forte sotto il testo */ a.pill{text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)} a.pill--cream:hover,a.pill--cream:focus-visible{background:var(--o);color:var(--ink-2)} a.pill--cream::after{content:"→";font-weight:800;margin-left:2px} .case-quote{border-left:4px solid var(--o);padding:4px 0 4px clamp(18px,2.4vw,28px);font-size:clamp(19px,1.8vw,24px);font-weight:600;line-height:1.4;color:var(--ink);max-width:46ch} .case-quote small{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--text-2)} .ph--contain{background:var(--cream)} .ph--contain img{object-fit:contain;padding:10px} .ph--contain:hover img{transform:none} .media-card--case{min-height:clamp(400px,36vw,480px)} .media-card--case::after{background:linear-gradient(180deg,rgba(20,27,42,0) 18%,rgba(20,27,42,.55) 48%,rgba(20,27,42,.96) 100%)}