/* ============================================================= Settore alimentare — /settori/alimentare/ Namespace .ali- (pagina rifatta da zero il 2026-09-18 sul modello delle pagine cavi, gomma e packaging: stessa famiglia, racconto proprio). 1 · apertura: la trafila di bronzo aperta a spicchio, come una foto di prodotto 2 · com'e' fatta: un foro della trafila tagliato, sei richiami sopra e sotto 3 · la filiera: sei passaggi, su tutti abbiamo lavorato 4 · clienti: solo il logo (Barilla) 5 · il primo passo: richiesta tecnica o documentazione (nessun modulo in pagina) I disegni sono generati da tools/trafila-pasta/gen.py. ============================================================= */ .page-ali { --ali-ink: #0b1220; --ali-copy: #56627a; --ali-gray: #7b889c; --ali-quiet: #aab3c2; --ali-muted: #64748b; --ali-accent: #2563eb; --ali-accent-ink: #1d4ed8; --ali-accent-deep: #1e3a8a; --ali-mist: #f5f5f7; --ali-rule: rgba(15, 23, 42, 0.1); --ali-pad: clamp(96px, 11vw, 168px); --ali-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ali-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* .page-home-corporate impone main{overflow:hidden}: qui basta non far scorrere di lato */ body.page-ali main { overflow-x: clip; overflow-y: visible; padding-top: 0; background: #ffffff; } .ali-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-ali section[id] { scroll-margin-top: 72px; } .page-ali :is(a, button):focus-visible { outline: 3px solid var(--ali-accent); outline-offset: 4px; border-radius: 4px; } .ali-eyebrow { margin: 0; color: var(--ali-accent-deep); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } /* intestazione di sezione: al centro, titolo grande, seconda riga grigia */ .ali-head { max-width: 960px; margin-inline: auto; text-align: center; } .ali-title { margin: 0.42em 0 0; color: var(--ali-ink); font-size: clamp(2.4rem, 5.4vw, 4.7rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; } .ali-title span { display: block; color: var(--ali-gray); } /* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel ) */ .reveal-ready .ali-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ali-ease), transform 0.8s var(--ali-ease); } .reveal-ready .ali-in.is-in { opacity: 1; transform: none; } .reveal-ready .ali-in--d1 { transition-delay: 0.08s; } .reveal-ready .ali-in--d2 { transition-delay: 0.16s; } /* ============================================================= 1 · APERTURA ============================================================= */ .ali-hero { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 6vw, 88px); text-align: center; } .ali-hero__copy { max-width: 1040px; } .ali-hero h1 { margin: 0.34em auto 0; color: var(--ali-ink); font-size: clamp(2.7rem, 5.9vw, 5.4rem); font-weight: 790; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; } .ali-hero h1 span { display: block; color: var(--ali-gray); } .ali-hero__lead { margin: 28px auto 0; max-width: 46ch; color: var(--ali-copy); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; text-wrap: balance; } .ali-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; } /* la trafila: un oggetto intero, centrato; e' quasi quadrata, quindi piu' stretta della bobina, per non occupare due schermate */ .ali-hero__die { width: min(100% - 32px, 820px); margin: clamp(40px, 6vw, 80px) auto 0; } .ali-hero__die img { display: block; width: 100%; height: auto; } .reveal-ready .ali-hero__die img { animation: ali-arrive 1.8s var(--ali-ease) 0.15s both; } @keyframes ali-arrive { from { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.97); } to { opacity: 1; transform: none; } } /* ============================================================= 2 · COM'E' FATTA — un foro della trafila, tagliato ============================================================= */ .ali-cut { padding-block: var(--ali-pad); } .ali-section { max-width: 1120px; margin: clamp(56px, 8vw, 104px) auto 0; } .ali-section__stage { position: relative; } .ali-section__stage img { display: block; width: 100%; height: auto; } /* i richiami: le righe finiscono su una fila sopra e una sotto il disegno; la scritta sta oltre la fine della riga */ .ali-mark { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, calc(-100% - 8px)); color: var(--ali-ink); font: 500 0.8rem/1 var(--ali-mono); letter-spacing: 0.02em; white-space: nowrap; } .ali-mark--bottom { transform: translate(-50%, 8px); } .ali-mark b { margin-right: 7px; color: var(--ali-accent-deep); font-weight: 700; } .ali-legend { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; max-width: 340px; margin: 30px auto 0; padding: 0; list-style: none; color: var(--ali-ink); font: 500 0.78rem/1.3 var(--ali-mono); } .ali-legend b { margin-right: 7px; color: var(--ali-accent-deep); font-weight: 700; } .ali-section figcaption { max-width: 62ch; margin: 44px auto 0; color: var(--ali-muted); font: 500 0.76rem/1.5 var(--ali-mono); letter-spacing: 0.04em; text-align: center; text-wrap: balance; } /* ============================================================= 3 · LA FILIERA — sei macchine ============================================================= */ .ali-line { padding-block: var(--ali-pad); background: var(--ali-mist); } .ali-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; } .ali-step { padding-block: 28px 36px; border-top: 1px solid rgba(15, 23, 42, 0.14); } .ali-step__n { display: block; color: var(--ali-accent); font: 700 0.86rem/1 var(--ali-mono); } .ali-step h3 { margin: 14px 0 0; color: var(--ali-ink); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; } .ali-step p { margin: 10px 0 0; max-width: 34ch; color: var(--ali-copy); font-size: 1rem; line-height: 1.5; } /* ============================================================= 4 · CLIENTI — solo i loghi ============================================================= */ .ali-client { padding-block: clamp(80px, 10vw, 144px); background: #ffffff; text-align: center; } /* un logo solo (come Prysmian sui cavi); Barilla e' un ovale, quindi piu' stretto */ .ali-client__logo { display: block; width: clamp(150px, 17vw, 210px); height: auto; margin: clamp(28px, 3.6vw, 44px) auto 0; } /* ============================================================= 5 · IL PRIMO PASSO — titolo e due strade, come nelle pagine servizio ============================================================= */ .ali-cta { padding-block: var(--ali-pad); background: var(--ali-mist); } .ali-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 44px); } .ali-cta__note { margin: 24px auto 0; max-width: 44ch; color: var(--ali-copy); line-height: 1.55; } /* ============================================================= Telefono e tablet ============================================================= */ @media (max-width: 980px) { .ali-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ali-hero { padding-top: 48px; } .ali-hero__die { width: 100%; margin-top: 36px; } /* su telefono accanto al disegno restano solo i numeri: i nomi vanno sotto. Il disegno si allarga un po' nei margini (a sinistra c'e' solo la sfumatura) */ .ali-section__stage { width: 111%; margin-left: -7.5%; } .ali-mark { font-size: 0; transform: translate(-50%, calc(-100% - 4px)); } .ali-mark--bottom { transform: translate(-50%, 4px); } .ali-mark b { margin: 0; font-size: 0.74rem; } .ali-legend { display: grid; } .ali-section figcaption { margin-top: 22px; } .ali-steps { grid-template-columns: minmax(0, 1fr); } .ali-step { padding-block: 22px 26px; } } @media (prefers-reduced-motion: reduce) { .reveal-ready .ali-in { opacity: 1; transform: none; transition: none; } .reveal-ready .ali-hero__die img { animation: none; } }