con un max-width inline si dimensiona sul contenuto invece che sullo spazio disponibile, sforando lo schermo invece di andare a capo. */ /* niente "width: 100%" qui: quello forzava anche i
corti (es. il
kicker "DEVELOPED WITH" di Roman) a riempire tutta la larghezza,
rompendo il centraggio di align-items:center sul contenuto naturale. */
.sc-host div[style*="align-items: center"] > p { max-width: 100% !important; }
/* ---- niente scroll orizzontale: caroselli in colonna ---- */
.hb-scroller,
.sc-host div[style*="overflow-x: auto"],
.sc-host div[style*="grid-auto-flow: column"] {
display: flex !important; flex-direction: column !important;
overflow-x: visible !important; overflow: visible !important;
scroll-snap-type: none !important;
align-items: stretch !important; justify-content: flex-start !important;
gap: 14px !important;
}
/* ==== ROMAN — aggiustamenti di sezione ==== */
/* CHALLENGE: titoli 01/02/03 + tutto centrato */
#challenge h3 { font-size: 16px !important; font-weight: 700 !important; }
#challenge, #challenge > div { text-align: center !important; }
#challenge h2, #challenge p { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
#challenge > div > div > .hb-reveal { align-items: center !important; gap: 20px !important; }
#challenge > div > div > .hb-reveal > p { margin-top: -10px !important; }
#challenge > div > div[style*="grid-template-columns: repeat(3, 1fr)"] { gap: 40px !important; }
#challenge > div > div > .hb-reveal > div[style*="align-items: baseline"] { justify-content: center !important; }
/* THE SYSTEM: tutto centrato */
#system, #system > div { text-align: center !important; }
#system h2, #system p { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
#system > div > div > .hb-reveal { align-items: center !important; }
#system div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
/* KEY FEATURES: foto da sola sopra, ancorata in alto e a destra */
#features { display: flex !important; flex-direction: column !important; padding-top: 0 !important; }
.sc-host > section#features > div[style*="position: absolute"]:has(> img) {
position: static !important; order: -1 !important; height: auto !important;
margin: 0 -24px 26px -24px !important; width: calc(100% + 48px) !important; flex: none !important;
}
.sc-host > section#features > div[style*="position: absolute"] > img {
width: 100% !important; height: 180px !important; margin-left: 0 !important;
transform: scaleX(-1) !important; object-fit: cover !important;
object-position: center 60% !important;
}
#features > div[style*="position: absolute"] > div { display: none !important; }
/* KEY FEATURES: righe elenco a piena larghezza */
#features span[style*="width: 257px"] { width: 100% !important; height: auto !important; }
/* MAIN COMPONENTS: righe larghe quanto la voce più lunga */
#datasheet div[style*="grid-template-columns: repeat(2, 1fr)"] {
grid-template-columns: max-content !important; justify-content: start !important;
}
/* SPECIFICATIONS: foto sotto al testo, nota tecnica nascosta */
#datasheet { position: relative !important; background: #fff !important; padding-bottom: 36px !important; }
#datasheet > div {
position: static !important;
grid-template-columns: minmax(0, 1fr) !important;
}
#datasheet > div > .hb-reveal:not(:has(> img)) { position: relative !important; z-index: 1 !important; }
#datasheet > div > .hb-reveal:has(> img) {
position: absolute !important; right: 0 !important; bottom: 0 !important;
width: 81% !important; min-height: 0 !important; z-index: 0 !important;
pointer-events: none !important; opacity: .9 !important;
}
.sc-host > section#datasheet > div > .hb-reveal:has(> img) {
height: auto !important; align-items: flex-end !important;
}
.sc-host > section#datasheet > div > .hb-reveal > img {
width: 100% !important; height: auto !important; object-fit: contain !important;
display: block !important;
}
#datasheet p[style*="max-width: 420px"] { display: none !important; }
/* SPECIFICATIONS: etichetta sopra, valore sotto (il valore a destra finiva
illeggibile/coperto in riga affiancata su schermi stretti) */
#datasheet div[style*="justify-content: space-between"] {
flex-direction: column !important; align-items: flex-start !important; gap: 4px !important;
}
#datasheet div[style*="justify-content: space-between"] span[style*="font-size: 26px"] {
font-size: 22px !important;
}
/* END-EFFECTOR (TIGER): foto da sola sopra, card 2×2 */
#tiger { display: flex !important; flex-direction: column !important; }
.sc-host > section#tiger > div[style*="position: absolute"]:has(> img) {
position: static !important; order: 1 !important; height: auto !important;
margin: 26px -24px -56px -24px !important; width: calc(100% + 48px) !important; flex: none !important;
}
.sc-host > section#tiger > div[style*="position: absolute"] > img {
position: static !important; width: 100% !important; height: 220px !important;
object-fit: cover !important; object-position: center !important;
}
#tiger > div[style*="position: absolute"] > div { display: none !important; }
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] > * > p { text-wrap: balance !important; hyphens: none !important; }
#tiger > div[style*="position: relative"] { text-align: center !important; }
#tiger p:has(strong) { font-weight: 700 !important; }
#tiger > div > .hb-reveal > p:last-child { font-size: 13px !important; }
#tiger h2, #tiger p { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
#tiger > div > .hb-reveal:first-child { max-width: 100% !important; }
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] > * { text-align: left !important; }
/* DEVELOPED WITH: loghi su una sola colonna
(":has(> img)"/"div > img" richiedono che l'img sia figlio diretto del
div, ma alcuni loghi sono ora avvolti in un per il link cliccabile —
serve anche la variante "> a > img" o questi loghi restano non stilati
e tornano alla dimensione grande di default) */
.sc-host div:has(> img[src*="assets/logos/"]),
.sc-host div:has(> a > img[src*="assets/logos/"]) {
flex-direction: row !important; flex-wrap: nowrap !important;
align-items: center !important; justify-content: center !important; gap: 20px !important;
}
/* DEVELOPED WITH: loghi più piccoli */
.sc-host div > img[src*="assets/logos/"],
.sc-host div > a > img[src*="assets/logos/"] { height: 18px !important; width: auto !important; max-width: none !important; }
/* SOFTWARE · CONTROL ROOM: tutto centrato */
.sc-host > section:has(> div > div > a[href*="/control-room"]) > div,
.sc-host > section:has(a[href*="/control-room"]) > div {
text-align: center !important; justify-items: center !important;
}
.sc-host > section:has(a[href*="/control-room"]) h2,
.sc-host > section:has(a[href*="/control-room"]) p {
max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;
}
/* ---- foto sempre sopra il testo ---- */
.sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]):has(> * > img) { flex-direction: column !important; }
.sc-host section > div[style*="grid-template-columns"] > *:has(> img),
.sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]) > *:has(> img),
.sc-host section > div[style*="grid-template-columns"] > img,
.sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]) > img { order: -1 !important; }
/* ---- immagini: mai oltre la colonna ---- */
.sc-host img { max-width: 100% !important; }
.sc-host div:not([style*="height"]) > img[style*="width:"]:not([src*="assets/logos/"]),
.sc-host .hb-reveal > img { width: 100% !important; height: auto !important; object-fit: contain !important; }
.sc-host > section:not(#hero) > div:has(> img) > img,
.sc-host div[style*="height: 240px"] > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* footer: descrizione sotto il logo */
.sc-host > footer > div > div:first-child p { font-size: 12px !important; }
/* descrizione footer: più vicina al logo (mobile) */
.sc-host > footer > div > div:first-child a > img { margin-bottom: 8px !important; }
.sc-host > footer > div { grid-template-columns: minmax(0, 1fr) max-content !important; }
.sc-host > footer > div:not(.hb-footer-bottom) > div:nth-child(2n) {
justify-self: start !important; text-align: left !important; margin-left: 42px !important;
}
/* Home: partner & clienti */
#partners { padding-top: 32px !important; }
#partners > div > .hb-label { font-size: 13px !important; margin-bottom: 24px !important; }
/* Home: sezione "How Companies…" allineata a sinistra */
#projhead, #projhead h2, #projhead + div, #projhead + div * { text-align: left !important; }
#projhead { position: static !important; }
#projects, #projects * { text-align: left !important; }
/* mobile: sempre foto sopra e testo sotto, indipendentemente dal "flip"
desktop (Control Room), e stesso margine sinistro per tutte le card */
#projects .proj-photo-col { order: 1 !important; }
#projects .proj-text-col { order: 2 !important; padding: clamp(24px, 6vw, 36px) !important; }
/* linee "solutions": da mobile arrivano fino al bordo destro della sezione,
cosicché lo spazio dal punto finale al bordo dx sia identico a quello
dal punto iniziale al bordo sx (il padding di .proj-text-col è simmetrico) */
#projects .proj-spec-line { width: 100% !important; margin-left: 0 !important; }
#projects .proj-spec-item { justify-content: flex-start !important; padding: 7px 0 !important; }
/* .proj-spec-box is the desktop-only box that sizes the Control Room
tile's solutions block to its subtitle and pins it right. On mobile that
tile is un-flipped like the other two, so the box has to give up both its
fit-content width and its right alignment — otherwise the whole block
stays subtitle-width and hugs the right edge while tiles 01 and 03 run
full width from the left. */
#projects .proj-spec-box { width: 100% !important; align-self: stretch !important; }
#projects article p, #projects article h3, #projects article > div > div > span,
#projects article > div > div > div > span {
margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important;
text-indent: 0 !important; align-self: flex-start !important;
}
#projects article span > span { align-self: center !important; }
/* via la descrizione sopra il bottone */
#projects article > div > div > p { display: none !important; }
/* sottotitolo sotto il titolo: grigio, su un rigo solo se ci sta */
#projects article h3 {
color: var(--hb-gray-500) !important; white-space: normal !important;
overflow: visible !important; text-overflow: clip !important; font-weight: 400 !important;
font-size: 13px !important;
}
#projects article a {
margin-left: 0 !important; text-indent: 0 !important; align-self: flex-start !important;
padding-left: 20px !important; padding-right: 20px !important;
}
#projects article p { white-space: normal !important; }
#projects article a { white-space: nowrap !important; gap: 8px !important; }
#projhead h2 { margin-left: 0 !important; margin-right: 0 !important; }
/* Home: sezione Spin-off centrata, kicker/titolo/loghi impilati
(il grid usa 1fr/1.4fr, non intercettato dal collapse generico 1fr/1fr) */
#spinoff div[style*="grid-template-columns:1fr 1.4fr"],
#spinoff div[style*="grid-template-columns: 1fr 1.4fr"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
#spinoff, #spinoff > div > div > div { text-align: center !important; }
#spinoff div:has(> img[src*="uploads/"]) {
justify-content: center !important;
margin-top: 0 !important;
}
/* Home: nota di finanziamento */
.hb-funding-note { font-size: 12px !important; text-align: center !important; }
/* Home: CTA finale "See how Herobots" — a colonna singola su mobile
(il grid usa 1.15fr/1fr, non intercettato dal collapse generico 1fr/1fr) */
#contact div[style*="grid-template-columns:1.15fr 1fr"],
#contact div[style*="grid-template-columns: 1.15fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 28px !important;
text-align: center !important;
}
#contact h2, #contact p { margin-left: auto !important; margin-right: auto !important; }
/* ---- intestazioni colonne footer in bianco ---- */
.sc-host > footer .hb-label { color: #fff !important; }
/* ---- niente parole orfane a fine paragrafo ---- */
.sc-host h1, .sc-host h2, .sc-host h3, .sc-host h4 { text-wrap: balance !important; }
.sc-host p, .sc-host li, .sc-host span, .sc-host a { text-wrap: pretty !important; }
/* ---- nessun testo oltre 20px (solo h1 a 50) ---- */
.sc-host h2 { font-size: 20px !important; line-height: 1.2 !important; }
.sc-host h3, .sc-host h4, .sc-host h5, .sc-host h6 { font-size: 16px !important; line-height: 1.3 !important; }
.sc-host .hb-stat__value, .sc-host .hb-stat__value span { font-size: 23px !important; line-height: 1.3 !important; }
.sc-host div[style*="font-size: clamp(2"], .sc-host div[style*="font-size: clamp(3"],
.sc-host div[style*="font-size: clamp(4"], .sc-host div[style*="font-size: clamp(5"],
.sc-host span[style*="font-size: clamp(2"], .sc-host span[style*="font-size: clamp(3"],
.sc-host span[style*="font-size: clamp(4"], .sc-host span[style*="font-size: clamp(5"],
.sc-host p[style*="font-size: clamp(2"], .sc-host p[style*="font-size: clamp(3"],
.sc-host span[style*="font-size: 2"], .sc-host span[style*="font-size: 3"],
.sc-host span[style*="font-size: 4"], .sc-host span[style*="font-size: 5"],
.sc-host div[style*="font-size: 2"], .sc-host div[style*="font-size: 3"],
.sc-host div[style*="font-size: 4"], .sc-host div[style*="font-size: 5"] {
font-size: 20px !important; line-height: 1.25 !important;
}
/* ---- scala tipografica mobile ---- */
.sc-host h1 { font-size: 50px !important; line-height: 1 !important; }
.sc-host p, .sc-host li { font-size: 15px !important; line-height: 1.6 !important; }
.sc-host p[style*="text-transform: uppercase"] { font-size: 13px !important; }
.hb-prodnav + section p[style*="text-transform: uppercase"]:first-child,
.sc-host > section:first-of-type p[style*="text-transform: uppercase"] { font-size: 11px !important; }
.sc-host p[style*="clamp(20px"] { font-size: 20px !important; line-height: 1.32 !important; }
.sc-host span[style*="tabular-nums"] { font-size: 15px !important; font-weight: 700 !important; }
/* caroselli impilati: annulla dim/scale del carosello JS */
.hb-scroller > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.hb-scroller > *,
.sc-host div[style*="overflow-x: auto"] > *,
.sc-host div[style*="grid-auto-flow: column"] > * {
width: 100% !important; max-width: 100% !important;
min-width: 0 !important; flex: none !important;
scroll-snap-align: none !important;
}
/* ---- griglie 1fr 1fr: colonna singola, figli comprimibili ---- */
.sc-host section > div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: minmax(0, 1fr) !important;
}
.sc-host section > div[style*="grid-template-columns"] > * { min-width: 0 !important; }
/* ---- coppia di CTA hero su un solo rigo, pillole di pari larghezza ---- */
.sc-host div:has(> .hb-btn--lg + .hb-btn--lg) {
display: flex !important; flex-wrap: nowrap !important; gap: 10px !important;
}
.sc-host div:has(> .hb-btn--lg + .hb-btn--lg) > .hb-btn--lg {
flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
padding: 0 12px !important; height: 46px !important; font-size: 13px !important;
white-space: nowrap !important; justify-content: center !important; text-align: center !important;
}
/* ---- hairline sotto l'header ---- */
.sc-host > header { border-bottom: 1px solid rgba(255,255,255,.14) !important; }
/* ---- sub-nav di sezione (Challenge, System, …): via da mobile ---- */
.hb-prodnav { display: none !important; }
/* con la sub-nav nascosta serve spazio sotto l'header fisso */
.hb-prodnav + section { padding-top: 148px !important; }
.sc-host > section:first-of-type { padding-top: 148px !important; }
/* ---- nav: desktop rail + mega-menu off, hamburger on ---- */
.sc-host > header > nav { display: none !important; }
.hb-mega { display: none !important; }
.hb-burger { display: flex !important; }
.sc-host > header { padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; }
/* pillola Contatti fuori dall'header: vive nel burger menu */
.sc-host > header > div:not(.hb-mnav) a.hb-btn { display: none !important; }
/* IT: cerchio, non ovale */
.sc-host > header > div > button:not(.hb-burger) {
width: 44px !important;
height: 44px !important;
padding: 0 !important;
border-radius: 999px !important;
display: flex !important;
align-items: center;
justify-content: center;
flex: none !important;
}
/* ---- split layouts stack; the media half drops to a fixed band ---- */
.sc-host > section:not(#hero) { min-height: 0 !important; }
.sc-host > section:not(#hero) > div:has(> img),
.sc-host article > div[style*="display: grid"] > div:has(img),
[style*="minmax(380px"] > div:has(img),
[style*="grid-template-columns: 1fr 1fr"] > div:has(> img) {
height: 240px !important;
min-height: 0 !important;
flex: none !important;
width: 100% !important;
}
.sc-host > section:not(#hero) > div:has(> img) > img { object-position: center !important; }
/* sticky project cards can't stack while pinned */
.sc-host article[style*="position: sticky"] { position: static !important; box-shadow: none !important; }
/* absolutely-positioned photo layers inside a stacked section keep filling it */
.sc-host > section > div[style*="position: absolute"] > img { object-position: center right !important; }
/* ---- padding: le sezioni hanno già il loro gutter inline; niente doppio padding ---- */
.sc-host > section > div { padding-left: 0; padding-right: 0; }
/* ---- generic collapse: any multi-track grid goes single-column ----
(rails are handled separately below and opted out here) */
.sc-host div[style*="display: grid"]:not([style*="grid-template-columns: repeat"]):not([style*="grid-template-columns:repeat"]):not([style*="1.5fr repeat"]):not(.hb-footer-grid) {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
/* footer: 2×2 rather than one long stack */
.sc-host [style*="1.5fr repeat"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px !important;
}
/* ---- card grids: una card sotto l'altra, nessuno scorrimento orizzontale ---- */
[style*="grid-template-columns: repeat"],
[style*="grid-template-columns:repeat"] {
display: grid !important;
grid-template-columns: 1fr !important;
overflow-x: visible !important;
max-width: 100% !important;
}
[style*="grid-template-columns: repeat"] > *,
[style*="grid-template-columns:repeat"] > * {
width: 100% !important;
min-width: 0 !important;
}
/* ---- card in 2 colonne (ISO resta a colonna piena) ---- */
[style*="grid-template-columns: repeat"]:has(.hb-card),
[style*="grid-template-columns:repeat"]:has(.hb-card),
[style*="grid-template-columns: repeat"]:has(.hb-stat),
[style*="grid-template-columns:repeat"]:has(.hb-stat) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
[style*="grid-template-columns: repeat"]:has(.hb-stat) > *:first-child,
[style*="grid-template-columns:repeat"]:has(.hb-stat) > *:first-child { grid-column: 1 / -1 !important; }
/* brevetti in 4ª posizione, "altri progetti attivi" su un rigo intero */
[style*="grid-template-columns: repeat"]:has(.hb-stat) > *:nth-child(6) { order: 1 !important; }
[style*="grid-template-columns: repeat"]:has(.hb-stat) > *:nth-child(5) {
order: 2 !important; grid-column: 1 / -1 !important;
}
/* ---- spin-off: loghi su un unico rigo ---- */
.sc-host div:has(> img[alt="Coesione Italia 21-27 Campania"]) {
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 6px !important;
margin-top: 20px !important;
}
.sc-host div:has(> img[alt="Coesione Italia 21-27 Campania"]) > img {
height: 22px !important;
min-width: 0;
flex: 0 1 auto;
}
/* ---- card impilate: testo più compatto ---- */
.sc-host .hb-card, .sc-host .hb-stat {
padding: 18px !important;
}
.sc-host .hb-stat__sub { font-size: 11px !important; line-height: 1.4 !important; }
[style*="grid-template-columns: repeat"]:has(.hb-stat) > *:nth-child(3) .hb-stat__sub,
[style*="grid-template-columns: repeat"]:has(.hb-stat) > *:nth-child(5) .hb-stat__sub {
white-space: nowrap !important; font-size: 9.5px !important; letter-spacing: -.01em !important;
}
.sc-host .hb-stat { gap: 6px !important; min-height: 132px !important; height: 132px !important; }
.sc-host .hb-stat [style*="font-size: clamp"] { font-size: 23px !important; }
.sc-host .hb-stat__value[style*="font-size"] { font-size: 23px !important; }
.sc-host-x-placeholder,
.sc-host .hb-card [style*="font-size: clamp"] { font-size: 20px !important; }
.sc-host .hb-card h3, .sc-host .hb-stat h3 { font-size: 17px !important; }
.sc-host .hb-card p, .sc-host .hb-stat p { font-size: 14px !important; line-height: 1.55 !important; }
/* ---- text blocks: no more desktop max-widths ---- */
.sc-host p, .sc-host h1, .sc-host h2, .sc-host h3 { max-width: 100% !important; }
.sc-host [style*="max-width: 1400px"],
.sc-host [style*="max-width: 1200px"],
.sc-host [style*="max-width: 1180px"],
.sc-host [style*="max-width: 1160px"],
.sc-host [style*="max-width: 1120px"],
.sc-host [style*="max-width: 1100px"],
.sc-host [style*="max-width: 1000px"] { max-width: 100% !important; }
/* ---- hit targets ---- */
.sc-host a.hb-btn, .sc-host button { min-height: 44px; }
/* ---- hover effects off on touch ---- */
.hb-card:hover, .hb-stat:hover, .hb-card-hover:hover {
transform: none !important;
box-shadow: none !important;
}
/* hairline arancioni verticali: rumore su schermo stretto */
.sc-host section > div[style*="width: 2px"] { display: none !important; }
/* ---- scrollbar nascosta (i telefoni non la mostrano) ---- */
html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.sc-host *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.sc-host * { scrollbar-width: none !important; }
/* logo centrale sopra l'animazione: fuori su mobile */
#hero img[alt="HEROBOTS"] { display: none !important; }
/* le pillole su un unico rigo */
#hero div:has(> .hb-tag) {
flex-wrap: nowrap !important;
gap: 6px !important;
}
#hero .hb-tag {
min-width: 0 !important;
flex: 0 0 auto;
width: 92px !important;
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 11.5px !important;
white-space: nowrap;
}
/* loghi partner (Home + Roman "developed with"): mai stati ridimensionati
da mobile, quindi ereditavano le altezze fisse desktop (es. UKAEA
152px, RFX 58px) apparendo giganti/rotti nel carousel */
.hb-logo-item { padding-left: 8px !important; padding-right: 8px !important; }
.hb-logo-item img { height: 24px !important; max-width: 100px !important; width: auto !important; }
.hb-logo-item img[src*="ukaea"] { height: 30px !important; max-width: 60px !important; }
.hb-logo-item img[src*="tepco"],
.hb-logo-item img[src*="enea"] { height: 12px !important; }
/* ---- hero ---- */
/* stesso inquadramento del desktop: riquadro orizzontale, non a pieno schermo */
/* l'animazione torna alla dimensione originale, e sopra si aggiunge
un prolungamento (aurora) che copre la fascia nera fino all'header */
/* la "aurora" ::before è puro CSS (dipinta al primo paint) mentre il
canvas WebGL richiede JS + compilazione shader: senza sincronizzarli,
l'aurora appare per prima e il canvas "pop-a" dopo. Restano nascosti
entrambi finché #hero non riceve .hb-hero-ready (aggiunta da main.js al
primo frame disegnato), poi compaiono insieme con lo stesso fade. */
#heroVortex {
width: 100% !important;
left: 0 !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
height: 150vw !important;
transform: translateY(-52.5%) scale(1.42) !important;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%) !important;
mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%) !important;
opacity: 0 !important;
transition: opacity .5s ease !important;
}
#hero.hb-hero-ready #heroVortex { opacity: .95 !important; }
#hero::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 190px;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 150% 100% at 50% 104%, rgba(168, 38, 138, .34) 0%, rgba(96, 26, 116, .20) 42%, rgba(40, 12, 60, .08) 68%, transparent 84%),
radial-gradient(ellipse 90% 80% at 18% 108%, rgba(120, 30, 150, .18) 0%, transparent 70%),
radial-gradient(ellipse 90% 80% at 84% 108%, rgba(180, 50, 120, .16) 0%, transparent 70%);
opacity: 0;
transition: opacity .5s ease;
}
#hero.hb-hero-ready::before { opacity: 1; }
#hero { padding-top: 112px !important; padding-bottom: 34px !important; min-height: 74vh !important; }
#hero div:has(> .hb-tag) { margin-bottom: 18px !important; }
/* sottotitolo hero in bianco pieno su mobile */
#hero > div > p { color: #fff !important; }
/* ---- stats: "Hardware e Software / In-House" in cima a tutta larghezza,
"Projects & contracts" sotto, su una sola colonna ---- */
#why .hb-stat:nth-child(2) { order: -1 !important; grid-column: 1 / -1 !important; }
#why .hb-stat:nth-child(1) { order: 0 !important; grid-column: auto !important; }
/* brevetti in 4ª posizione, ISO Certifications spostata in fondo a piena larghezza */
#why .hb-stat:nth-child(6) { order: 1 !important; }
#why .hb-stat:nth-child(5) { order: 2 !important; grid-column: 1 / -1 !important; }
#why .hb-stat__sub { overflow-wrap: anywhere; }
/* "Key nuclear reactors": il sottotesto va a capo invece di uscire dalla card */
#why .hb-stat:nth-child(3) .hb-stat__sub {
white-space: normal !important;
font-size: 10px !important;
letter-spacing: 0 !important;
}
#why .hb-stat { height: auto !important; min-height: 132px !important; }
/* Roman · card "The system": testo di supporto a 13px, casella più larga */
#system .hb-reveal > p { font-size: 13px !important; }
#system .hb-reveal { padding: 22px 12px 24px !important; }
#system div[style*="grid-template-columns: repeat(4, 1fr)"] { gap: 10px !important; }
#system { padding-left: 16px !important; padding-right: 16px !important; }
/* Roman · card end-effector (TIGER): testo 15px, casella più larga */
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] > * > p { font-size: 13px !important; }
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] > * { padding: 22px 12px 24px !important; }
#tiger div[style*="grid-template-columns: repeat(4, 1fr)"] { gap: 10px !important; }
#tiger { padding-left: 16px !important; padding-right: 16px !important; }
/* fascia video: bordo superiore di sezione, come le altre */
#video { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
/* ---- what we deliver: pillole centrate nella card ---- */
#deliver a > span[style*="border-radius:999px"],
#deliver a > span[style*="border-radius: 999px"] { align-self: center !important; }
/* ---- dimensione bottoni uniforme su tutto il sito mobile
(via di mezzo tra la pillola piccola e il CTA grande dei form) ---- */
.sc-host .hb-btn,
.sc-host .hb-btn--lg,
.sc-host .hb-btn--sm,
.sc-host div:has(> .hb-btn--lg + .hb-btn--lg) > .hb-btn--lg,
.sc-host .wpcf7-form-control.wpcf7-submit {
height: 44px !important;
min-height: 44px !important;
padding: 0 20px !important;
font-size: 14px !important;
line-height: 1 !important;
}
/* ---- CTA contatti: il del bottone invio deve occupare tutta la
larghezza della card (restava ~146px di suo, essendo il bottone
inline-flex a larghezza naturale). text-align:center sul non
basta a centrarlo (resta storto, verificato via CDP) — il bottone
stesso va reso largo quanto la card, che lo centra riempiendola. */
[data-contact-panel] .wpcf7-form p:has(.wpcf7-submit) {
width: 100% !important;
}
[data-contact-panel] .wpcf7-form-control.wpcf7-submit {
width: 100% !important;
padding: 0 60px !important;
}
/* ---- CTA contatti: lo spinner di CF7 e' visibility:hidden ma conserva il
suo box 24x24 e sta nello stesso del submit. Col e il bottone
a width:100% (regole qui sopra) va a capo e lascia ~30px di vuoto
invisibile sotto il bottone, dentro la card: sopra il primo elemento
restavano 28px, sotto il bottone ~58px. Fuori flusso non occupa
altezza e durante l'invio resta visibile sul bordo destro della
pillola. !important anche su position: la regola di CF7
(.wpcf7 .wpcf7-spinner{position:relative}) ha la stessa specificita'
di questa, quindi senza vincerebbe chi viene stampato dopo. ---- */
[data-contact-panel] .wpcf7-form p:has(.wpcf7-submit) { position: relative !important; }
[data-contact-panel] .wpcf7-spinner {
position: absolute !important;
right: 16px; top: 50%; transform: translateY(-50%);
margin: 0 !important;
}
/* ---- CTA contatti: titolo leggermente più grande di 3px rispetto alla
regola globale .sc-host h2 (20px), solo per questa card ---- */
#contact h2 { font-size: 23px !important; }
}
@media (max-width: 480px) {
.sc-host > section:not(#hero) > div:has(> img),
.sc-host article > div[style*="display: grid"] > div:has(img),
[style*="minmax(380px"] > div:has(img) { height: 200px !important; }
}
@media (hover: none) {
.hb-btn:hover::after { animation: none !important; opacity: 0 !important; }
}